/* Fonts for all 5 scripts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Sans+Lao:wght@400;500;600;700&family=Noto+Sans+Myanmar:wght@400;500;600;700&family=Noto+Sans+Khmer:wght@400;500;600;700&display=swap');

:root { --brand: #0891b2; --brand-dark: #0e7490; }

* { font-family: 'Noto Sans Thai', 'Noto Sans Lao', 'Noto Sans Myanmar', 'Noto Sans Khmer', system-ui, -apple-system, sans-serif; }

body { background: #f1f5f9; color: #0f172a; }

/* language chips */
.lang-chip {
  padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: #e2e8f0; color: #334155; border: 1px solid transparent; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.lang-chip:hover { background: #cbd5e1; }
.lang-chip.lang-active { background: var(--brand); color: #fff; border-color: var(--brand-dark); }

/* cards */
.card { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card { background:#fff; border-radius:14px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.07); border-left:4px solid var(--brand); }

/* nav */
.nav-link { padding: 8px 14px; border-radius: 10px; font-weight: 500; color:#475569; white-space:nowrap; }
.nav-link:hover { background:#e0f2fe; color: var(--brand-dark); }
.nav-link.active { background: var(--brand); color:#fff; }

/* badges */
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; }
.b-reported { background:#fef9c3; color:#854d0e; }
.b-host { background:#dbeafe; color:#1e40af; }
.b-laundry { background:#e9d5ff; color:#6b21a8; }
.b-closed { background:#dcfce7; color:#166534; }
.b-stained { background:#fef3c7; color:#92400e; }
.b-damaged { background:#fee2e2; color:#991b1b; }
.b-pending { background:#fef9c3; color:#854d0e; }
.b-approved { background:#dcfce7; color:#166534; }
.b-rejected { background:#fee2e2; color:#991b1b; }

/* buttons */
.btn { padding:8px 16px; border-radius:10px; font-weight:600; cursor:pointer; border:none; transition:all .15s; font-size:14px; }
.btn-primary { background: var(--brand); color:#fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background:#e2e8f0; color:#334155; }
.btn-ghost:hover { background:#cbd5e1; }
.btn-green { background:#16a34a; color:#fff; } .btn-green:hover{ background:#15803d; }
.btn-red { background:#dc2626; color:#fff; } .btn-red:hover{ background:#b91c1c; }
.btn-sm { padding:5px 11px; font-size:13px; }

/* inputs */
.inp { width:100%; padding:9px 12px; border:1px solid #cbd5e1; border-radius:10px; font-size:14px; background:#fff; }
.inp:focus { outline:none; border-color: var(--brand); box-shadow:0 0 0 3px rgba(8,145,178,.15); }
label.lbl { display:block; font-size:13px; font-weight:600; color:#475569; margin-bottom:4px; }

/* table */
table.tbl { width:100%; border-collapse:collapse; font-size:14px; }
table.tbl th { background:#f8fafc; text-align:left; padding:10px 12px; font-weight:600; color:#475569; border-bottom:2px solid #e2e8f0; white-space:nowrap; }
table.tbl td { padding:10px 12px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
table.tbl tr:hover td { background:#f8fafc; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:flex-start; justify-content:center; padding:24px; z-index:50; overflow:auto; }
.modal { background:#fff; border-radius:16px; width:100%; max-width:560px; padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.25); margin-top:20px; }

/* misc */
.thumb { width:54px; height:54px; object-fit:cover; border-radius:8px; border:1px solid #e2e8f0; cursor:pointer; }
.scroll-x { overflow-x:auto; }
::-webkit-scrollbar { height:9px; width:9px; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#0f172a; color:#fff; padding:11px 20px; border-radius:10px; z-index:100; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.3); }

/* stepper */
.stepper { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.step { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; color:#475569; }
.step .num { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:999px; background:var(--brand); color:#fff; font-size:11px; }
.step-arrow { color:#94a3b8; font-weight:700; }
.step.step-repair .num { background:#f97316; }

/* category cards (home) */
.cat-card { display:block; background:#fff; border-radius:18px; padding:22px; box-shadow:0 2px 8px rgba(0,0,0,.08); border-top:5px solid var(--brand); transition:transform .12s, box-shadow .12s; cursor:pointer; text-decoration:none; color:inherit; }
.cat-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.14); }
.cat-icon { font-size:44px; line-height:1; }