/* ===========================================================
   iPay — Design System
   ธีม: ขาว + ส้มเข้ม + แดงเสริม + เทาอ่อน + ฟ้าอ่อน + น้ำเงินเข้มตัด
   Clean & Clear · Responsive · Light/Dark
   =========================================================== */

:root{
  /* ---- Color tokens ---- */
  --c-bg:        #f6f8fb;
  --c-bg-2:      #eef2f7;
  --c-surface:   #ffffff;
  --c-text:      #0f172a;     /* navy-900 */
  --c-text-soft: #475569;     /* slate-600 */
  --c-muted:     #94a3b8;
  --c-border:    #e6eaf0;

  --c-primary:        #ea580c;   /* ส้มเข้ม orange-600 */
  --c-primary-2:      #f97316;   /* orange-500 */
  --c-primary-dark:   #c2410c;
  --c-primary-soft:   #fff1e6;

  --c-accent:    #dc2626;   /* แดงเสริม red-600 */
  --c-info:      #0ea5e9;   /* ฟ้าอ่อน sky */
  --c-info-soft: #e0f2fe;
  --c-navy:      #1e3a8a;   /* น้ำเงินเข้มตัด */
  --c-navy-deep: #172554;

  --c-success:   #10b981;
  --c-warning:   #f59e0b;
  --c-danger:    #ef4444;

  /* ---- Radius scale ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ---- Shadow depth ---- */
  --shadow-sm:  0 1px 2px rgba(15,23,42,.06);
  --shadow-md:  0 6px 18px rgba(15,23,42,.08);
  --shadow-lg:  0 18px 40px rgba(15,23,42,.12);
  --shadow-glow:0 10px 30px rgba(234,88,12,.30);

  /* ---- 8px / 4px spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
}

html.dark{
  --c-bg:        #0b1220;
  --c-bg-2:      #0f1729;
  --c-surface:   #131c2e;
  --c-text:      #e2e8f0;
  --c-text-soft: #cbd5e1;
  --c-muted:     #8aa0bd;
  --c-border:    #233049;
  --c-primary-soft:#3a1d0d;
  --c-info-soft: #0c2a3f;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

html, body{
  font-family: 'Prompt', system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  /* Fluid typography */
  font-size: clamp(14px, 0.55vw + 11px, 16px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
body{ margin:0; }

/* Font weight hierarchy */
h1,h2,h3,h4{ letter-spacing: -0.01em; font-weight: 600; line-height: 1.25; }
.fluid-h1{ font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 700; line-height:1.2; }
.fluid-h2{ font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);    font-weight: 600; }
.fluid-h3{ font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); font-weight: 600; }
.text-balance{ text-wrap: balance; }
.truncate-1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.truncate-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Glass */
.glass{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.5);
}
html.dark .glass{ background: rgba(19,28,46,.6); border-color: rgba(255,255,255,.06); }

/* ---------- Card ---------- */
.card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card-hover:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-pad{ padding: var(--space-6); }

/* Stat card with gradient accent bar */
.stat-card{ position:relative; overflow:hidden; }
.stat-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:5px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-primary-2));
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:999px; font-weight:500; font-family:inherit;
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition: transform .15s ease, background .2s, color .2s, box-shadow .2s;
  line-height:1.2; font-size:.95rem;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary{ background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)); color:#fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover{ box-shadow: 0 12px 28px rgba(234,88,12,.4); }
