/* ================================================================
   E-Certificate System — iOS Premium Theme
   แรงบันดาลใจจาก iOS/macOS ล่าสุด: frosted glass, soft depth, pill UI
   ================================================================ */
:root {
  --primary: #0a84ff;              /* iOS System Blue */
  --primary-2: #5e5ce6;            /* iOS Indigo */
  --primary-grad: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  --bg: #f2f2f7;                   /* iOS System Grouped Background */
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --surface-2: #f5f5f7;
  --text: #1c1c1e;
  --text-muted: #8e8e93;           /* iOS Secondary Label */
  --border: rgba(60, 60, 67, 0.12);
  --sidebar-w: 272px;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(28,28,30,.10);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.06), 0 20px 48px -16px rgba(28,28,30,.18);
  --glass: saturate(180%) blur(22px);
}
[data-theme="dark"] {
  --bg: #000000;                   /* iOS Dark true black */
  --surface: rgba(28, 28, 30, 0.88);
  --surface-solid: #1c1c1e;
  --surface-2: #2c2c2e;
  --text: #f2f2f7;
  --text-muted: #98989e;
  --border: rgba(84, 84, 88, 0.48);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.5), 0 20px 48px -16px rgba(0,0,0,.7);
}
* { font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans Thai', 'SF Pro Text', 'Segoe UI', sans-serif; }
body { background: var(--bg); color: var(--text); font-size: .925rem;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
::selection { background: rgba(10,132,255,.25); }

/* ---------- Layout ---------- */
.app-wrapper { display: flex; min-height: 100vh; }
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-w); transition: margin .3s cubic-bezier(.4,0,.2,1); }
.content { flex: 1; padding: 1.6rem clamp(1rem, 3vw, 2.4rem); }
.app-footer { padding: 1rem 2rem; font-size: .76rem; color: var(--text-muted); text-align: center; }

/* ---------- Sidebar : frosted light glass ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1040;
  background: var(--surface); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.sidebar-brand { display: flex; gap: .85rem; align-items: center; padding: 1.5rem 1.4rem 1.1rem; }
.brand-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--primary-grad); color: #fff; font-size: 1.3rem;
  box-shadow: 0 8px 20px -6px rgba(10,132,255,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.brand-text strong { display: block; color: var(--text); font-size: 1.04rem; line-height: 1.2; letter-spacing: -.02em; }
.brand-text small { font-size: .68rem; color: var(--text-muted); }
.sidebar-nav { padding: .4rem .9rem 1.6rem; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 0; }
.nav-section { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin: 1.25rem .6rem .45rem; }
.nav-item { display: flex; align-items: center; gap: .8rem; padding: .66rem .95rem; border-radius: 12px;
  color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 500; margin-bottom: 3px;
  transition: background .18s, color .18s, transform .12s; }
.nav-item i { width: 22px; text-align: center; color: var(--primary); font-size: .95rem; }
.nav-item:hover { background: rgba(120,120,128,.12); color: var(--text); }
.nav-item:active { transform: scale(.98); }
.nav-item.active { background: var(--primary-grad); color: #fff;
  box-shadow: 0 8px 18px -6px rgba(10,132,255,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.nav-item.active i { color: #fff; }
.sidebar-backdrop { display: none; }

/* ---------- Topbar : frosted ---------- */
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .8rem;
  padding: .75rem clamp(1rem, 3vw, 2.4rem);
  background: var(--surface); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--border); }
.topbar-title { font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; }
.btn-icon { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(120,120,128,.14);
  color: var(--text); display: grid; place-items: center; transition: all .18s; }
.btn-icon:hover { background: rgba(120,120,128,.24); }
.btn-icon:active { transform: scale(.92); }
.user-chip { display: flex; align-items: center; gap: .6rem; border: none; background: rgba(120,120,128,.14);
  border-radius: 999px; padding: .28rem .9rem .28rem .28rem; color: var(--text); font-weight: 600; font-size: .85rem;
  transition: background .18s; }
.user-chip:hover { background: rgba(120,120,128,.24); }
.user-avatar { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-grad); color: #fff; font-size: .85rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- Cards : soft elevated ---------- */
.card { border: none; border-radius: var(--radius); background: var(--surface-solid);
  box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s; }
.card:hover { box-shadow: var(--shadow-lift); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 700;
  padding: 1.05rem 1.35rem; color: var(--text); letter-spacing: -.01em;
  border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-body { color: var(--text); padding: 1.25rem 1.35rem; }
.stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; }
.stat-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.35rem; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.stat-label { font-size: .78rem; color: var(--text-muted); font-weight: 500; }

/* ---------- Buttons : iOS pill ---------- */
.btn { border-radius: 12px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .12s, filter .18s, box-shadow .18s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary-grad); border: none;
  box-shadow: 0 6px 16px -6px rgba(10,132,255,.55), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary:hover { filter: brightness(1.07); background: var(--primary-grad); }
