/* ============================================================================
   RS-TH01 — SmartHerb System Theme Foundation
   Central semantic tokens and Bootstrap/component normalization for Admin,
   Public and Auth. Page-specific CSS may extend these tokens but should not
   redefine the storage or runtime theme contract.
============================================================================ */

:root {
  color-scheme: light dark;
  --theme-font-sans: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --theme-brand-50: #edf9f3;
  --theme-brand-100: #d4f1e2;
  --theme-brand-200: #aae2c5;
  --theme-brand-300: #73cba2;
  --theme-brand-400: #3fad7d;
  --theme-brand-500: #198b60;
  --theme-brand-600: #137a54;
  --theme-brand-700: #0f6144;
  --theme-brand-800: #104d39;
  --theme-brand-900: #0d3f30;
  --theme-orange-500: #d9680d;
  --theme-orange-600: #b94e08;
  --theme-radius-xs: .45rem;
  --theme-radius-sm: .65rem;
  --theme-radius-md: .9rem;
  --theme-radius-lg: 1.2rem;
  --theme-radius-xl: 1.55rem;
  --theme-shadow-xs: 0 1px 2px rgba(15, 35, 26, .05);
  --theme-shadow-sm: 0 8px 22px rgba(15, 35, 26, .08);
  --theme-shadow-md: 0 18px 44px rgba(15, 35, 26, .12);
  --theme-focus-ring: 0 0 0 .25rem rgba(19, 122, 84, .20);
  --theme-motion-fast: 140ms;
  --theme-motion-base: 220ms;
}

html[data-theme="light"] {
  --theme-canvas: #f4f8f5;
  --theme-canvas-subtle: #eef4f0;
  --theme-surface: #ffffff;
  --theme-surface-raised: #ffffff;
  --theme-surface-muted: #f6f9f7;
  --theme-surface-strong: #e8f1ec;
  --theme-text: #13251d;
  --theme-text-soft: #3f564a;
  --theme-muted: #596f63;
  --theme-placeholder: #62796d;
  --theme-border: #d7e2dc;
  --theme-border-strong: #b9cbc1;
  --theme-brand: #137a54;
  --theme-brand-hover: #0f6144;
  --theme-brand-contrast: #ffffff;
  --theme-accent: #b94e08;
  --theme-accent-soft: #fff0e4;
  --theme-link: #0f6848;
  --theme-link-hover: #0b4f38;
  --theme-info: #136e8a;
  --theme-success: #157347;
  --theme-warning: #8a5a00;
  --theme-danger: #b42318;
  --theme-selection: rgba(19, 122, 84, .20);
  --theme-overlay: rgba(7, 17, 13, .52);
  --theme-table-stripe: rgba(19, 122, 84, .035);
  --theme-table-hover: rgba(19, 122, 84, .075);
  --theme-code-bg: #edf4f0;
  --theme-code-text: #244c3a;
}

html[data-theme="dark"] {
  --theme-canvas: #07110d;
  --theme-canvas-subtle: #0b1812;
  --theme-surface: #102019;
  --theme-surface-raised: #14271f;
  --theme-surface-muted: #172c23;
  --theme-surface-strong: #20382d;
  --theme-text: #ffffff;
  --theme-text-soft: #ffffff;
  --theme-muted: #ffffff;
  --theme-placeholder: #ffffff;
  --theme-border: #304a3e;
  --theme-border-strong: #49685a;
  --theme-brand: #58dfa0;
  --theme-brand-hover: #83ecb7;
  --theme-brand-contrast: #062116;
  --theme-accent: #ffb066;
  --theme-accent-soft: #3b2817;
  --theme-link: #ffffff;
  --theme-link-hover: #ffffff;
  --theme-info: #75d7ef;
  --theme-success: #6de5a8;
  --theme-warning: #ffd37a;
  --theme-danger: #ff9b91;
  --theme-selection: rgba(88, 223, 160, .28);
  --theme-overlay: rgba(0, 0, 0, .72);
  --theme-table-stripe: rgba(255, 255, 255, .025);
  --theme-table-hover: rgba(88, 223, 160, .085);
  --theme-code-bg: #0a1711;
  --theme-code-text: #b9f4d5;
  --theme-shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
  --theme-shadow-sm: 0 10px 28px rgba(0, 0, 0, .24);
  --theme-shadow-md: 0 22px 54px rgba(0, 0, 0, .34);
  --theme-focus-ring: 0 0 0 .25rem rgba(88, 223, 160, .25);
}

