/*
 * PDC Admin shared visual theme
 * Minimal white / cool grey / navy. Loaded after each page's local styles.
 */
:root {
  color-scheme: light !important;

  --pdc-navy: #153456;
  --pdc-navy-hover: #0f2946;
  --pdc-navy-soft: #e9eff6;
  --pdc-bg: #f4f6f8;
  --pdc-surface: #ffffff;
  --pdc-surface-2: #f8fafc;
  --pdc-border: #d8dee7;
  --pdc-border-strong: #b9c3d0;
  --pdc-text: #182230;
  --pdc-muted: #667085;
  --pdc-green: #237a57;
  --pdc-green-soft: #edf7f2;
  --pdc-red: #b42318;
  --pdc-red-soft: #fdf1f0;
  --pdc-amber: #8a6116;
  --pdc-amber-soft: #fff8e8;
  --pdc-blue: #315d88;
  --pdc-blue-soft: #edf3f9;
  --pdc-shadow: 0 8px 24px rgba(21, 52, 86, .07);

  /* Main token family. */
  --bg: var(--pdc-bg) !important;
  --panel: var(--pdc-surface) !important;
  --panel-2: var(--pdc-surface-2) !important;
  --panel-3: #eef2f6 !important;
  --border: var(--pdc-border) !important;
  --text: var(--pdc-text) !important;
  --muted: var(--pdc-muted) !important;
  --accent: var(--pdc-navy) !important;
  --accent-dim: var(--pdc-navy-hover) !important;
  --row-hover: #edf2f7 !important;
  --shadow: var(--pdc-shadow) !important;

  /* ads.html / dentists.html token family. */
  --card: var(--pdc-surface) !important;
  --card2: var(--pdc-surface-2) !important;
  --ink: var(--pdc-text) !important;
  --mut: var(--pdc-muted) !important;
  --line: var(--pdc-border) !important;

  /* Restrained semantic colors. */
  --green: var(--pdc-green) !important;
  --amber: var(--pdc-amber) !important;
  --red: var(--pdc-red) !important;
  --blue: var(--pdc-blue) !important;
  --yellow: var(--pdc-amber) !important;
  --purple: #65558f !important;
  --warn: var(--pdc-amber) !important;
  --danger: var(--pdc-red) !important;
  --err: var(--pdc-red) !important;

  /* compare / LINE / model-specific token families. */
  --in: var(--pdc-blue) !important;
  --admin: var(--pdc-amber) !important;
  --bot: var(--pdc-green) !important;
  --mm: #8a5a3c !important;
  --gpt: var(--pdc-green) !important;
  --hk: #56648a !important;
  --mirror: #557b6a !important;
  --mirror-bg: #edf5f1 !important;
}

html {
  background: var(--pdc-bg) !important;
  color-scheme: light !important;
}

