/* โหมดมืด - ลดแสงจอ ลดอาการสายตาล้า */
/* ใช้เมื่อ html มี class theme-dark */

html.theme-dark {
  color-scheme: dark;
}

html.theme-dark body,
.theme-dark body {
  background-color: #1a1b26 !important;
  color: #a9b1d6 !important;
}

html.theme-dark .navbar.is-primary,
.theme-dark .navbar.is-primary {
  background-color: #16161e !important;
  border-bottom: 1px solid #363b54;
}

html.theme-dark .navbar-item,
html.theme-dark .navbar-link,
.theme-dark .navbar-item,
.theme-dark .navbar-link {
  color: #c0caf5 !important;
}

html.theme-dark .navbar-link:hover,
.theme-dark .navbar-link:hover {
  background-color: #24283b !important;
  color: #7aa2f7 !important;
}

html.theme-dark .navbar-dropdown,
.theme-dark .navbar-dropdown {
  background-color: #16161e !important;
  border-color: #363b54;
}

html.theme-dark .navbar-dropdown .navbar-item,
.theme-dark .navbar-dropdown .navbar-item {
  color: #c0caf5 !important;
}

html.theme-dark .navbar-dropdown .navbar-item:hover,
.theme-dark .navbar-dropdown .navbar-item:hover {
  background-color: #24283b !important;
  color: #7aa2f7 !important;
}

html.theme-dark .box,
.theme-dark .box {
  background-color: #24283b !important;
  color: #c0caf5 !important;
  border-color: #363b54 !important;
}

html.theme-dark .card,
.theme-dark .card {
  background-color: #24283b !important;
  border-color: #363b54 !important;
}

html.theme-dark .card-header,
.theme-dark .card-header {
  background-color: #1f2335 !important;
  border-color: #363b54 !important;
  color: #c0caf5 !important;
}

html.theme-dark .card-content,
.theme-dark .card-content {
  color: #a9b1d6 !important;
}

html.theme-dark .table,
.theme-dark .table {
  background-color: #24283b !important;
  color: #a9b1d6 !important;
}

html.theme-dark .table thead th,
.theme-dark .table thead th {
  background-color: #1f2335 !important;
  color: #c0caf5 !important;
  border-color: #363b54 !important;
}

html.theme-dark .table tbody td,
.theme-dark .table tbody td {
  border-color: #363b54 !important;
  color: #a9b1d6 !important;
}

html.theme-dark .table tbody tr:hover,
.theme-dark .table tbody tr:hover {
  background-color: #1f2335 !important;
}

html.theme-dark .table.is-striped tbody tr:not(.is-selected):nth-child(even),
.theme-dark .table.is-striped tbody tr:nth-child(even) {
  background-color: #1f2335 !important;
}

html.theme-dark .input,
html.theme-dark .textarea,
html.theme-dark .select select,
.theme-dark .input,
.theme-dark .textarea,
.theme-dark .select select {
  background-color: #1f2335 !important;
  border-color: #363b54 !important;
  color: #c0caf5 !important;
}

html.theme-dark .input::placeholder,
.theme-dark .input::placeholder {
  color: #565f89 !important;
}

html.theme-dark .notification,
.theme-dark .notification {
  background-color: #24283b !important;
  color: #a9b1d6 !important;
  border: 1px solid #363b54 !important;
}

html.theme-dark .title,
html.theme-dark .subtitle,
.theme-dark .title,
.theme-dark .label {
  color: #c0caf5 !important;
}

html.theme-dark .content p,
html.theme-dark .content li,
.theme-dark .content p,
.theme-dark .content li {
  color: #a9b1d6 !important;
}

html.theme-dark .section,
.theme-dark .section {
  background-color: transparent !important;
}

html.theme-dark .button.is-light,
.theme-dark .button.is-light {
  background-color: #363b54 !important;
  color: #c0caf5 !important;
  border-color: #414868 !important;
}

html.theme-dark .button.is-light:hover,
.theme-dark .button.is-light:hover {
  background-color: #414868 !important;
  color: #c0caf5 !important;
}

/* ปุ่ม theme toggle ใน navbar */
#themeToggle {
  border: none;
  background: transparent !important;
  color: inherit !important;
  padding: 0.4rem 0.6rem;
}
#themeToggle:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #7aa2f7 !important;
}
html.theme-dark #themeToggle,
.theme-dark #themeToggle {
  color: #c0caf5 !important;
}