html[data-theme] {
  --brand: var(--theme-brand);
  --brand-700: var(--theme-brand-hover);
  --bg: var(--theme-canvas);
  --surface: var(--theme-surface);
  --border: var(--theme-border);
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --app-surface: var(--theme-surface);
  --app-surface-2: var(--theme-surface-muted);
  --app-surface-3: var(--theme-surface-strong);
  --app-border: var(--theme-border);
  --app-border-strong: var(--theme-border-strong);
  --app-ink: var(--theme-text);
  --app-ink-soft: var(--theme-text-soft);
  --app-muted: var(--theme-muted);

  --bs-body-font-family: var(--theme-font-sans);
  --bs-body-color: var(--theme-text);
  --bs-body-bg: var(--theme-canvas);
  --bs-emphasis-color: var(--theme-text);
  --bs-secondary-color: var(--theme-muted);
  --bs-secondary-bg: var(--theme-surface-muted);
  --bs-tertiary-color: var(--theme-text-soft);
  --bs-tertiary-bg: var(--theme-surface-strong);
  --bs-border-color: var(--theme-border);
  --bs-border-color-translucent: color-mix(in srgb, var(--theme-border) 72%, transparent);
  --bs-link-color: var(--theme-link);
  --bs-link-hover-color: var(--theme-link-hover);
  --bs-focus-ring-color: color-mix(in srgb, var(--theme-brand) 28%, transparent);
  --bs-primary: var(--theme-brand);
  --bs-primary-rgb: 19, 122, 84;
  --bs-success: var(--theme-success);
  --bs-warning: var(--theme-warning);
  --bs-danger: var(--theme-danger);
  --bs-info: var(--theme-info);
}

html[data-theme="dark"] {
  --bs-primary-rgb: 88, 223, 160;
}

html,
body {
  background-color: var(--theme-canvas);
  color: var(--theme-text);
}

body {
  font-family: var(--theme-font-sans);
  accent-color: var(--theme-brand);
}

::selection {
  background: var(--theme-selection);
  color: var(--theme-text);
}

:where(a) {
  color: var(--theme-link);
  text-underline-offset: .18em;
}

:where(a:hover) {
  color: var(--theme-link-hover);
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-brand) 52%, transparent);
  outline-offset: 2px;
}

.text-body { color: var(--theme-text) !important; }
.text-secondary,
.text-muted { color: var(--theme-muted) !important; }
.bg-body { background-color: var(--theme-canvas) !important; }
.bg-body-secondary,
.bg-light { background-color: var(--theme-surface-muted) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--theme-border) !important; }

/* Shared surfaces */
.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.popover,
.toast,
.list-group-item,
.accordion-item {
  color: var(--theme-text);
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

.card {
  box-shadow: var(--theme-shadow-xs);
}

.card:hover {
  box-shadow: var(--theme-shadow-sm);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.offcanvas-header,
.accordion-button,
.dropdown-header {
  color: var(--theme-text);
  background-color: var(--theme-surface-muted);
  border-color: var(--theme-border);
}

.modal-backdrop.show { opacity: .62; }
html[data-theme="dark"] .modal-backdrop.show { opacity: .78; }

.dropdown-item,
.list-group-item-action,
.nav-link {
  color: var(--theme-text-soft);
}

.dropdown-item:hover,
.dropdown-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--theme-text);
  background-color: var(--theme-surface-strong);
}

.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active {
  color: var(--theme-brand-contrast);
  background-color: var(--theme-brand);
  border-color: var(--theme-brand);
}

/* Forms: labels, placeholders, file inputs and validation */
.form-label,
.col-form-label,
.form-check-label,
fieldset > legend {
  color: var(--theme-text-soft);
}

