:root {
  --brand: #1807E6;
  --brand-bright: #5b4dff;
  --brand-glow: rgba(91, 77, 255, .35);
  --bg: #0b0b0f;
  --surface: #14141b;
  --surface-2: #1c1c26;
  --border: #2a2a36;
  --text: #e9e9ee;
  --text-dim: #9a9aa8;
  --ok: #16b981;
  --warn: #f5b301;
  --danger: #ef4444;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-bright); text-decoration: none; }
a:hover { color: #8a7fff; }

.auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #000000 0%, #05031f 45%, var(--brand) 100%);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(15, 15, 24, .72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.auth-card h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  text-align: center;
}

.auth-card .sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 28px;
}

.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--brand-bright), var(--brand));
  box-shadow: 0 8px 30px var(--brand-glow);
  font-size: 26px;
  color: #fff;
}

.form-label { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }

.form-control, .form-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 13px;
}
.form-control:focus, .form-select:focus {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.form-control::placeholder { color: #6b6b78; }

.btn-brand {
  background: linear-gradient(145deg, var(--brand-bright), var(--brand));
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 500;
  width: 100%;
}
.btn-brand:hover { color: #fff; filter: brightness(1.08); }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 244px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  z-index: 1040;
  transition: transform .25s ease;
}

.sidebar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 18px;
  font-weight: 600;
}
.sidebar .logo .dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(145deg, var(--brand-bright), var(--brand));
  display: flex; align-items: center; justify-content: center; color: #fff;
}