body {
  background: var(--pdc-bg) !important;
  color: var(--pdc-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #cad8e7;
  color: var(--pdc-text);
}

* {
  scrollbar-color: #b5c0cc transparent;
}

:focus-visible {
  outline: 2px solid var(--pdc-navy) !important;
  outline-offset: 2px !important;
}

a {
  color: var(--pdc-navy);
}

/* App chrome */
header {
  background: rgba(255, 255, 255, .97) !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
  box-shadow: 0 1px 0 rgba(21, 52, 86, .025) !important;
  backdrop-filter: blur(10px);
}

header .logo,
.auth-card .logo,
.auth .card .logo {
  background: var(--pdc-navy) !important;
  color: #fff !important;
  box-shadow: none !important;
}

header .sub,
header .status,
header .user,
header .right {
  color: var(--pdc-muted) !important;
}

nav a,
header .head-link,
header button,
header .logout,
a.back {
  background: var(--pdc-surface-2) !important;
  color: #435169 !important;
  border-color: var(--pdc-border) !important;
  box-shadow: none !important;
}

nav a:hover,
header .head-link:hover,
header button:hover,
a.back:hover {
  background: var(--pdc-navy-soft) !important;
  color: var(--pdc-navy) !important;
  border-color: #aebdcd !important;
}

nav a.active,
.tab.on,
.seg button.active,
.chip.active,
.fbtn.active,
.quick.active,
.lc-vtab.on {
  background: var(--pdc-navy) !important;
  color: #fff !important;
  border-color: var(--pdc-navy) !important;
  box-shadow: none !important;
}

.dot {
  background: #98a2b3 !important;
  box-shadow: none !important;
}

.dot.ok {
  background: var(--pdc-green) !important;
  box-shadow: none !important;
}

.dot.err {
  background: var(--pdc-red) !important;
}

aside,
.list,
.patient,
.thread .bar,
.thread-actions,
.composer,
.toolbar,
.filterbar {
  background: var(--pdc-surface) !important;
  border-color: var(--pdc-border) !important;
}

.table-item.active,
.conv.active {
  background: var(--pdc-navy-soft) !important;
  color: var(--pdc-navy) !important;
  border-color: var(--pdc-navy) !important;
}

/* Surfaces */
.card,
.controls,
.kpi,
.cfg,
.q,
.prov,
.shadowitem,
.pcard,
.hist,
.auth-card,
.auth .card,
.password-card,
.modal-card,
.lc-modal,
#login,
.dropzone,
body > .wrap {
  background: var(--pdc-surface) !important;
  background-image: none !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
  box-shadow: var(--pdc-shadow) !important;
}

.modal-bg > .modal,
#modalBg > .modal,
#formBg > .modal,
#payloadBg > .modal {
  background: var(--pdc-surface) !important;
  background-image: none !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
  box-shadow: var(--pdc-shadow) !important;
}

.kpi,
.prov,
.shadowitem,
.pcard,
.hist,
.dropzone {
  box-shadow: none !important;
}

.prov.active,
.shadowitem.on,
.kpi.today,
.kpi.newk {
  background: var(--pdc-navy-soft) !important;
  color: var(--pdc-text) !important;
  border-color: #9db0c5 !important;
  box-shadow: none !important;
}

.prov.active .pname,
.kpi.today .value,
.kpi.newk .n {
  color: var(--pdc-navy) !important;
}

/* Forms and neutral controls */
input,
select,
textarea,
.control,
.filter-select,
.searchbox,
.stsel,
.ghost,
.secondary,
.header-btn,
.rowbtn,
.actbtn,
.act,
.attach,
.lc-btn,
.lc-mcancel,
.password-cancel,
.quick,
.fbtn:not(.active),
.btn:not(.primary) {
  background: var(--pdc-surface) !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #98a2b3 !important;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.control:focus {
  border-color: var(--pdc-navy) !important;
  box-shadow: 0 0 0 3px rgba(21, 52, 86, .10) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pdc-navy) !important;
}

input[type="date"],
input[type="time"],
input[type="date"].control,
input[type="time"].control {
  color-scheme: light !important;
}

button {
  background-image: none !important;
  box-shadow: none !important;
}

.primary,
.btn.primary,
button.save,
.auth-card button,
.auth button,
.password-save,
.lc-msave,
.lc-send,
.send-draft,
.filterbar #applyFilter,
.modal button.btn-primary,
header a.open,
#login button:not(.ghost),
#mSave {
  background: var(--pdc-navy) !important;
  color: #fff !important;
  border-color: var(--pdc-navy) !important;
  box-shadow: none !important;
}

.auth-card .close,
.modal-head .close {
  width: auto !important;
  background: transparent !important;
  color: var(--pdc-muted) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.auth-card .close:hover,
.modal-head .close:hover {
  background: #eef2f6 !important;
  color: var(--pdc-text) !important;
}

.primary:hover,
.btn.primary:hover,
button.save:hover,
.auth-card button:hover,
.auth button:hover,
.password-save:hover,
.lc-msave:hover,
.lc-send:hover,
.send-draft:hover,
.filterbar #applyFilter:hover,
header a.open:hover,
#login button:not(.ghost):hover {
  background: var(--pdc-navy-hover) !important;
  border-color: var(--pdc-navy-hover) !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: .58 !important;
  cursor: not-allowed !important;
}