.form-text,
.valid-feedback,
.invalid-feedback {
  color: var(--theme-muted);
}

.form-control,
.form-select,
.input-group-text,
.form-control-color,
.form-control[type="file"] {
  color: var(--theme-text);
  background-color: var(--theme-surface);
  border-color: var(--theme-border-strong);
}

.form-control::placeholder,
textarea.form-control::placeholder,
input::placeholder {
  color: var(--theme-placeholder) !important;
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn-check:focus + .btn {
  color: var(--theme-text);
  background-color: var(--theme-surface);
  border-color: var(--theme-brand);
  box-shadow: var(--theme-focus-ring);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  color: var(--theme-muted);
  background-color: var(--theme-surface-strong);
  border-color: var(--theme-border);
  opacity: 1;
}

.form-select option {
  color: var(--theme-text);
  background: var(--theme-surface);
}

.form-control[type="file"]::file-selector-button {
  color: var(--theme-text-soft);
  background: var(--theme-surface-strong);
  border-color: var(--theme-border);
}

.form-control[type="file"]:hover::file-selector-button {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-brand) 12%, var(--theme-surface));
}

.form-check-input {
  background-color: var(--theme-surface);
  border-color: var(--theme-border-strong);
}

.form-check-input:checked {
  background-color: var(--theme-brand);
  border-color: var(--theme-brand);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: var(--theme-danger);
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: var(--theme-success);
}

.invalid-feedback { color: var(--theme-danger); }
.valid-feedback { color: var(--theme-success); }

/* Buttons and interactive states */
.btn {
  --bs-btn-focus-box-shadow: var(--theme-focus-ring);
  font-weight: 600;
}

.btn-brand,
.btn-primary,
.btn-success {
  color: var(--theme-brand-contrast);
  background-color: var(--theme-brand);
  border-color: var(--theme-brand);
}

.btn-brand:hover,
.btn-brand:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  color: var(--theme-brand-contrast);
  background-color: var(--theme-brand-hover);
  border-color: var(--theme-brand-hover);
}

.btn-outline-brand,
.btn-outline-primary,
.btn-outline-success {
  color: var(--theme-brand);
  border-color: color-mix(in srgb, var(--theme-brand) 78%, var(--theme-border));
  background-color: transparent;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {
  color: var(--theme-brand-contrast);
  background-color: var(--theme-brand);
  border-color: var(--theme-brand);
}

.btn-outline-secondary {
  color: var(--theme-text-soft);
  border-color: var(--theme-border-strong);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--theme-text);
  background-color: var(--theme-surface-strong);
  border-color: var(--theme-brand);
}

