/* ── One Vela · Liquid Glass ────────────────────────────────────────
   ชั้นตกแต่งที่วางทับธีมเดิม ไม่ทับตัวแปรสีของ onevela-design.css
   โหลดต่อท้ายเสมอ:  design.css → luxe.css → glass.css
   ทำงานได้ทั้งโหมดสว่างและมืด
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ผิวแก้ว */
  --g-bg:        rgba(255, 253, 250, .62);
  --g-bg-strong: rgba(255, 253, 250, .82);
  --g-bg-dim:    rgba(255, 253, 250, .40);
  --g-line:      rgba(255, 255, 255, .70);   /* ขอบบนที่รับแสง */
  --g-edge:      rgba(26, 22, 19, .10);      /* ขอบนอก */
  --g-blur:      18px;
  --g-sat:       160%;

  /* เงาไล่ระดับ — ใกล้พื้นเงาแน่น ไกลออกไปเงาฟุ้ง */
  --g-sh-1: 0 1px 2px rgba(26,22,19,.05), 0 2px 8px rgba(26,22,19,.045);
  --g-sh-2: 0 2px 4px rgba(26,22,19,.055), 0 8px 24px rgba(26,22,19,.07);
  --g-sh-3: 0 4px 8px rgba(26,22,19,.06), 0 18px 48px rgba(26,22,19,.10);

  --g-r:    16px;
  --g-r-lg: 22px;
}

/* โหมดมืดต้องกดเลือกเองเท่านั้น (html[data-theme="dark"])
   เดิมผูกกับ prefers-color-scheme แล้วพัง — หน้าเว็บส่วนใหญ่ยังฝังพื้นการ์ดเป็นสีขาวตายตัว
   (เช่น .tile ในหน้าแอดมิน background:rgba(255,255,255,.68))
   พอสลับตัวหนังสือเป็นสีอ่อนตามระบบ ก็กลายเป็นขาวบนขาว อ่านไม่ออกทั้งหน้า
   จะเปิดอัตโนมัติได้ ต้องไล่เก็บพื้นที่ฝังสีตายตัวให้หมดทุกหน้าก่อน */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    --ink:     #EFE6D8;
    --ink-2:   #C6B8A6;
    --stone:   #938575;
    --paper:   #16120F;
    --paper-2: #1F1915;
    --cream:   #221B16;
    --sand:    #4A3D2C;
    --hair:    rgba(239,230,216,.13);
    --terracotta:   #CE9268;
    --terracotta-2: #B87A52;
    --good:  #8FB177;
    --amber: #D9A648;
    --bad:   #D98080;

    --g-bg:        rgba(38, 32, 27, .58);
    --g-bg-strong: rgba(38, 32, 27, .80);
    --g-bg-dim:    rgba(38, 32, 27, .38);
    --g-line:      rgba(255, 255, 255, .10);
    --g-edge:      rgba(0, 0, 0, .34);
    --g-sh-1: 0 1px 2px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.18);
    --g-sh-2: 0 2px 4px rgba(0,0,0,.26), 0 8px 24px rgba(0,0,0,.26);
    --g-sh-3: 0 4px 8px rgba(0,0,0,.28), 0 18px 48px rgba(0,0,0,.34);
  }
}
:root[data-theme="dark"] {
    /* ธีมเดิม (onevela-design.css) ไม่มีโหมดมืด · ต้องพลิกสีตัวอักษรให้ที่นี่
       ไม่งั้นตัวหนังสือสีเข้มจะจมหายไปกับพื้นมืด */
    --ink:     #EFE6D8;
    --ink-2:   #C6B8A6;
    --stone:   #938575;
    --paper:   #16120F;
    --paper-2: #1F1915;
    --cream:   #221B16;
    --sand:    #4A3D2C;
    --hair:    rgba(239,230,216,.13);
    --terracotta:   #CE9268;
    --terracotta-2: #B87A52;
    --good:  #8FB177;
    --amber: #D9A648;
    --bad:   #D98080;

    --g-bg:        rgba(38, 32, 27, .58);
    --g-bg-strong: rgba(38, 32, 27, .80);
    --g-bg-dim:    rgba(38, 32, 27, .38);
    --g-line:      rgba(255, 255, 255, .10);
    --g-edge:      rgba(0, 0, 0, .34);
    --g-sh-1: 0 1px 2px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.18);
    --g-sh-2: 0 2px 4px rgba(0,0,0,.26), 0 8px 24px rgba(0,0,0,.26);
    --g-sh-3: 0 4px 8px rgba(0,0,0,.28), 0 18px 48px rgba(0,0,0,.34);
}