/* Tables */
table {
  color: var(--pdc-text) !important;
}

thead th,
th,
th:first-child {
  background: #f1f4f7 !important;
  color: #536176 !important;
  border-color: var(--pdc-border) !important;
  box-shadow: none !important;
}

tbody td,
td,
td:first-child {
  background-color: transparent;
  border-color: #e5e9ef !important;
}

tbody tr:hover,
tbody tr:hover td {
  background: #eef3f7 !important;
}

tr.total td {
  background: #e8eef5 !important;
  border-color: #a8b8ca !important;
}

tr.organic td {
  background: #f1f7f4 !important;
}

tr.total td:first-child {
  background: #e8eef5 !important;
}

tr.organic td:first-child,
tr.organic:hover td,
tr.organic:hover td:first-child {
  background: #f1f7f4 !important;
}

td.in {
  color: var(--pdc-text) !important;
}

td.null,
.empty-cell {
  color: #8a94a4 !important;
}

.mono,
code,
pre {
  color: #344054 !important;
}

/* Badges and status colors */
.pill,
.badge,
.chip,
.tag,
.svc,
.ph,
.lc-ib,
.lc-sv,
.lc-br,
.lc-wtag,
.lc-srcb,
.lc-vd {
  border-color: var(--pdc-border) !important;
  box-shadow: none !important;
}

.pill.on,
.st-confirmed,
.st-done,
.appt-future,
.arrival-arrived,
.match-matched,
.status-completed,
.b-pass,
.b-up,
.b-shadow,
.chip.green,
.lc-vd.ok,
.lc-tmbar.off {
  background: var(--pdc-green-soft) !important;
  color: var(--pdc-green) !important;
  border-color: #b6d8c7 !important;
}

.pill.off,
.st-cancelled,
.status-cancelled,
.status-no_show,
.arrival-not_arrived,
.appt-past,
.b-fail,
.b-cut,
.chip.red,
.lc-vd.improved,
.lc-tmbar.on {
  background: var(--pdc-red-soft) !important;
  color: var(--pdc-red) !important;
  border-color: #efc0bc !important;
}

.st-new,
.appt-today,
.b-watch,
.b-warn,
.rolewarn,
.tip,
.warnbar,
.status-scheduled,
.match-review,
.match-pending {
  background: var(--pdc-amber-soft) !important;
  color: var(--pdc-amber) !important;
  border-color: #ead7a8 !important;
}

.st-contacted,
.b-test,
.status-confirmed,
.arrival-unknown,
.match-unmatched,
.b-bot,
.chip.purple {
  background: var(--pdc-blue-soft) !important;
  color: var(--pdc-blue) !important;
  border-color: #bdd0e2 !important;
}

.rolewarn,
.tip,
.warnbar {
  border-style: solid !important;
  border-width: 1px !important;
}

.good,
.ok,
.msg.ok {
  color: var(--pdc-green) !important;
}

.bad,
.err,
.msg.err {
  color: var(--pdc-red) !important;
}

.auth-err,
.form-error,
.password-msg,
.required::after,
.danger {
  color: var(--pdc-red) !important;
}

.warn,
.lc-time {
  color: var(--pdc-amber) !important;
}

.note {
  background: transparent !important;
  color: var(--pdc-muted) !important;
  border-color: transparent !important;
}

.bigwarn {
  background: var(--pdc-red-soft) !important;
  color: #7a271a !important;
  border-color: #e6aaa4 !important;
}

.tel,
.mini-link,
.toc a,
td a {
  color: var(--pdc-navy) !important;
}

.section-title {
  color: var(--pdc-text) !important;
}

.hn {
  color: var(--pdc-muted) !important;
}

/* Auth, dialogs and notifications */
#authScreen,
.auth {
  background: var(--pdc-bg) !important;
}

