/* Hitori PAY - Modern Blue/White Theme */
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --secondary:#64748b;
  --success:#059669;
  --danger:#dc2626;
  --warning:#d97706;
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow:0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --radius:12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Navbar: ดูที่ "App navbar" ด้านล่าง */

/* Buttons */
.btn-primary{
  background: var(--primary);
  border: none;
  border-radius: 8px;
  font-weight: 600;
}
.btn-primary:hover{ background: var(--primary-dark); }
.btn-outline-secondary{
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  font-weight: 600;
}
.btn-outline-secondary:hover{ background: #f8fafc; }
.btn-sm{ padding: 0.35rem 0.75rem; font-size: 0.875rem; }

/* Cards */
.card{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header{
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}

/* Stat cards */
.stat-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}
.stat-card:hover{ transform: translateY(-2px); }
.stat-label{
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-value{
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 0.5rem;
}

/* Page header */
.page-header{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.page-title{ font-weight: 800; font-size: 1.75rem; letter-spacing: -0.5px; }
.page-sub{ color: var(--muted); font-size: 0.95rem; }

/* Tables */
table.table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.table thead th{
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1rem;
}
.table tbody td{
  border-bottom: 1px solid var(--border);
  padding: 1rem;
  vertical-align: middle;
  font-size: 0.95rem;
}
.table tbody tr:last-child td{ border-bottom: none; }
.table tbody tr:hover{ background: #f8fafc; }

/* Section titles */
.section-title{
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--text);
}
.subtitle-bar{
  background: #f1f5f9;
  border-left: 4px solid var(--primary);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 1rem;
}

/* Alerts */
.alert{
  border: none;
  border-radius: 10px;
  font-weight: 600;
}
.alert-success{ background: #ecfdf5; color: #065f46; }
.alert-danger{ background: #fef2f2; color: #991b1b; }
.alert-info{ background: #eff6ff; color: #1d4ed8; }
.alert-warning{ background: #fffbeb; color: #92400e; }

/* Modals */
.modal-content{ border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
.modal-header{ border-bottom: 1px solid var(--border); border-top-left-radius: 16px; border-top-right-radius: 16px; }
.modal-footer{ border-top: 1px solid var(--border); }

/* Dropdowns */
.form-select, .form-control{
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
}
.form-select:focus, .form-control:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* Code */
code{
  background: #f1f5f9;
  color: var(--primary-dark);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* Badges */
.badge{
  font-weight: 700;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
}
.bg-success{ background: var(--success) !important; }
.bg-danger{ background: var(--danger) !important; }
.bg-secondary{ background: var(--secondary) !important; }

/* Utils */
.text-muted{ color: var(--muted) !important; }
.fw-bold{ font-weight: 700; }
.text-center{ text-align: center; }
.mt-3{ margin-top: 1rem; }
.mb-3{ margin-bottom: 1rem; }

/* Activity timeline */
.activity-item{
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child{ border-bottom: none; }
.activity-time{
  min-width: 130px;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.activity-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.bg-in{ background: #ecfdf5; color: #059669; }
.bg-out{ background: #fef2f2; color: #dc2626; }

/* Page loader */
.page-loader{ position:fixed; inset:0; background:rgba(255,255,255,.7); backdrop-filter:blur(2px); display:grid; place-items:center; z-index:2000; transition:opacity .2s; }
.page-loader.hidden{ opacity:0; pointer-events:none; }
.page-loader .spinner-border{ width:2.75rem; height:2.75rem; }

/* App navbar */
.app-nav{ background:#fff; border-bottom:1px solid var(--border); box-shadow:0 1px 2px rgb(0 0 0 / .04); padding:.6rem 0; }
.app-nav .navbar-brand{ font-weight:800; font-size:1.2rem; color:var(--text) !important; letter-spacing:-.3px; }
.brand-mark{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; display:grid; place-items:center; font-size:.95rem; box-shadow:0 4px 10px rgb(37 99 235 / .3); }
.brand-accent{ color:var(--primary); }
.app-nav .nav-link{ color:var(--muted) !important; font-weight:600; border-radius:10px; padding:.5rem .85rem; display:flex; align-items:center; gap:.5rem; transition:background .15s, color .15s; }
.app-nav .nav-link:hover{ color:var(--primary) !important; background:#eff6ff; }
.app-nav .nav-link.active{ color:var(--primary) !important; background:#eff6ff; }
.nav-icon{ width:1.1rem; text-align:center; font-size:.95rem; }
.app-nav .navbar-toggler{ font-size:1.2rem; color:var(--text); }
.app-nav .navbar-toggler:focus{ box-shadow:none; }
.user-chip{ border:1px solid var(--border); border-radius:999px !important; padding:.3rem .9rem .3rem .3rem !important; display:flex; align-items:center; gap:.5rem; color:var(--text) !important; }
.avatar{ width:30px; height:30px; border-radius:50%; background:#dbeafe; color:var(--primary); display:grid; place-items:center; font-size:.85rem; }
.app-nav .dropdown-item{ font-weight:600; color:var(--text); }
.app-nav .dropdown-item:hover{ background:#eff6ff; color:var(--primary); }
.app-nav .dropdown-item.text-danger:hover{ background:#fef2f2; color:var(--danger) !important; }
@media (max-width: 991.98px){
  .app-nav .navbar-nav{ padding-top:.5rem; }
  .user-chip{ width:fit-content; }
}

/* Account cards */
.acct-card{ border:1px solid var(--border); border-radius:16px; background:#fff; padding:1.25rem; height:100%; box-shadow:var(--shadow); }
.acct-avatar{ width:46px; height:46px; border-radius:12px; background:#eff6ff; color:var(--primary); display:grid; place-items:center; font-size:1.3rem; }
.acct-name{ font-weight:700; font-size:1.05rem; }
.quota-ring{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--primary) calc(var(--p) * 1%), #e2e8f0 0); }
.quota-ring span{ width:50px; height:50px; border-radius:50%; background:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; }

/* Key banner */
.key-banner{ background:#ecfdf5; border:1px solid #a7f3d0; border-radius:14px; padding:1.1rem 1.25rem; }
.key-banner code{ display:block; margin-top:.5rem; background:#fff; border:1px dashed #6ee7b7; border-radius:8px; padding:.6rem .8rem; font-size:1rem; color:#065f46; }

/* ============ Pay Page (LPAY Checkout) ============ */
.pay-wrap{max-width:900px;margin:0 auto}
.pay-page-title{font-weight:800;font-size:1.75rem;letter-spacing:-.5px;margin:0}
.pay-header{margin-bottom:1.5rem}
.pay-amount-box{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;border-radius:16px;padding:1.75rem 1.5rem;margin-bottom:1.5rem;
  box-shadow:0 10px 28px rgb(37 99 235 / .30)
}
.pay-amount-label{
  display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;
  font-weight:800;opacity:.9;margin-bottom:.4rem
}
.pay-amount-value{font-size:2.8rem;font-weight:800;letter-spacing:-1px;line-height:1}
.pay-amount-value small{font-size:1rem;font-weight:600;opacity:.95}
.pay-amount-note{font-size:.85rem;opacity:.85;margin-top:.6rem}
.pay-card{border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;height:100%}
.pay-card-title{
  background:#f8fafc;border-bottom:1px solid var(--border);
  padding:1rem 1.25rem;font-weight:800;font-size:.95rem;color:var(--text);
  display:flex;align-items:center;gap:.75rem
}
.pay-card-body{padding:1.5rem;flex:1}
.pay-card--qr .pay-card-body{text-align:center;padding-top:1.25rem}
.pay-qr-wrapper{position:relative;display:inline-block;margin:1rem 0}
.pay-qr-img{
  width:260px;height:260px;object-fit:contain;border-radius:14px;background:#fff;
  padding:8px;box-shadow:0 6px 20px rgb(0 0 0 / .10)
}
.pay-qr-hover{
  position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.2);
  display:none;place-items:center;backdrop-filter:blur(3px)
}
.pay-qr-wrapper:hover .pay-qr-hover{display:grid}
.pay-qr-text{text-align:left}
.pay-qr-code-text{
  background:#f8fafc;border:1px solid var(--border);border-radius:8px;
  padding:.5rem .75rem;word-break:break-all;display:inline-block;max-width:100%
}
.pay-summary-list{display:flex;flex-direction:column;gap:0}
.pay-summary-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 0;font-size:.95rem
}
.pay-summary-item.border-top{border-top:1px solid var(--border)}
.pay-summary-label{color:var(--muted);font-weight:700}
.pay-summary-value{color:var(--text);font-weight:700}
.pay-instructions{margin-top:1.5rem}
.pay-steps{list-style:none;padding:0;margin:1rem 0 0;counter-reset:step}
.pay-steps li{
  counter-increment:step;display:flex;align-items:flex-start;gap:.75rem;
  margin-bottom:.85rem;font-size:.9rem;color:var(--text)
}
.pay-steps li::before{
  content:counter(step);width:26px;height:26px;border-radius:50%;
  background:var(--primary);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;flex-shrink:0
}
.pay-actions{margin-top:1.5rem}
.pay-footer{color:var(--muted);font-size:.85rem}

/* States */
.pay-state{text-align:center;padding:3rem 1rem}
.pay-icon{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  font-size:1.75rem;margin:0 auto 1.25rem;box-shadow:0 4px 14px rgb(0 0 0 / .08)
}
.pay-icon--success{background:#ecfdf5;color:#059669}
.pay-icon--expired{background:#fef2f2;color:#dc2626}
.pay-icon--warn{background:#fffbeb;color:#d97706}
.pay-state h2{font-weight:800;font-size:1.75rem;margin-bottom:.5rem;letter-spacing:-.5px}
.pay-state p.text-muted{font-size:.95rem;max-width:440px;margin:0 auto 1.75rem}
.pay-detail{
  display:inline-block;text-align:left;border:1px solid var(--border);
  border-radius:12px;padding:1.25rem 1.5rem;background:#fff
}
.pay-row{
  display:flex;justify-content:space-between;padding:.65rem 0;
  border-bottom:1px solid var(--border);font-size:.95rem
}
.pay-row:last-child{border-bottom:none}
.pay-label{color:var(--muted);font-weight:700}
.pay-value{color:var(--text);font-weight:700}
.pay-value--big{font-size:1.6rem}
.pay-state--paid .btn-primary{padding:.7rem 1.75rem}
.pay-state--expired .btn-outline-primary{padding:.7rem 1.75rem}

@media (max-width:767.98px){
  .pay-amount-value{font-size:2.3rem}
  .pay-qr-img{width:220px;height:220px}
}