.nav-link-side {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-dim);
  margin-bottom: 2px;
  font-size: 14px;
}
.nav-link-side:hover { background: var(--surface-2); color: var(--text); }
.nav-link-side.active { background: var(--brand); color: #fff; }
.nav-link-side i { font-size: 17px; width: 20px; text-align: center; }

.sidebar .nav-sep { color: #55556a; font-size: 11px; padding: 14px 12px 6px; letter-spacing: .5px; }

.main {
  flex: 1;
  margin-left: 244px;
  min-width: 0;
}

.topbar {
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.topbar .page-title { font-weight: 600; font-size: 16px; }
.topbar .burger { display: none; background: none; border: none; color: var(--text); font-size: 22px; }

.content { padding: 22px; }

.card-dark {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.badge-soft { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); font-weight: 500; }

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1035;
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .topbar .burger { display: block; }
  .overlay.show { display: block; }
}

html:has(body.public-page), body.public-page {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.public-page {
  position: fixed;
  inset: 0;
  width: 100%;
  margin: 0;
}
.public-bg {
  min-height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #000000 0%, #05031f 45%, var(--brand) 100%);
  overflow: hidden;
}
.public-card {
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 78px);
  overflow: hidden;
  background: rgba(15, 15, 24, .72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  padding: clamp(18px, 4vh, 32px) 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.public-card .item-img {
  width: 100%;
  height: clamp(130px, 26vh, 220px);
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: clamp(12px, 2.2vh, 20px);
}
.public-card .item-name { font-size: clamp(17px, 2.4vh, 20px); font-weight: 600;}
.public-card .notice {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: clamp(11px, 1.8vh, 16px);
  font-size: clamp(13px, 1.7vh, 14px);
  line-height: 1.65;
}
.public-card .company { color: #FDD017; font-weight: 600; }
.public-card .contact-line { margin-top: 12px; font-size: 15px; }
.public-card .not-found { font-size: 17px; color: var(--text-dim); padding: clamp(14px, 3vh, 30px) 0; }
.public-card .call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .12s, filter .15s;
}
.public-card .call-btn:hover { filter: brightness(1.12); }
.public-card .call-btn:active { transform: scale(.97); }
.public-footer {
  margin-top: 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  flex-shrink: 0;
}

.dropzone { position: relative; border: 1px dashed var(--border); border-radius: var(--radius); transition: border-color .15s, background .15s; }
.dropzone.drag-over { border-color: var(--brand-bright); background: var(--brand-glow); }
.dropzone .dz-hint { font-size: 11px; color: var(--text-dim); text-align: center; padding: 6px 4px 2px; }

.zoomable { cursor: zoom-in; }
.lb-overlay {
  position: fixed; inset: 0; z-index: 3000; display: none;
  background: rgba(0,0,0,.88); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 28px;
}
.lb-overlay.on { display: flex; }
.lb-inner { max-width: 92vw; max-height: 88vh; text-align: center; }
.lb-inner img {
  max-width: 92vw; max-height: 78vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #111;
}
.lb-cap { color: #e8e8ef; font-size: 14px; margin-top: 12px; }
.lb-close {
  position: absolute; top: 18px; right: 22px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer;
}
.lb-close:hover { background: rgba(255,255,255,.18); }
.thumb-wrap { position: relative; }
.zoom-btn {
  position: absolute; right: 8px; top: 8px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55); color: #fff; font-size: 13px; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.asset-card:hover .zoom-btn { opacity: 1; }
@media (hover: none) { .zoom-btn { opacity: 1; } }

.swal2-popup {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 16px !important;
}
.swal2-title, .swal2-html-container, .swal2-content { color: var(--text) !important; }
.swal2-html-container { font-size: 14px !important; }
.swal2-icon.swal2-question, .swal2-icon.swal2-info { color: var(--brand-bright) !important; border-color: var(--brand-bright) !important; }

.swal2-input, .swal2-textarea, .swal2-select, .swal2-file,
.swal2-popup select, .swal2-popup input[type="text"],
.swal2-popup input[type="number"], .swal2-popup input[type="date"],
.swal2-popup input[type="password"], .swal2-popup textarea {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.swal2-input::placeholder, .swal2-textarea::placeholder { color: #6b6b78 !important; }
.swal2-input:focus, .swal2-select:focus, .swal2-popup select:focus, .swal2-textarea:focus {
  border-color: var(--brand-bright) !important;
  box-shadow: 0 0 0 3px var(--brand-glow) !important;
}

.swal2-popup select option,
.swal2-select option,
select.swal2-input option {
  background: #1a1a24 !important;
  color: #e8e8ef !important;
}

.swal2-popup select,
.swal2-select,
select.swal2-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239a9aa8'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 34px !important;
  cursor: pointer;
}

.swal2-radio, .swal2-checkbox { background: transparent !important; color: var(--text) !important; }
.swal2-radio label, .swal2-checkbox label { color: var(--text) !important; margin: 0 10px; }
.swal2-validation-message { background: rgba(239,68,68,.12) !important; color: var(--danger) !important; }

.swal2-styled.swal2-confirm { background: var(--brand) !important; border-radius: 10px !important; }
.swal2-styled.swal2-cancel { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--brand-glow) !important; }
.swal2-close { color: var(--text-dim) !important; }
.swal2-close:hover { color: var(--text) !important; }
.swal2-timer-progress-bar { background: var(--brand-bright) !important; }
/* พื้นดำ backdrop เฉพาะ modal เท่านั้น — กัน toast โดนแถบดำทางขวา
   หมายเหตุ: swal2-toast-shown อยู่ที่ <body> ไม่ใช่ที่ container จึงต้อง scope ด้วย body */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(0,0,0,.72) !important; }
body.swal2-toast-shown .swal2-container { background: transparent !important; }
body.swal2-toast-shown .swal2-toast {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
  border-radius: 12px !important;
}

.swal2-popup.swal2-toast { background: var(--surface-2) !important; border: 1px solid var(--border); }
.swal2-popup.swal2-toast .swal2-title { color: var(--text) !important; font-size: 14px !important; }

.card-header-logo{ display:flex; justify-content:center; align-items:center; margin-bottom:20px; }
.card-header-logo img{ max-width:180px; width:90%; height:auto; display:block; }

.contact-line{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.line-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 18px; border-radius:12px; background:#06C755; color:#fff; font-weight:600; text-decoration:none; transition:.2s; }
.line-btn:hover{ background:#05b64d; color:#fff; }
.line-btn i{ font-size:1.2rem; }

.asset-id{ margin-top:0; font-size:.6rem; color:#8b8f97; font-weight:500; line-height:1.2; letter-spacing:.4px; margin-bottom: clamp(10px, 1.8vh, 18px); }

.card-header-logo svg { width: 220px; height: auto; display: block; margin: 0 auto; }
.card-header-logo { color: #ffffff; }