/* ── ผิวแก้วพื้นฐาน ───────────────────────────────────────────── */
.glass,
.glass-card,
.glass-bar {
  background: var(--g-bg);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r);
  box-shadow: var(--g-sh-2);
  position: relative;
}

/* เส้นแสงบนขอบบน — ตัวที่ทำให้ดู "เป็นแก้ว" ไม่ใช่แค่โปร่งใส */
.glass::before,
.glass-card::before,
.glass-bar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--g-line) 22%, var(--g-line) 78%, transparent);
  pointer-events: none;
}

.glass-card { border-radius: var(--g-r-lg); padding: 20px 22px; }
.glass-card:hover { box-shadow: var(--g-sh-3); }
.glass-card, .glass-bar { transition: box-shadow .22s ease, transform .22s ease; }

/* แถบบนสุด — ลอยติดจอ */
.glass-bar {
  position: sticky; top: 0; z-index: 40;
  border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  background: var(--g-bg-strong);
  box-shadow: var(--g-sh-1);
}

/* เบา/หนา */
.glass-dim    { background: var(--g-bg-dim); }
.glass-strong { background: var(--g-bg-strong); }

/* ── ปุ่ม ─────────────────────────────────────────────────────── */
.g-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--g-edge);
  background: var(--g-bg-strong);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  font: 600 13.5px/1 Sarabun, system-ui, sans-serif;
  color: var(--ink); cursor: pointer;
  box-shadow: var(--g-sh-1);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.g-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--g-sh-2); }
.g-btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--g-sh-1); }
.g-btn:disabled { opacity: .45; cursor: not-allowed; }

.g-btn.primary {
  background: linear-gradient(180deg, var(--terracotta), var(--terracotta-2));
  border-color: transparent; color: #fff;
  box-shadow: 0 1px 2px rgba(148,97,69,.28), 0 6px 18px rgba(148,97,69,.26);
}
.g-btn.primary:hover:not(:disabled) { box-shadow: 0 2px 4px rgba(148,97,69,.3), 0 12px 30px rgba(148,97,69,.32); }
.g-btn.ghost  { background: transparent; box-shadow: none; }
.g-btn.danger { color: var(--bad); border-color: rgba(142,58,58,.28); }
.g-btn.danger:hover:not(:disabled) { background: var(--bad); color: #fff; border-color: var(--bad); }

/* ── ชิป / ป้าย ───────────────────────────────────────────────── */
.g-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--g-edge); background: var(--g-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 12.5px Sarabun, sans-serif; color: var(--ink-2); cursor: pointer;
  transition: all .16s ease;
}
.g-chip:hover { border-color: var(--terracotta); color: var(--ink); }
.g-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.g-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 7px;
  font: 700 10.5px/1.6 ui-monospace, monospace; letter-spacing: .04em;
  background: rgba(180,122,94,.13); color: var(--terracotta-2);
}
.g-tag.good { background: rgba(94,122,78,.15);  color: var(--good); }
.g-tag.warn { background: rgba(194,123,63,.16); color: var(--amber); }
.g-tag.bad  { background: rgba(142,58,58,.13);  color: var(--bad); }

/* ── ช่องกรอก ─────────────────────────────────────────────────── */
.g-input {
  width: 100%; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--g-edge);
  background: var(--g-bg-strong);
  font: 400 14px Sarabun, sans-serif; color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.g-input:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3.5px rgba(180,122,94,.14);
}
.g-input::placeholder { color: var(--stone); }

/* ── ไอคอน ────────────────────────────────────────────────────── */
.ic { width: 20px; height: 20px; flex: none; vertical-align: -.22em; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 26px; height: 26px; }
.ic-xl { width: 34px; height: 34px; }

/* กรอบไอคอนแบบแก้ว — ใช้แทนอีโมจิตัวใหญ่ในหัวการ์ด */
.ic-badge {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--g-bg-strong);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-sh-1);
  color: var(--terracotta-2);
}
.ic-badge.good { color: var(--good); }
.ic-badge.warn { color: var(--amber); }
.ic-badge.bad  { color: var(--bad); }
.ic-badge.ink  { color: var(--ink); }

/* ไอคอนกรอบสีเต็ม — ใช้ในการ์ดเมนู แถบล่างมือถือ หัวข้อหมวด
   ห้ามใช้ในปุ่มเล็กหรือในตาราง กรอบสีทึบจะแย่งสายตาข้อความ */