.btn-danger {
  color: #ffffff;
  background-color: #b42318;
  border-color: #b42318;
}
.btn-danger:hover,
.btn-danger:focus { color:#ffffff; background-color:#8f1c14; border-color:#8f1c14; }
.btn-outline-danger { color:var(--theme-danger); border-color:color-mix(in srgb,var(--theme-danger) 76%,var(--theme-border)); }
.btn-outline-danger:hover,
.btn-outline-danger:focus { background-color:var(--theme-danger); border-color:var(--theme-danger); }
html[data-theme="light"] .btn-outline-danger:hover,
html[data-theme="light"] .btn-outline-danger:focus { color:#ffffff; }
html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-outline-danger:focus { color:#2b0906; }

.btn-warning { color:#2b1a00; background-color:#ffd37a; border-color:#ffd37a; }
.btn-warning:hover,
.btn-warning:focus { color:#241600; background-color:#f0be55; border-color:#f0be55; }
.btn-outline-warning { color:var(--theme-warning); border-color:color-mix(in srgb,var(--theme-warning) 76%,var(--theme-border)); }
.btn-outline-warning:hover,
.btn-outline-warning:focus { color:#2b1a00; background-color:#ffd37a; border-color:#ffd37a; }

.btn-info { color:#06222b; background-color:#75d7ef; border-color:#75d7ef; }
.btn-info:hover,
.btn-info:focus { color:#041b22; background-color:#52c6e3; border-color:#52c6e3; }
.btn-outline-info { color:var(--theme-info); border-color:color-mix(in srgb,var(--theme-info) 76%,var(--theme-border)); }
.btn-outline-info:hover,
.btn-outline-info:focus { color:#06222b; background-color:#75d7ef; border-color:#75d7ef; }

.btn-close {
  filter: none;
  opacity: .72;
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
  opacity: .88;
}

/* Tables and DataTables */
.table {
  --bs-table-color: var(--theme-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--theme-border);
  --bs-table-striped-bg: var(--theme-table-stripe);
  --bs-table-striped-color: var(--theme-text);
  --bs-table-hover-bg: var(--theme-table-hover);
  --bs-table-hover-color: var(--theme-text);
  color: var(--theme-text);
}

.table > :not(caption) > * > * {
  color: inherit;
  border-color: var(--theme-border);
}

.table thead th,
.table-light > :not(caption) > * > * {
  color: var(--theme-text-soft);
  background-color: var(--theme-surface-muted);
  border-color: var(--theme-border);
}

.table-responsive {
  border-color: var(--theme-border);
  scrollbar-color: var(--theme-border-strong) var(--theme-surface-muted);
}

.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter {
  color: var(--theme-muted) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  color: var(--theme-text) !important;
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border-strong) !important;
}

.page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--theme-text-soft) !important;
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

.page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--theme-text) !important;
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-brand) !important;
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: var(--theme-brand-contrast) !important;
  background: var(--theme-brand) !important;
  border-color: var(--theme-brand) !important;
}

/* Navigation, tabs and pills */
.nav-tabs { border-color: var(--theme-border); }
.nav-tabs .nav-link { color: var(--theme-muted); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--theme-text); border-color: var(--theme-border); }
.nav-tabs .nav-link.active {
  color: var(--theme-text);
  background-color: var(--theme-surface);
  border-color: var(--theme-border) var(--theme-border) var(--theme-surface);
}
.nav-pills .nav-link.active {
  color: var(--theme-brand-contrast);
  background-color: var(--theme-brand);
}

/* Alerts and status surfaces */
.alert {
  color: var(--theme-text);
  background: var(--theme-surface-muted);
  border-color: var(--theme-border);
}
.alert-success { color: var(--theme-success); background: color-mix(in srgb, var(--theme-success) 11%, var(--theme-surface)); }
.alert-warning { color: var(--theme-warning); background: color-mix(in srgb, var(--theme-warning) 12%, var(--theme-surface)); }
.alert-danger { color: var(--theme-danger); background: color-mix(in srgb, var(--theme-danger) 11%, var(--theme-surface)); }
.alert-info { color: var(--theme-info); background: color-mix(in srgb, var(--theme-info) 11%, var(--theme-surface)); }

.badge.text-bg-light,
.text-bg-light {
  color: var(--theme-text-soft) !important;
  background-color: var(--theme-surface-muted) !important;
}

.badge-soft-success { color: var(--theme-success); background: color-mix(in srgb, var(--theme-success) 13%, transparent); border-color: color-mix(in srgb, var(--theme-success) 35%, transparent); }
.badge-soft-warning { color: var(--theme-warning); background: color-mix(in srgb, var(--theme-warning) 13%, transparent); border-color: color-mix(in srgb, var(--theme-warning) 35%, transparent); }
.badge-soft-danger { color: var(--theme-danger); background: color-mix(in srgb, var(--theme-danger) 12%, transparent); border-color: color-mix(in srgb, var(--theme-danger) 35%, transparent); }
.badge-soft-secondary { color: var(--theme-text-soft); background: var(--theme-surface-strong); border-color: var(--theme-border); }

/* Miscellaneous components */
.accordion-button:not(.collapsed) {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-brand) 10%, var(--theme-surface));
  box-shadow: inset 0 calc(-1 * var(--bs-border-width)) 0 var(--theme-border);
}
.accordion-button::after { filter: none; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.8); }

