/* Unified theme for all business modules (doc/sign/food/index) */
:root {
  --tkx-bg-top: #f7f3eb;
  --tkx-bg-bottom: #eee5d8;
  --tkx-surface-1: rgba(255, 255, 255, 0.76);
  --tkx-surface-2: #fffdf9;
  --tkx-surface-soft: #fff8ef;
  --tkx-surface-strong: #ffffff;
  --tkx-border: #e5d7c6;
  --tkx-border-strong: #d8c4ad;
  --tkx-text: #1f1914;
  --tkx-text-strong: #16110d;
  --tkx-text-muted: #6a584b;
  --tkx-hero-text: #fff7ef;
  --tkx-hero-text-soft: rgba(255, 247, 239, 0.9);
  --tkx-hero-start: #231811;
  --tkx-hero-mid: #543322;
  --tkx-hero-end: #855236;
  --tkx-primary: #b55b2d;
  --tkx-primary-light: #d89557;
  --tkx-primary-border: #9b4c25;
  --tkx-danger: #a1352d;
  --tkx-danger-bg: #fff3f1;
  --tkx-danger-border: #f1d0cc;
  --tkx-success: #0d6f41;
  --tkx-success-bg: #eef9f2;
  --tkx-success-border: #cdebd9;
  --tkx-icon-bg: #fff5e8;
  --tkx-icon-border: #dfc3a8;
  --tkx-icon-fg: #4f3c2f;
  --tkx-shadow: 0 12px 30px rgba(44, 29, 17, 0.08);
  --tkx-shadow-hover: 0 16px 34px rgba(44, 29, 17, 0.12);
  --tkx-focus-ring: 0 0 0 3px rgba(216, 149, 87, 0.18);
}

html[data-tkx-theme="night"] {
  --tkx-bg-top: #121217;
  --tkx-bg-bottom: #17151b;
  --tkx-surface-1: linear-gradient(180deg, rgba(20, 17, 21, 0.84), rgba(14, 12, 16, 0.8));
  --tkx-surface-2: linear-gradient(180deg, rgba(20, 17, 21, 0.86), rgba(14, 12, 16, 0.82));
  --tkx-surface-soft: rgba(255, 255, 255, 0.03);
  --tkx-surface-strong: rgba(255, 255, 255, 0.06);
  --tkx-border: rgba(255, 214, 153, 0.12);
  --tkx-border-strong: rgba(255, 214, 153, 0.2);
  --tkx-text: #dbe4ef;
  --tkx-text-strong: #f1f6ff;
  --tkx-text-muted: #bfc9d8;
  --tkx-hero-text: #f6efe4;
  --tkx-hero-text-soft: rgba(244, 232, 213, 0.84);
  --tkx-hero-start: rgba(28, 20, 24, 0.92);
  --tkx-hero-mid: rgba(40, 28, 34, 0.88);
  --tkx-hero-end: rgba(82, 58, 38, 0.8);
  --tkx-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  --tkx-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.36);
  --tkx-focus-ring: 0 0 0 3px rgba(221, 164, 85, 0.14);
  --tkx-icon-bg: rgba(255, 221, 175, 0.08);
  --tkx-icon-border: rgba(255, 214, 153, 0.18);
  --tkx-icon-fg: #f2e5cf;
}

body {
  color: var(--tkx-text) !important;
  background:
    radial-gradient(circle at 10% -10%, rgba(216, 149, 87, 0.22), transparent 42%),
    linear-gradient(180deg, var(--tkx-bg-top), var(--tkx-bg-bottom)) !important;
}

.hero,
.top {
  color: var(--tkx-hero-text) !important;
  background: linear-gradient(135deg, var(--tkx-hero-start), var(--tkx-hero-mid) 58%, var(--tkx-hero-end)) !important;
  box-shadow: var(--tkx-shadow) !important;
  border: 1px solid var(--tkx-border) !important;
}