.btn-navy{ background: linear-gradient(135deg, var(--c-navy), #2747a8); color:#fff; box-shadow:0 6px 18px rgba(30,58,138,.28); }
.btn-secondary{ background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
.btn-secondary:hover{ background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-dark); }
.btn-danger{ background: linear-gradient(135deg, #ef4444, #dc2626); color:#fff; box-shadow:0 6px 18px rgba(239,68,68,.25); }
.btn-success{ background: linear-gradient(135deg, #10b981, #059669); color:#fff; box-shadow:0 6px 18px rgba(16,185,129,.25); }
.btn-info{ background: linear-gradient(135deg, #0ea5e9, #38bdf8); color:#fff; box-shadow:0 6px 18px rgba(14,165,233,.25); }
.btn-ghost{ background:transparent; color: var(--c-text-soft); }
.btn-ghost:hover{ color: var(--c-primary); background: var(--c-primary-soft); }
.btn-sm{ padding:6px 12px; font-size:.82rem; }
.btn-lg{ padding:14px 26px; font-size:1.05rem; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

/* ---------- Form ---------- */
.input,.select,.textarea{
  width:100%; padding:11px 14px; background: var(--c-surface);
  border:1px solid var(--c-border); border-radius: var(--radius-sm);
  font-family:inherit; color: var(--c-text); font-size:.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color: var(--c-primary);
  box-shadow:0 0 0 3px rgba(234,88,12,.18);
}
.label{ font-size:.85rem; color: var(--c-text-soft); margin-bottom:6px; display:block; font-weight:500; }

/* ---------- Chips / badges ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 12px; border-radius:999px; font-size:.75rem; font-weight:500; }
.chip-dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

/* ---------- Layout shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.app-main{ flex:1; min-width:0; }
.content-wrap{ max-width:1180px; margin:0 auto; padding: var(--space-6) var(--space-4) 96px; }
@media (min-width:1024px){ .content-wrap{ padding: var(--space-8) var(--space-8) var(--space-8); } }

/* ---------- Sidebar (sticky) ---------- */
.sidebar{
  position: sticky; top:0; height:100vh; flex-shrink:0; width:264px;
  background: linear-gradient(180deg, var(--c-navy-deep) 0%, #1e293b 100%);
  color:#e2e8f0; z-index:50;
}
.sidebar-link{
  display:flex; align-items:center; gap:12px; padding:11px 18px; margin:3px 12px;
  border-radius:12px; color:#cbd5e1; transition: all .2s ease; font-size:.92rem;
}
.sidebar-link span:first-child{ font-size:1.15rem; width:22px; text-align:center; }
.sidebar-link:hover{ background: rgba(234,88,12,.16); color:#fff; }
.sidebar-link.active{ background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2)); color:#fff; box-shadow: var(--shadow-glow); }

/* ---------- Mobile top + bottom nav ---------- */
.topbar{ position: sticky; top:0; z-index:40; }
.mobile-nav{
  position: fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top:1px solid var(--c-border); box-shadow:0 -6px 18px rgba(15,23,42,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
html.dark .mobile-nav{ background: rgba(19,28,46,.96); }
.mobile-nav-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9px 4px; color: var(--c-text-soft); font-size:.68rem; gap:2px; }
.mobile-nav-item.active{ color: var(--c-primary); }
.mobile-nav-item .icon{ font-size:1.3rem; line-height:1; }
@media (max-width:1023px){ .sidebar{ display:none; } body.has-mobilenav{ padding-bottom:72px; } }

/* ---------- JS Table ---------- */
.jt-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.jt-search{ flex:1; min-width:200px; }
.jt-wrap{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--c-border); background: var(--c-surface); }
.jt{ width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; }
.jt thead th{
  background: var(--c-bg-2); color: var(--c-text-soft); text-align:left; font-weight:600;
  padding:13px 14px; border-bottom:1px solid var(--c-border); white-space:nowrap; position:sticky; top:0;
  cursor:pointer; user-select:none;
}
.jt thead th.no-sort{ cursor:default; }
.jt thead th .arrow{ opacity:.35; font-size:.7rem; margin-left:4px; }
.jt thead th.sort-asc .arrow, .jt thead th.sort-desc .arrow{ opacity:1; color: var(--c-primary); }
.jt tbody td{ padding:12px 14px; border-bottom:1px solid var(--c-border); vertical-align:middle; color: var(--c-text); }
.jt tbody tr:last-child td{ border-bottom:none; }
.jt tbody tr{ transition: background .15s; }
.jt tbody tr:hover td{ background: var(--c-primary-soft); }
.jt-empty{ text-align:center; padding:48px 16px; color: var(--c-muted); }
.jt-footer{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:12px 14px; flex-wrap:wrap; color: var(--c-text-soft); font-size:.85rem; }
.jt-pager{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.jt-pager button{ min-width:34px; padding:6px 10px; border-radius:9px; border:1px solid var(--c-border); background: var(--c-surface); cursor:pointer; color: var(--c-text); transition: all .15s; }
.jt-pager button:hover:not(:disabled){ border-color: var(--c-primary); color: var(--c-primary); }
.jt-pager button.active{ background: var(--c-primary); color:#fff; border-color: var(--c-primary); }
.jt-pager button:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- Skeleton loading ---------- */
.skeleton{ background: linear-gradient(90deg, var(--c-bg-2) 0%, var(--c-border) 50%, var(--c-bg-2) 100%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:8px; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- Animations / transitions ---------- */
.page-fade{ animation: fadeUp .35s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.pop-in{ animation: popIn .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes popIn{ from{ opacity:0; transform: scale(.92); } to{ opacity:1; transform: scale(1); } }
.count-flash{ animation: flash .9s ease; }
@keyframes flash{ 0%{ background: var(--c-success); color:#fff; } 100%{ background:transparent; } }
.pulse-ring{ animation: pulseRing 1.6s ease-out infinite; }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.5);} 70%{ box-shadow:0 0 0 16px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }

/* ---------- QR boxes ---------- */
.qr-frame{ background:#fff; border-radius: var(--radius-lg); padding:20px; display:inline-block; box-shadow: var(--shadow-md); border:1px solid var(--c-border); }
.qr-frame canvas, .qr-frame img{ display:block; border-radius:8px; }

/* ---------- Scanner (กล้องสี่เหลี่ยมจัตุรัส 1:1) ---------- */
#reader{ width:100%; max-width:360px; aspect-ratio:1/1; margin:0 auto; border-radius: var(--radius-md); overflow:hidden; background:#0b1220; position:relative; }
#reader video{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius: var(--radius-md); }
#reader canvas{ object-fit:cover; }

/* ---------- Misc utility ---------- */
:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; border-radius:4px; }
.cq{ container-type: inline-size; }
.snap-x-row{ scroll-snap-type:x mandatory; } .snap-x-row > *{ scroll-snap-align:start; }
.hide-scrollbar::-webkit-scrollbar{ display:none; } .hide-scrollbar{ scrollbar-width:none; }
.divider{ height:1px; background: var(--c-border); border:0; margin: var(--space-6) 0; }
.text-primary{ color: var(--c-primary); } .text-navy{ color: var(--c-navy); } .text-soft{ color: var(--c-text-soft); }
.bg-soft{ background: var(--c-bg-2); }

/* role choose cards */
.role-card{ transition: transform .25s, box-shadow .25s; }
.role-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}