.progress { background-color: var(--theme-surface-strong); }
.progress-bar { color: var(--theme-brand-contrast); background-color: var(--theme-brand); }

code,
kbd,
pre,
.debug-pre {
  color: var(--theme-code-text);
  background-color: var(--theme-code-bg);
  border-color: var(--theme-border);
}

hr { border-color: var(--theme-border); opacity: 1; }

/* Theme controls */
.admin-theme-toggle,
.public-theme-button,
.theme-switch,
[data-theme-toggle] {
  transition: color var(--theme-motion-fast) ease, background-color var(--theme-motion-fast) ease, border-color var(--theme-motion-fast) ease;
}

.admin-theme-toggle {
  min-width: 7rem;
  justify-content: center;
  gap: .4rem;
}

.admin-theme-toggle .theme-toggle-mode {
  color: var(--theme-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface) 88%, transparent);
  box-shadow: var(--theme-shadow-xs);
}

.theme-switch [data-theme-choice] {
  min-height: 2.35rem;
  padding: .42rem .72rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--theme-text-soft);
  background: transparent;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
}

.theme-switch [data-theme-choice]:hover,
.theme-switch [data-theme-choice]:focus-visible {
  color: var(--theme-text);
  background: var(--theme-surface-strong);
}

.theme-switch [data-theme-choice].active,
.theme-switch [data-theme-choice].is-active {
  color: var(--theme-brand-contrast);
  background: var(--theme-brand);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--theme-brand) 24%, transparent);
}

/* Scope-level canvas normalization */
body.admin-body,
body.public-shell,
body.auth-shell {
  background-color: var(--theme-canvas);
  color: var(--theme-text);
}

body.admin-body .app-main,
body.admin-body [app-main] {
  background: var(--theme-canvas);
}

body.admin-body .app-top-controls {
  padding: .55rem;
  border: 1px solid var(--theme-border);
  border-radius: var(--theme-radius-md);
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
  box-shadow: var(--theme-shadow-xs);
}

body.admin-body .footer,
body.public-shell .public-footer {
  color: var(--theme-muted);
  border-color: var(--theme-border) !important;
}

/* Avoid unsafe theme transitions during initial paint. */
html.theme-ready body,
html.theme-ready .card,
html.theme-ready .modal-content,
html.theme-ready .form-control,
html.theme-ready .form-select,
html.theme-ready .btn,
html.theme-ready .dropdown-menu {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--theme-motion-fast);
  transition-timing-function: ease;
}

/* Production responsive baseline */
@media (max-width: 1023.98px) {
  body.admin-body .app-top-controls { gap: .65rem; }
  .modal-dialog { max-width: calc(100vw - 1.25rem); }
}

@media (max-width: 767.98px) {
  body.admin-body .app-main,
  body.admin-body [app-main] { padding: 1rem; }
  body.admin-body .app-top-controls { align-items: stretch !important; flex-wrap: wrap; }
  body.admin-body .app-top-controls > .d-flex { flex-wrap: wrap; }
  .admin-theme-toggle { min-width: 2.5rem; }
  .modal-footer { gap: .5rem; }
}

@media (max-width: 389.98px) {
  body.admin-body .app-main,
  body.admin-body [app-main] { padding: .75rem; }
  body.admin-body .app-top-controls { padding: .45rem; }
  .modal-dialog { margin: .5rem auto; padding-inline: .2rem; }
  .modal-content { border-radius: var(--theme-radius-md); }
  .theme-switch { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-switch [data-theme-choice] { padding-inline: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  :root,
  html[data-theme="dark"],
  html[data-theme="light"] {
    --theme-canvas: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-muted: #ffffff;
    --theme-text: #111111;
    --theme-text-soft: #222222;
    --theme-muted: #444444;
    --theme-border: #b8b8b8;
    --theme-border-strong: #888888;
  }
  body { background: #ffffff !important; color: #111111 !important; }
  .admin-theme-toggle,
  .public-theme-button,
  .theme-switch { display: none !important; }
  .card,
  .table,
  .modal-content { box-shadow: none !important; }
}