.ic-c    { width: 40px; height: 40px; flex: none; display: block; }
.ic-c-sm { width: 30px; height: 30px; }
.ic-c-lg { width: 52px; height: 52px; }

/* การ์ดเมนูแบบมีแถบสี — ตั้ง --c เป็นสีของไอคอนนั้น */
.m-card {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 17px; border-radius: 15px; text-decoration: none; color: inherit;
  border: 1px solid var(--g-edge);
  border-left: 3px solid var(--c, var(--terracotta));
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--terracotta)) 9%, transparent), transparent 42%), var(--g-bg);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--g-sh-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.m-card:hover { transform: translateY(-2px); box-shadow: var(--g-sh-2); }
.m-card .t { font: 700 15.5px Sarabun, sans-serif; margin-bottom: 2px; }
.m-card .s { font-size: 12px; color: var(--stone); line-height: 1.55; }
/* เบราว์เซอร์ที่ไม่รองรับ color-mix ยังได้พื้นปกติ ไม่พัง */
@supports not (background: color-mix(in srgb, red 9%, transparent)) {
  .m-card { background: var(--g-bg); }
}

/* จุดสถานะ — แทน 🔴🟠🔵⚪ */
.g-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--stone); vertical-align:.05em; }
.g-dot.good { background: var(--good); }
.g-dot.warn { background: var(--amber); }
.g-dot.bad  { background: var(--bad); }
.g-dot.live { background: var(--good); box-shadow: 0 0 0 0 rgba(94,122,78,.55); animation: gpulse 2s infinite; }
@keyframes gpulse { 70% { box-shadow: 0 0 0 7px rgba(94,122,78,0); } 100% { box-shadow: 0 0 0 0 rgba(94,122,78,0); } }

/* ── ตาราง ────────────────────────────────────────────────────── */
.g-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--g-bg); border: 1px solid var(--g-edge);
  border-radius: var(--g-r); overflow: hidden;
  -webkit-backdrop-filter: blur(var(--g-blur)); backdrop-filter: blur(var(--g-blur));
  box-shadow: var(--g-sh-1);
}
.g-table thead th {
  text-align: left; padding: 12px 14px;
  background: rgba(26,22,19,.035);
  font: 700 10.5px ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase;
  color: var(--stone); border-bottom: 1px solid var(--g-edge);
}
.g-table td { padding: 12px 14px; border-bottom: 1px solid rgba(26,22,19,.055); font-size: 13.5px; }
.g-table tbody tr:last-child td { border-bottom: none; }
.g-table tbody tr { transition: background .14s ease; }
.g-table tbody tr:hover { background: rgba(180,122,94,.055); }

/* ── ตัวเลขเด่น ───────────────────────────────────────────────── */
.g-stat .k {
  font: 700 10.5px ui-monospace, monospace; letter-spacing: .09em;
  text-transform: uppercase; color: var(--stone);
}
.g-stat .v {
  font: 700 30px/1.15 Sarabun, sans-serif; margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.g-stat .v.good { color: var(--good); }
.g-stat .v.warn { color: var(--amber); }
.g-stat .v.bad  { color: var(--bad); }
.g-stat .s { font-size: 12px; color: var(--stone); margin-top: 2px; }

/* ── เค้าโครง ─────────────────────────────────────────────────── */
.g-grid { display: grid; gap: 14px; }
.g-grid.c2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g-grid.c3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g-grid.c4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ── เครื่องช่วยการเข้าถึง ────────────────────────────────────── */
/* เบราว์เซอร์เก่าที่ไม่รองรับ backdrop-filter ต้องยังอ่านออก ไม่ใช่กลายเป็นโปร่งจนจาง */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-card, .glass-bar, .g-btn, .g-chip, .g-table, .g-input, .ic-badge {
    background: var(--cream, #faf6ee);
  }
}
/* เคารพการตั้งค่าลดการเคลื่อนไหวของผู้ใช้ */
@media (prefers-reduced-motion: reduce) {
  .glass-card, .g-btn, .g-chip, .g-table tbody tr { transition: none; }
  .g-dot.live { animation: none; }
}


/* โลโก้เป็น PNG สีดำ · พื้นมืดจะจมหายไป พลิกเป็นขาวให้ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img[src*="logo-"] { filter: invert(1) brightness(1.9); }
}
:root[data-theme="dark"] img[src*="logo-"] { filter: invert(1) brightness(1.9); }