.btn-lg { border-radius: 14px; }
.btn-sm { border-radius: 10px; }
.btn-light { background: rgba(120,120,128,.14); border: none; color: var(--text); }
.btn-light:hover { background: rgba(120,120,128,.24); color: var(--text); }
.btn-outline-primary { color: var(--primary); border-color: rgba(10,132,255,.4); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-outline-secondary { color: var(--text-muted); border-color: var(--border); }
.btn-outline-secondary:hover { background: rgba(120,120,128,.16); color: var(--text); border-color: var(--border); }

/* ---------- Forms : iOS inputs ---------- */
.form-control, .form-select { background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: 12px; padding: .55rem .9rem; transition: all .18s; }
.form-control:focus, .form-select:focus { border-color: var(--primary); background: var(--surface-solid);
  color: var(--text); box-shadow: 0 0 0 4px rgba(10,132,255,.15); }
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text); font-weight: 600; font-size: .84rem; margin-bottom: .35rem; }
.form-check-input { border-radius: 6px; border-color: var(--border); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(10,132,255,.15); }

/* ---------- Tables ---------- */
.table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); }
.table thead th { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); border-color: var(--border); padding: .7rem .75rem; }
.table td { border-color: var(--border); vertical-align: middle; padding: .8rem .75rem; }
.table-hover tbody tr:hover { background: rgba(120,120,128,.07); --bs-table-hover-bg: rgba(120,120,128,.07); }

/* ---------- Modal / Dropdown : glass ---------- */
.modal-content { background: var(--surface); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  color: var(--text); border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-backdrop.show { opacity: .35; backdrop-filter: blur(4px); }
.dropdown-menu { background: var(--surface); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lift); padding: .4rem; }
.dropdown-item { color: var(--text); border-radius: 10px; padding: .5rem .8rem; font-weight: 500; }
.dropdown-item:hover { background: rgba(120,120,128,.14); color: var(--text); }
.dropdown-divider { border-color: var(--border); }

/* ---------- Badges / Pagination / Alerts ---------- */
.badge { font-weight: 600; border-radius: 8px; padding: .38em .65em; letter-spacing: 0; }
.page-link { border-radius: 10px !important; margin: 0 2px; border: none; color: var(--text);
  background: transparent; font-weight: 500; }
.page-link:hover { background: rgba(120,120,128,.14); color: var(--text); }
.page-item.active .page-link { background: var(--primary); color: #fff; }
.alert { border: none; border-radius: var(--radius-sm); }
.progress { border-radius: 999px; height: 12px; background: rgba(120,120,128,.16); overflow: hidden; }
.progress-bar { border-radius: 999px; }

/* ---------- Auth page ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(1200px 800px at 15% -10%, #5e5ce6 0%, transparent 55%),
              radial-gradient(1000px 700px at 110% 30%, #0a84ff 0%, transparent 50%),
              radial-gradient(900px 900px at 50% 120%, #bf5af2 0%, transparent 55%),
              #0b0b1e; }
.auth-card { display: flex; width: 100%; max-width: 880px; background: rgba(255,255,255,.94);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 32px 80px -20px rgba(0,0,0,.55); animation: fadeUp .55s cubic-bezier(.2,.8,.2,1); }
.auth-visual { flex: 1; background: linear-gradient(165deg, rgba(10,132,255,.95), rgba(94,92,230,.95));
  color: #fff; display: grid; place-items: center; padding: 3rem 2rem; }
.auth-form { flex: 1; padding: 3rem 2.6rem; }
.auth-form .form-control { background: #f2f2f7; }
@media (max-width: 767px) { .auth-visual { display: none; } .auth-form { padding: 2.25rem 1.75rem; } }

/* ---------- Template editor ---------- */
.cert-canvas { position: relative; user-select: none; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: repeating-conic-gradient(#e5e5ea 0% 25%, #f7f7fa 0% 50%) 50%/24px 24px; }
.cert-canvas img.bg { display: block; width: 100%; height: auto; pointer-events: none; }
.cert-field { position: absolute; transform: translateX(-50%); cursor: grab; padding: 2px 6px;
  border-radius: 8px; border: 1.5px dashed transparent; white-space: nowrap; line-height: 1.25; }
.cert-field:hover { border-color: rgba(10,132,255,.6); background: rgba(10,132,255,.10); }
.cert-field.selected { border-color: var(--primary); background: rgba(10,132,255,.16); cursor: grabbing; }
.cert-field .qr-box { display: grid; place-items: center; background: rgba(255,255,255,.85);
  border: 1.5px solid #aeaeb2; border-radius: 8px; color: #48484a; }

/* ---------- Motion ---------- */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, rgba(120,120,128,.18) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .45s cubic-bezier(.2,.8,.2,1); }
.text-muted { color: var(--text-muted) !important; }

/* ---------- DataTables tweaks ---------- */
div.dt-container .dt-search input, div.dt-container .dt-length select {
  background: var(--surface-2); border: 1px solid transparent; border-radius: 10px;
  color: var(--text); padding: .4rem .7rem; }
div.dt-container .dt-search input:focus { border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 4px rgba(10,132,255,.15); }
div.dt-container .dt-info { color: var(--text-muted); font-size: .8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lift); }
  .sidebar.show { transform: none; }
  .main-area { margin-left: 0; }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); backdrop-filter: blur(3px); z-index: 1035; }
}
@media print {
  .sidebar, .topbar, .app-footer { display: none !important; }
  .main-area { margin: 0; }
}