.modal-bg,
.password-modal,
.lc-modal-bg {
  background: rgba(15, 35, 57, .42) !important;
  backdrop-filter: blur(3px);
}

.modal[role="dialog"] {
  background: rgba(15, 35, 57, .42) !important;
  color: var(--pdc-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(3px);
}

.toast {
  background: var(--pdc-surface) !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
  box-shadow: var(--pdc-shadow) !important;
}

.toast.ok {
  border-left-color: var(--pdc-green) !important;
}

.toast.err {
  border-left-color: var(--pdc-red) !important;
}

/* Appointments */
.skip-link {
  background: var(--pdc-navy) !important;
  color: #fff !important;
}

.kpi {
  background: var(--pdc-surface) !important;
  background-image: none !important;
}

.kpi.arrived .value {
  color: var(--pdc-blue) !important;
}

.kpi.unmatched .value {
  color: var(--pdc-amber) !important;
}

.loading-row {
  background: #eef2f6 !important;
  background-image: none !important;
  animation: none !important;
}

.host-card,
.host-item {
  background: var(--pdc-surface-2) !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
}

/* Live Chat is injected after load in chat.html and home.html, hence !important. */
.lc-wrap,
.lc-left {
  background: var(--pdc-surface) !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
}

.lc-right,
.lc-cwrap {
  background: var(--pdc-bg) !important;
  color: var(--pdc-text) !important;
}

.lc-right .lc-ph {
  color: var(--pdc-muted) !important;
}

.lc-head {
  background: var(--pdc-navy) !important;
  color: #fff !important;
}

.lc-head a {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}

.lc-card,
.lc-crow,
.lc-msg,
.lc-qa,
.lc-sbar,
.lc-upchip {
  background: var(--pdc-surface) !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
}

.lc-card {
  background: #ffffff !important;
  color: var(--pdc-text) !important;
  border-left-color: #c76861 !important;
  box-shadow: 0 1px 2px rgba(21, 52, 86, .035) !important;
}

/* Escalated/locked ticket cards: keep the alert rail red, but make the
   customer message and review content clean white with clearly legible ink. */
.lc-card .lc-msg,
.lc-card .lc-qa {
  background: #ffffff !important;
  color: var(--pdc-text) !important;
  border: 1px solid #e1e6ed !important;
}

.lc-card .lc-msg {
  font-weight: 500;
}

.lc-card .lc-time {
  color: var(--pdc-amber) !important;
}

.lc-crow.on {
  background: var(--pdc-navy-soft) !important;
  outline-color: var(--pdc-navy) !important;
}

.lc-bub {
  color: var(--pdc-text) !important;
  border: 1px solid var(--pdc-border) !important;
  box-shadow: none !important;
}

.lc-bub.in {
  background: var(--pdc-surface) !important;
}

.lc-bub.bot {
  background: #EDF8F1 !important;
  border-color: #B7DCC7 !important;
}

.lc-bub.admin {
  background: #EDF3F9 !important;
  border-color: #c7d6e5 !important;
}

.lc-who,
.lc-by,
.lc-rawtoggle,
.lc-t,
.lc-cm,
.lc-ct {
  color: var(--pdc-muted) !important;
}

.lc-ib,
.lc-wtag {
  background: var(--pdc-surface-2) !important;
  color: var(--pdc-muted) !important;
}

.lc-ib.hot,
.lc-srcb {
  background: var(--pdc-red-soft) !important;
  color: var(--pdc-red) !important;
  border-color: #efc0bc !important;
}

.lc-ib.warm,
.lc-vd.improved {
  background: var(--pdc-amber-soft) !important;
  color: var(--pdc-amber) !important;
  border-color: #ead7a8 !important;
}

.lc-ib.cold,
.lc-sv,
.lc-vd.ticket_closed {
  background: var(--pdc-blue-soft) !important;
  color: var(--pdc-blue) !important;
  border-color: #bdd0e2 !important;
}

.lc-br {
  background: var(--pdc-green-soft) !important;
  color: var(--pdc-green) !important;
  border-color: #b6d8c7 !important;
}

.lc-vd.coached {
  background: var(--pdc-navy-soft) !important;
  color: var(--pdc-navy) !important;
  border-color: #b9c7d7 !important;
}

.lc-search,
.lc-pic-open,
.lc-pic-picker-search,
.lc-sbar textarea,
.lc-attach,
.lc-drops select {
  background: var(--pdc-surface) !important;
  color: var(--pdc-text) !important;
  border-color: var(--pdc-border) !important;
}

.lc-fixbar {
  background: var(--pdc-amber-soft) !important;
  color: var(--pdc-amber) !important;
  border-bottom: 1px solid #ead7a8 !important;
}

.lc-fixbtn {
  background: #b17a20 !important;
  color: #fff !important;
}

.lc-tmbtn {
  background: var(--pdc-green) !important;
  color: #fff !important;
}

.lc-tmbtn.off {
  background: var(--pdc-red) !important;
}

/* LINE console */
.mirror-stats {
  background: var(--pdc-border) !important;
  border-color: var(--pdc-border) !important;
}

.ms,
.list .head,
.thread,
.thread .bar,
.patient,
.composer,
.thread-actions {
  background: var(--pdc-surface) !important;
  color: var(--pdc-text) !important;
}

.patient h4,
.hist .bd {
  color: var(--pdc-muted) !important;
}

.ms.ok .v,
.hist .money {
  color: var(--pdc-green) !important;
}

.ms.warn .v {
  color: var(--pdc-amber) !important;
}

.ms.bad .v {
  color: var(--pdc-red) !important;
}

.hist .hd {
  background: #eef2f6 !important;
  color: var(--pdc-text) !important;
}

.msgs {
  background: var(--pdc-bg) !important;
}

.b {
  color: var(--pdc-text) !important;
  box-shadow: none !important;
}

.b.in {
  background: var(--pdc-surface) !important;
  border-color: var(--pdc-border) !important;
}

.b.bot {
  background: #EDF8F1 !important;
  border-color: #B7DCC7 !important;
}

.b.mirror {
  background: #EDF8F1 !important;
  border-color: #B7DCC7 !important;
}

.b.mirror .meta {
  color: var(--pdc-green) !important;
}

.b.admin {
  background: #EDF3F9 !important;
  border-color: #c7d6e5 !important;
}

/* Compare and shadow pages */
.bubble {
  background: #edf3f0 !important;
  color: var(--pdc-text) !important;
  border-color: #c6d8cf !important;
}

.ph {
  background: #edf1f5 !important;
  color: #536176 !important;
}

.tok {
  background: var(--pdc-red-soft) !important;
  color: var(--pdc-red) !important;
}

.b-none {
  background: #eef1f4 !important;
  color: var(--pdc-muted) !important;
}

.pic {
  color: #fff !important;
  box-shadow: none !important;
}

.raw,
.flag {
  background: var(--pdc-red-soft) !important;
  color: var(--pdc-red) !important;
  border-color: #efc0bc !important;
}

/* Manual-page button examples retain meaning without returning to dark blocks. */
.btn.green {
  background: var(--pdc-green-soft) !important;
  color: var(--pdc-green) !important;
  border-color: #b6d8c7 !important;
}

.btn.yellow {
  background: var(--pdc-amber-soft) !important;
  color: var(--pdc-amber) !important;
  border-color: #ead7a8 !important;
}

.btn.red {
  background: var(--pdc-red-soft) !important;
  color: var(--pdc-red) !important;
  border-color: #efc0bc !important;
}

.btn.blue {
  background: var(--pdc-blue-soft) !important;
  color: var(--pdc-blue) !important;
  border-color: #bdd0e2 !important;
}

/* Keep the palette calm on narrow screens without changing page layouts. */
@media (max-width: 760px) {
  header {
    background: var(--pdc-surface) !important;
  }

  nav a {
    background: #f5f7f9 !important;
  }

  nav a.active {
    background: var(--pdc-navy) !important;
  }
}

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