.hero h1,
.top h1 {
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.hero p,
.top p {
  margin-top: 10px !important;
}

.topbar {
  margin-top: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.topbar .actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.topbar .user-meta,
.topbar [id$="userMetaMount"] {
  min-height: 36px !important;
}

.layout,
.grid {
  margin-top: 12px !important;
  gap: 12px !important;
}

.hero p,
.top .top-user {
  color: var(--tkx-hero-text-soft) !important;
}

.topbar,
.panel,
.subpanel,
.card,
.pay-card,
.modal {
  background: var(--tkx-surface-1) !important;
  border-color: var(--tkx-border) !important;
  box-shadow: var(--tkx-shadow) !important;
  backdrop-filter: blur(8px);
}

.toolbar,
.list-filter-panel,
.module-box,
.group,
.stat,
.sum-card,
.detail-item,
.record-meta .item,
.uploader,
.user,
.empty,
.tips,
.excerpt,
.profile {
  background: var(--tkx-surface-soft) !important;
  border-color: var(--tkx-border) !important;
}

.user.active,
.sum-card:hover,
.detail-item:hover,
.module-box:hover,
.group:hover {
  background: var(--tkx-surface-strong) !important;
  border-color: var(--tkx-border-strong) !important;
}

.panel:hover,
.subpanel:hover,
.card:hover,
.topbar:hover {
  border-color: var(--tkx-border-strong) !important;
  box-shadow: var(--tkx-shadow-hover) !important;
}

.hd,
.panel .hd,
.subhd,
.modal .mhd,
.modal .hd {
  color: var(--tkx-text) !important;
  border-bottom-color: var(--tkx-border) !important;
  background: linear-gradient(180deg, rgba(216, 149, 87, 0.1), rgba(216, 149, 87, 0)) !important;
}

.bd,
.panel .bd,
.subbd,
.modal .mbd,
.modal .mft {
  color: var(--tkx-text) !important;
  border-color: var(--tkx-border) !important;
}

.title,
.ttl,
.name,
.module-title,
.u-name,
.user-meta-name,
.topbar,
.panel,
.panel .hd,
.subhd,
.modal .mhd,
.modal .hd,
.hero h1,
.top h1,
h1,
h2,
h3,
h4,
th,
td {
  color: var(--tkx-text-strong) !important;
}

.muted,
.sub,
.field label,
.mobile,
.desc,
.k,
.tip {
  color: var(--tkx-text-muted) !important;
}

.user-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.user-meta .avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

.user-meta .avatar.ph {
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.user-meta-main {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.user-head {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.user-meta-name {
  color: var(--tkx-text-strong) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  max-width: 320px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.user-meta-mobile {
  color: var(--tkx-text-muted) !important;
  font-size: 12px !important;
}

a:not(.btn) {
  color: var(--tkx-primary) !important;
}

html[data-tkx-theme="night"] a:not(.btn) {
  color: #ffcf94 !important;
}

.btn,
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  min-height: 36px !important;
  border: 1px solid var(--tkx-primary-border) !important;
  background: linear-gradient(180deg, var(--tkx-primary-light), var(--tkx-primary)) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

.topbar .btn,
.topbar button.btn,
.topbar a.btn {
  min-height: 0 !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  border-radius: 9px !important;
  line-height: 1.2 !important;
}

.btn:hover,
.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible,
a.btn:hover,
a.btn:focus-visible {
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.btn.sub,
.btn.light,
.btn.ghost,
.mini,
.nav a,
.nav button {
  border-color: var(--tkx-border-strong) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)) !important;
  color: #503f33 !important;
}

html[data-tkx-theme="night"] .btn.sub,
html[data-tkx-theme="night"] .btn.light,
html[data-tkx-theme="night"] .btn.ghost,
html[data-tkx-theme="night"] .mini,
html[data-tkx-theme="night"] .nav a,
html[data-tkx-theme="night"] .nav button {
  border-color: rgba(255, 214, 153, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 221, 175, 0.08), rgba(255, 221, 175, 0.03)) !important;
  color: #f2e5cf !important;
}

.btn.warn {
  border-color: #e1b023 !important;
  background: linear-gradient(180deg, #ffd85f, #f0b800) !important;
  color: #4a3700 !important;
}

.btn.primary {
  border-color: var(--tkx-primary-border) !important;
  background: linear-gradient(180deg, var(--tkx-primary-light), var(--tkx-primary)) !important;
  color: #fff !important;
}

.tkx-btn-logout {
  border-color: var(--tkx-primary-border) !important;
  background: linear-gradient(180deg, #efaa62, #d07a34) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.tkx-btn-logout:hover,
.tkx-btn-logout:focus-visible,
.tkx-btn-logout:active {
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.04);
}

input,
select,
textarea,
.field input,
.field select,
.field textarea,
.scan-manual input,
.smart-picker__box {
  color: var(--tkx-text) !important;
  background: var(--tkx-surface-2) !important;
  border: 1px solid var(--tkx-border-strong) !important;
}

input::placeholder,
textarea::placeholder,
.field input::placeholder,
.scan-manual input::placeholder,
.smart-picker__input::placeholder {
  color: #9b8a7a !important;
}

html[data-tkx-theme="night"] input::placeholder,
html[data-tkx-theme="night"] textarea::placeholder,
html[data-tkx-theme="night"] .field input::placeholder,
html[data-tkx-theme="night"] .scan-manual input::placeholder,
html[data-tkx-theme="night"] .smart-picker__input::placeholder {
  color: #93a1b4 !important;
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.scan-manual input:focus,
.smart-picker.is-open .smart-picker__box {
  outline: none !important;
  border-color: var(--tkx-primary-light) !important;
  box-shadow: var(--tkx-focus-ring) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: 0.95 !important;
  filter: saturate(0) brightness(0.35) contrast(1.15) !important;
  cursor: pointer !important;
}

html[data-tkx-theme="night"] input,
html[data-tkx-theme="night"] select,
html[data-tkx-theme="night"] textarea,
html[data-tkx-theme="night"] .field input,
html[data-tkx-theme="night"] .field select,
html[data-tkx-theme="night"] .field textarea,
html[data-tkx-theme="night"] .scan-manual input,
html[data-tkx-theme="night"] .smart-picker__box {
  color: #edf3ff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)) !important;
  border-color: rgba(255, 214, 153, 0.2) !important;
}

html[data-tkx-theme="night"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-tkx-theme="night"] input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  filter: invert(1) brightness(2.2) contrast(1.35) !important;
}

html[data-tkx-theme="night"] select option {
  color: #edf3ff !important;
  background: #28222e !important;
}

.icon,
.avatar,
.ph,
.uploader .ph,
.usercell .avatar {
  background: var(--tkx-icon-bg) !important;
  border-color: var(--tkx-icon-border) !important;
  color: var(--tkx-icon-fg) !important;
}

.icon img,
.icon svg,
.icon [src$=".svg"] {
  display: block;
}

html[data-tkx-theme="night"] .icon img,
html[data-tkx-theme="night"] .icon svg,
html[data-tkx-theme="night"] .icon [src$=".svg"] {
  filter: brightness(1.18) contrast(1.1);
}

.smart-picker__menu,
.scan-box,
.table,
.table-wrap {
  border-color: var(--tkx-border) !important;
  background: var(--tkx-surface-2) !important;
}

.scan-mask {
  background: rgba(15, 10, 7, 0.45) !important;
}

.scan-hd,
.scan-bd {
  color: var(--tkx-text-strong) !important;
  border-color: var(--tkx-border) !important;
}

.scan-close,
.scan-manual button {
  border-color: var(--tkx-border-strong) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)) !important;
  color: #503f33 !important;
}

.pager a,
.pager span {
  border-color: var(--tkx-border-strong) !important;
  background: var(--tkx-surface-2) !important;
  color: var(--tkx-text) !important;
}

.pager .cur {
  border-color: var(--tkx-primary-border) !important;
  background: linear-gradient(180deg, var(--tkx-primary-light), var(--tkx-primary)) !important;
  color: #fff !important;
}

html[data-tkx-theme="night"] .smart-picker__menu,
html[data-tkx-theme="night"] .scan-box,
html[data-tkx-theme="night"] .table,
html[data-tkx-theme="night"] .table-wrap {
  background: linear-gradient(180deg, rgba(20, 17, 21, 0.96), rgba(14, 12, 16, 0.92)) !important;
  border-color: rgba(255, 214, 153, 0.14) !important;
}

html[data-tkx-theme="night"] .scan-mask {
  background: rgba(3, 4, 8, 0.62) !important;
}

html[data-tkx-theme="night"] .scan-close,
html[data-tkx-theme="night"] .scan-manual button {
  border-color: rgba(255, 214, 153, 0.18) !important;
  background: linear-gradient(180deg, rgba(255, 221, 175, 0.08), rgba(255, 221, 175, 0.03)) !important;
  color: #f2e5cf !important;
}

html[data-tkx-theme="night"] .pager a,
html[data-tkx-theme="night"] .pager span {
  border-color: rgba(255, 214, 153, 0.16) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #d8e2f0 !important;
}

.msg,
.global-toast {
  color: var(--tkx-text-strong) !important;
}

.msg.ok,
.global-toast.ok {
  border-color: var(--tkx-success-border) !important;
  background: var(--tkx-success-bg) !important;
  color: var(--tkx-success) !important;
}

.msg.err,
.global-toast.err {
  border-color: var(--tkx-danger-border) !important;
  background: var(--tkx-danger-bg) !important;
  color: var(--tkx-danger) !important;
}

.badge,
.chip,
.tag,
.record-meta .item,
.uploader,
.user,
.user.active,
.sum-card,
.detail-item,
.stat,
.empty {
  border-color: var(--tkx-border) !important;
}

table th,
table td {
  border-bottom-color: var(--tkx-border) !important;
  color: var(--tkx-text) !important;
}

table thead th {
  background: var(--tkx-surface-2) !important;
}

html[data-tkx-theme="night"] table thead th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--tkx-text-muted) !important;
}

table tbody tr:nth-child(even) td,
table tbody tr:hover td {
  background: transparent !important;
}

.modal-mask {
  background: rgba(15, 10, 7, 0.45) !important;
}

html[data-tkx-theme="night"] .modal-mask {
  background: rgba(3, 4, 8, 0.62) !important;
}