/* Shared controls for the logged-in backend.
   Visuals follow the navy theme variables from admin/app.css.
   Fallbacks keep signup and the member page readable without that sheet. */

.ctrl,
input.ctrl,
select.ctrl,
textarea.ctrl {
  background: var(--field, #0f1115);
  border: 1px solid var(--line, #2a2f38);
  color: inherit;
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 48px;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
}
.ucs-app .ctrl:focus,
.ctrl:focus {
  outline: none;
  border-color: var(--accent, #22d3ee);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #22d3ee) 25%, transparent);
}
.ucs-app .toolbar .ctrl,
.ucs-app .tools .ctrl,
.ucs-app .pager .ctrl,
.ucs-app .head-tools .ctrl,
.pager .ctrl {
  width: auto;
}
.ucs-app .toolbar select.ctrl,
.ucs-app .tools .combo {
  flex: 0 1 220px;
  min-width: 0;
}
.ucs-app input.search,
input.search.ctrl {
  flex: 1;
  min-width: 0;
  width: auto;
}

.pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--muted, #b8c4d6);
}
.pager-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pager .btn {
  border: 1px solid var(--btn-secondary-border, #2a2f38);
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-ink, inherit);
  border-radius: 14px;
  padding: 8px 12px;
  min-height: 40px;
  font-weight: 700;
  cursor: pointer;
}
.pager .pager-nav {
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pager .pager-nav svg {
  display: block;
}
.pager .pager-nav[disabled] {
  opacity: .4;
  cursor: default;
}

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--btn-secondary-border, #3a404b);
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-ink, inherit);
  cursor: pointer;
  flex: 0 0 auto;
  touch-action: manipulation;
}
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn.icon-add,
.icon-btn.icon-admit {
  background: var(--btn-primary-bg, #1d6fe0);
  color: var(--btn-primary-ink, #fff);
  border: 0;
  box-shadow: var(--btn-primary-shadow, none);
}
.icon-btn.icon-del,
.icon-btn.icon-reject {
  color: var(--btn-danger-ink, #b42318);
  border-color: var(--btn-danger-border, #d92d20);
  background: var(--btn-danger-bg, transparent);
}
.icon-btn.icon-del:hover,
.icon-btn.icon-reject:hover { background: var(--btn-danger-hover, rgba(239, 68, 68, .16)); }
.icon-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--text, #fff);
  color: var(--bg, #05070d);
  font: 700 12px/1.2 Prompt, Sarabun, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
}
.icon-btn[data-tip]:hover::after,
.icon-btn[data-tip]:focus-visible::after,
.icon-btn.tip-on[data-tip]::after { opacity: 1; }

.media-row { cursor: default; align-items: center; }
.media-row .item-body { min-width: 0; }
.media-row .item-body b,
.media-row .item-body .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-thumb {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--card2, rgba(18, 32, 58, .55));
  color: var(--muted, #b8c4d6);
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-slot { position: relative; display: inline-grid; place-items: center; overflow: hidden; width: 64px; height: 64px; border-radius: 50%; background: #0e1530; flex: none; }
.face-slot > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.face-reveal { position: absolute; left: 0; right: 0; bottom: 0; border: 0; background: rgba(11, 21, 48, .88); color: #fff; font: 700 10px/1.2 "Noto Sans Thai", sans-serif; padding: 3px 0; cursor: pointer; }
.face-notice { color: var(--muted, #64748b); font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.person-photo.face-slot { width: 118px; height: 148px; border-radius: 16px; }
.row-thumb.face-slot { width: 60px; height: 60px; border-radius: 14px; }
.row-thumb svg { width: 28px; height: 28px; }
.row-actions { display: flex; gap: 6px; align-items: center; flex: none; margin-left: auto; }
.media-row .pill { flex: none; }
@media (max-width: 640px) {
  .media-row { gap: 8px; padding: 8px; }
  .row-thumb { width: 56px; height: 56px; border-radius: 12px; }
  .media-row .row-actions { flex-wrap: wrap; justify-content: flex-end; }
}

.file-drop {
  position: relative;
  border: 1.5px dashed var(--btn-secondary-border, #3a404b);
  border-radius: 18px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  background: var(--btn-secondary-bg, #0f1115);
  color: var(--text, inherit);
  cursor: pointer;
}
.file-drop.is-drag {
  border: 3px solid #22d3ee;
  background: #0e3a52;
  box-shadow: inset 0 0 0 2px #22d3ee, 0 0 28px rgba(34, 211, 238, .7);
}
.file-drop.is-drag .file-drop-copy,
.file-drop.is-drag .file-drop-hint { color: #7ef0ff; }
.file-drop.is-drag .file-drop-hint::before { content: "ปล่อยเพื่ออัปโหลด · "; }
.file-drop.has-file { align-items: stretch; text-align: left; cursor: default; }
.file-drop .media-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.file-drop-empty {
  font-weight: 700;
  color: var(--accent, #f5c400);
  display: grid;
  justify-items: center;
  gap: 4px;
}
.file-drop-copy { font-weight: 700; }
.file-drop-hint { display: block; color: var(--muted, #b8bec8); font-weight: 500; margin-top: 4px; }
.file-drop-browse { min-height: 44px; margin-top: 6px; }
.file-drop-queue { display: grid; gap: 10px; width: 100%; }
.file-drop-file {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "thumb meta remove" "bar bar bar";
  gap: 8px;
  align-items: center;
}
.file-drop-thumb {
  grid-area: thumb;
  width: 56px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card2, #1b1f26);
  display: grid;
  place-items: center;
}
.file-drop-thumb img, .file-drop-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.file-drop-doc { font: 700 13px Prompt, Sarabun, sans-serif; }
.file-drop-meta { grid-area: meta; min-width: 0; }
.file-drop-name { display: block; font-weight: 700; word-break: break-word; }
.file-drop-status { display: block; color: var(--muted, #b8bec8); font-size: 13px; font-weight: 600; }
.file-drop-remove {
  grid-area: remove;
  border: 0;
  background: transparent;
  color: var(--text, inherit);
  font-size: 22px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.file-drop-progress { grid-area: bar; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.file-drop-progress span { display: block; height: 100%; width: 0; background: #22d3ee; }
.slot .file-drop,
.doc-row .file-drop { min-height: 96px; padding: 8px; }

[data-theme="light"] .file-drop.is-drag {
  border-color: #1d6fe0;
  background: #e7f1fb;
  box-shadow: inset 0 0 0 2px #1d6fe0, 0 0 18px rgba(29, 111, 224, .25);
}
[data-theme="light"] .file-drop.is-drag .file-drop-copy,
[data-theme="light"] .file-drop.is-drag .file-drop-hint { color: #1d4f86; }
[data-theme="light"] .file-drop-progress { background: rgba(11, 20, 36, .12); }
[data-theme="light"] .file-drop-progress span { background: #1d6fe0; }

.thai-calendar { display: grid; gap: 8px; }
.calendar-head,
.calendar-foot { display: flex; gap: 8px; }
.calendar-head select {
  flex: 1;
  background: var(--field, #0f1115);
  border: 1px solid var(--line, #2a2f38);
  color: inherit;
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 44px;
}
.calendar-week,
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.calendar-week span { color: var(--muted, #b8bec8); font-size: 13px; font-weight: 700; }
.calendar-days button {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--card2, #1b1f26);
  color: var(--text, inherit);
  font: 700 14px Sarabun, "Noto Sans Thai", sans-serif;
  padding: 4px 0;
}
.calendar-days button.today { box-shadow: inset 0 0 0 2px var(--accent, #22d3ee); }
.calendar-days button.on { background: var(--btn-primary-bg, #1d6fe0); color: var(--btn-primary-ink, #fff); }
.calendar-days button.has { box-shadow: inset 0 -3px 0 var(--accent, #22d3ee); }
.calendar-days button:disabled { background: transparent; border-color: transparent; }
.calendar-foot { justify-content: flex-end; }
.calendar-foot .btn { min-height: 40px; padding: 8px 14px; }

.combo { position: relative; width: 100%; min-width: 0; }
.combo-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--card, #15181e);
  color: var(--text, inherit);
  border: 1px solid var(--line, #2a2f38);
  border-radius: 14px;
  box-shadow: var(--shadow, 0 12px 32px rgba(0, 0, 0, .28));
}
.combo-list li {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.combo-list li[aria-selected="true"],
.combo-list li.is-on,
.combo-list li:hover { background: color-mix(in srgb, var(--accent, #22d3ee) 18%, transparent); }
.combo-empty { color: var(--muted, #b8bec8); cursor: default; }
.tools .combo,
.work-head .combo { width: auto; flex: 1 1 220px; }

/* Password show/hide (UcsUi.bindPasswordToggles) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 48px !important; box-sizing: border-box; }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted, #b8c4d6); cursor: pointer;
}
.pw-eye:hover { color: var(--accent, #22d3ee); }
.pw-eye:focus-visible { outline: 2px solid var(--accent, #22d3ee); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: var(--accent, #22d3ee); }

/* Card slider (UcsUi.cardSliderHtml / bindCardSlider) */
.ucs-slider{--ucs-slide-n:3;--ucs-slide-gap:12px;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-width:0}
.ucs-slider-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--ucs-slide-n) - 1) * var(--ucs-slide-gap)) / var(--ucs-slide-n));column-gap:var(--ucs-slide-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0;padding:2px;touch-action:pan-y}
.ucs-slider-track::-webkit-scrollbar{display:none}
.ucs-slider-item{scroll-snap-align:start;min-width:0;display:flex;touch-action:pan-y}
.ucs-slider-item>*{flex:1;min-width:0}
.ucs-slider-nav{width:36px;height:36px;border-radius:50%;border:1px solid var(--btn-secondary-border,rgba(127,127,127,.35));background:var(--btn-secondary-bg,transparent);color:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.ucs-slider-nav:disabled{opacity:.3;cursor:default}
.ucs-slider-dots{grid-column:1/-1;display:flex;justify-content:center;gap:6px;margin-top:4px}
.ucs-slider-dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:currentColor;opacity:.25;cursor:pointer}
.ucs-slider-dot.on{opacity:.9;width:20px;border-radius:4px}
.ucs-slider.is-static .ucs-slider-nav,.ucs-slider.is-static .ucs-slider-dots{visibility:hidden}
.ucs-slider-empty{opacity:.65;margin:4px 0}
@media (max-width:1023px){.ucs-slider{--ucs-slide-n:2}}
@media (max-width:767px){.ucs-slider{--ucs-slide-n:1.5;grid-template-columns:1fr}.ucs-slider-nav{display:none}}
.ucs-slider .ucs-slider-dot{flex:none;width:8px;height:8px;min-width:0;min-height:0;max-height:8px;margin:0;box-shadow:none;border:0;padding:0;line-height:0;font-size:0}
.ucs-slider .ucs-slider-dot.on{width:20px}
.ucs-slider .ucs-slider-nav{min-height:0;min-width:0;box-shadow:none}
.ucs-slider.is-static .ucs-slider-dots{display:none}

/* dd: solid, readable combobox dropdown (shared) */
.combo { isolation: auto; }
.combo:focus-within { z-index: 1000; }
.combo-list { z-index: 1000 !important; background: #ffffff !important; color: #0f172a !important; opacity: 1 !important; backdrop-filter: none !important;
  border: 1.5px solid #94a3b8 !important; box-shadow: 0 18px 40px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .12) !important; max-height: 280px; overscroll-behavior: contain; }
.combo-list li { color: #0f172a !important; display: flex; align-items: center; }
.combo-list li[hidden] { display: none !important; }
.combo-list li:hover, .combo-list li.is-on { background: #e0f2fe !important; color: #075985 !important; }
.combo-list li[aria-selected="true"] { background: #0ea5e9 !important; color: #fff !important; font-weight: 700; }
.combo-list li[aria-selected="true"]::after { content: "✓"; margin-left: auto; padding-left: 10px; }
.combo-list .combo-empty, .combo-list .combo-empty:hover { color: #64748b !important; background: transparent !important; }
[data-theme="dark"] .combo-list { background: #0f172a !important; color: #e5e7eb !important; border-color: #475569 !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04) !important; }
[data-theme="dark"] .combo-list li { color: #e5e7eb !important; }
[data-theme="dark"] .combo-list li:hover, [data-theme="dark"] .combo-list li.is-on { background: #1e3a5f !important; color: #fff !important; }
[data-theme="dark"] .combo-list li[aria-selected="true"] { background: #0284c7 !important; color: #fff !important; }
[data-theme="dark"] .combo-list .combo-empty { color: #94a3b8 !important; }

/* Car share icon row. Facebook, LINE, copy, and download. 48px in both themes. */
.ucs-share-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:nowrap}
.ucs-share-btn{box-sizing:border-box;flex:0 0 auto;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;text-decoration:none;cursor:pointer;line-height:0}
.ucs-share-btn svg{width:22px;height:22px;display:block}
.ucs-share-fb{background:#1877F2;border-color:#1877F2;color:#fff}
.ucs-share-line{background:#06C755;border-color:#06C755;color:#fff;overflow:hidden}
.ucs-share-btn.ucs-share-line svg{width:32px;height:32px}
[data-theme="light"] .ucs-share-copy,[data-theme="light"] .ucs-share-dl{color:#0b1424;background:#fff;border-color:rgba(11,20,36,.22)}
[data-theme="light"] .ucs-share-line,.cg .ucs-share-line{background:#06C755;border-color:#06C755;color:#fff}
.cg .ucs-share-copy,.cg .ucs-share-dl{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
body.cg-open .ucs-toasts,body:has(.pc-modal:not([hidden])) .ucs-toasts{z-index:200}/* Share chooser (bottom sheet, mobile first) */
.ucs-share-btn.ucs-share-more{background:#e10600;color:#fff;border-color:#e10600}
.ucs-share-btn.ucs-share-more svg{width:24px;height:24px}
.ucs-share-sheet{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center}
.ucs-share-sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.ucs-share-sheet-card{position:relative;width:100%;max-width:480px;box-sizing:border-box;background:#14161b;color:#fff;border-top:3px solid #e10600;border-radius:18px 18px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;font-family:inherit}
.ucs-share-sheet-grip{width:40px;height:4px;border-radius:2px;background:#3a3d45;margin:2px auto 4px}
.ucs-share-sheet-card h3{margin:0 0 4px;font-size:18px;font-weight:800}
.ucs-share-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:64px;padding:12px 14px;border-radius:12px;border:1px solid #2c2f37;background:#1d2027;color:#fff;font:inherit;text-align:left;cursor:pointer}
.ucs-share-opt b{font-size:16px}
.ucs-share-opt span{font-size:13px;color:#b9bcc4}
.ucs-share-opt.is-red{background:linear-gradient(135deg,#e10600,#9b0400);border-color:#e10600}
.ucs-share-opt.is-red span{color:#ffe1df}
.ucs-share-opt:disabled{opacity:.7}
.ucs-share-price{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;border-radius:12px;background:#0d0e12;border:1px solid #2c2f37}
.ucs-share-price button{min-height:44px;border:0;border-radius:9px;background:transparent;color:#b9bcc4;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.ucs-share-price button[aria-checked="true"]{background:#fff;color:#111}
.ucs-share-price button:disabled{opacity:.45;cursor:not-allowed}
.ucs-share-price-note{margin:-4px 2px 0;font-size:12px;color:#9a9ea8}
.ucs-share-cancel{min-height:48px;border-radius:12px;border:0;background:transparent;color:#b9bcc4;font:inherit;font-size:15px;cursor:pointer}

/* ---- Feedback kit (confirm modal, toast undo, busy, required, inline errors) ---- */
.ucs-confirm{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px}
.ucs-confirm-back{position:absolute;inset:0;background:rgba(2,6,23,.62);backdrop-filter:blur(2px)}
.ucs-confirm-card{position:relative;width:min(440px,100%);background:var(--card-solid,#fff);color:var(--text,#0b1424);border:1px solid var(--line,rgba(47,140,255,.28));border-radius:20px;padding:22px 20px 18px;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center}
[data-theme="dark"] .ucs-confirm-card,:root:not([data-theme="light"]) .ucs-confirm-card{background:#0f1a2e;color:#fff}
[data-theme="light"] .ucs-confirm-card{background:#fff;color:#0b1424}
.ucs-confirm-icon{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:rgba(29,100,200,.14);color:#1d64c8}
.ucs-confirm-icon svg{width:28px;height:28px}
.ucs-confirm.is-danger .ucs-confirm-icon{background:rgba(217,45,32,.14);color:#d92d20}
.ucs-confirm-photo{display:block;width:132px;height:132px;margin:4px auto 12px;border-radius:50%;object-fit:cover;border:3px solid var(--line,rgba(47,140,255,.28));background:rgba(127,127,127,.15)}
.ucs-confirm-photo.is-empty{background:rgba(127,127,127,.18) url("/images/avatars/avatar-sales-01-512.webp") center/cover;opacity:.6}
.ucs-confirm-warn{margin:8px 0 0;padding:8px 12px;border-radius:12px;background:rgba(245,158,11,.16);color:#b45309;font-weight:700;font-size:14px;text-align:left}
[data-theme="dark"] .ucs-confirm-warn,:root:not([data-theme="light"]) .ucs-confirm-warn{color:#fbbf24}
[data-theme="light"] .ucs-confirm-warn{color:#92400e}
.ucs-confirm-card h2{margin:0 0 6px;font:700 19px/1.35 Prompt,Sarabun,sans-serif}
.ucs-confirm-card p{margin:0 0 14px;opacity:.9;line-height:1.5;white-space:pre-line}
.ucs-confirm-card p:empty{display:none}
.ucs-confirm-field{display:flex;flex-direction:column;gap:6px;text-align:left;margin:0 0 14px;font-weight:600}
.ucs-confirm-field textarea{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--line,#c9d6e8);padding:10px;font:inherit;background:var(--field,#fff);color:inherit}
.ucs-confirm-check{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid var(--line,#c9d6e8);cursor:pointer;min-width:0}
.ucs-confirm-check input{width:20px;height:20px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--gold,#d4a73a)}
.ucs-confirm-check span{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ucs-confirm-check small{opacity:.8;font-weight:400}
.ucs-confirm-acts{display:flex;gap:10px;justify-content:center}
.ucs-confirm-acts .btn{flex:1 1 0;min-height:46px}
body.ucs-confirm-on{overflow:hidden}
@media (max-width:600px){.ucs-confirm{place-items:end center;padding:0}.ucs-confirm-card{border-radius:20px 20px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:no-preference){.ucs-confirm-card{animation:ucs-cf-in .18s ease}@keyframes ucs-cf-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}}
.btn.danger{background:#b42318;color:#fff;border-color:#b42318}
.btn.danger:hover{background:#912018}
.ucs-toast.has-undo{display:flex;align-items:center;gap:12px;pointer-events:auto}
.ucs-toast.has-undo>span{flex:1}
.ucs-toast-undo{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:10px;padding:6px 12px;font:700 14px Sarabun,sans-serif;cursor:pointer;min-height:36px}
.btn.is-busy,.icon-btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.btn.is-busy::after,.icon-btn.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid currentColor;border-color:#fff #fff transparent transparent;animation:ucs-spin .7s linear infinite}
.btn:not(.gold):not(.danger):not(.primary).is-busy::after{border-color:#1d64c8 #1d64c8 transparent transparent}
@keyframes ucs-spin{to{transform:rotate(360deg)}}
.req-star{color:#d92d20;font-weight:800}
[data-theme="dark"] .req-star,:root:not([data-theme="light"]) .req-star{color:#ff8a80}
[data-theme="light"] .req-star{color:#c4170c}
.req-star.is-publish{color:#b45309}
[data-theme="dark"] .req-star.is-publish,:root:not([data-theme="light"]) .req-star.is-publish{color:#fbbf24}
[data-theme="light"] .req-star.is-publish{color:#a14a04}
.req-legend{font-size:13px;opacity:.95;margin:4px 0 8px}
.is-invalid,.combo .combo-input.is-invalid{border-color:#d92d20!important;box-shadow:0 0 0 3px rgba(217,45,32,.2)!important}
.field-err{display:block;color:#c4170c;font-size:13px;font-weight:600;margin-top:2px}
[data-theme="dark"] .field-err,:root:not([data-theme="light"]) .field-err{color:#ffb4a8}
[data-theme="light"] .field-err{color:#b42318}
.icon-btn.has-label{width:auto;padding:0 12px;gap:6px}
.icon-btn.has-label:not(.is-busy)::after{display:none}
.icon-btn-txt{font:700 13px/1 Prompt,Sarabun,sans-serif;white-space:nowrap}
.btn.danger-ghost{background:transparent;color:#b42318;border-color:#b42318}
[data-theme="dark"] .btn.danger-ghost{color:#ff8a80;border-color:#ff8a80}
.req-legend{margin:4px 0 8px;font-size:13px}

/* Shared profile-photo avatar (UcsUi.avatarDropHtml), same as ทีมงาน › โปรไฟล์. */
.ucs-avatar-drop{display:flex;flex-direction:column;align-items:center;text-align:center;margin:10px 0 14px}
.ucs-avatar-drop .staff-shot-hit,.ucs-avatar-drop .staff-shot-hit.is-drag,.ucs-avatar-drop .staff-shot-hit.has-file{width:132px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;align-items:center;cursor:pointer}
.ucs-avatar-drop .staff-shot-hit .file-drop-empty,.ucs-avatar-drop .staff-shot-hit .file-drop-queue,.ucs-avatar-drop .staff-shot-hit .file-drop-browse{display:none!important}
.ucs-avatar-drop .staff-shot-frame{position:relative;width:132px;height:132px}
.ucs-avatar-drop .staff-shot-frame .person-photo,.ucs-avatar-drop .staff-shot-frame .face-slot{width:132px;height:132px;border-radius:28px;border:1px solid #38bdf8;box-shadow:0 0 0 1px rgba(56,189,248,.4),0 0 16px rgba(56,189,248,.55);object-fit:cover;object-position:center}
.ucs-avatar-drop .staff-shot-hit.is-drag .face-slot{box-shadow:0 0 0 2px #38bdf8,0 0 22px rgba(56,189,248,.9)}
.ucs-avatar-drop .staff-shot-pencil{position:absolute;right:-6px;bottom:-6px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0284c7;color:#fff;box-shadow:0 0 0 3px var(--card,#0b1424);pointer-events:none;z-index:2}
.ucs-avatar-drop .staff-shot-pencil svg{width:18px;height:18px;display:block}
.ucs-avatar-drop .staff-shot-tap{margin:8px 0 0;padding:0;border:0;background:none;color:#38bdf8;font:600 13px/1.3 "Noto Sans Thai",Sarabun,sans-serif;cursor:pointer}
.ucs-avatar-drop .staff-shot-hint{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.35}
[data-theme="light"] .ucs-avatar-drop .staff-shot-frame .person-photo,[data-theme="light"] .ucs-avatar-drop .staff-shot-frame .face-slot{border-color:#0284c7;box-shadow:0 0 0 1px rgba(2,132,199,.28),0 0 14px rgba(14,165,233,.45)}
[data-theme="light"] .ucs-avatar-drop .staff-shot-hit.is-drag .face-slot{box-shadow:0 0 0 2px #0284c7,0 0 18px rgba(2,132,199,.45)}
[data-theme="light"] .ucs-avatar-drop .staff-shot-tap{color:#0369a1}
.ucs-avatar-drop .staff-shot-hit .media-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ucs-avatar-drop .face-slot{display:block;overflow:hidden}
.ucs-avatar-drop .face-slot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Photo action buttons: same look as the staff profile (admin .btn / .btn.gold / .btn.danger-ghost), usable on pages without admin CSS. */
.ucs-photo-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 0}
.ucs-photo-actions .btn{border:1px solid var(--btn-secondary-border,rgba(47,140,255,.7));background:var(--btn-secondary-bg,transparent);color:var(--btn-secondary-ink,inherit);border-radius:14px;padding:12px 16px;min-height:48px;font:700 15px/1.2 "Noto Sans Thai",sans-serif;cursor:pointer;max-width:100%}
.ucs-photo-actions .btn.gold{background:var(--btn-primary-bg,linear-gradient(90deg,#2f8cff,#22d3ee));color:var(--btn-primary-ink,#04101f);border:0;box-shadow:var(--btn-primary-shadow,0 0 18px rgba(34,211,238,.35))}
[data-theme="light"] .ucs-photo-actions .btn.gold{background:var(--btn-primary-bg,#1d6fe0);color:var(--btn-primary-ink,#fff);box-shadow:none}
.ucs-photo-actions .btn.danger-ghost{background:transparent;color:#b42318;border-color:#b42318}
[data-theme="dark"] .ucs-photo-actions .btn.danger-ghost,:root:not([data-theme="light"]) .ucs-photo-actions .btn.danger-ghost{color:#ff8a80;border-color:#ff8a80}
.ucs-del-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ucs-del-btn svg{width:18px;height:18px;flex:none}
@media (max-width:420px){.ucs-photo-actions .btn{flex:1 1 140px}}

/* Multi-field rows (owner คุณติ้ง 26 Oct 2026): desktop / notebook lay out several short fields per row; phones
   (Android / iPhone) stay one column. .ucs-row2 = an explicit pair (ชื่อ|นามสกุล, โทร|อีเมล); .ucs-fields is added by
   UcsFieldGrid to plain forms with 3+ direct label.field children. Anything that is not a short field spans the row. */
.ucs-row2{display:grid;grid-template-columns:1fr;column-gap:14px}
.ucs-row2>*{min-width:0}
@media (min-width:641px){.ucs-row2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* .ucs-row3 (27 Oct 2026): three short fields in one row from 768px (คำนำหน้า|ชื่อ|นามสกุล); phones stack. */
.ucs-row3{display:grid;grid-template-columns:1fr;column-gap:14px}
.ucs-row3>*{min-width:0}
@media (min-width:768px){.ucs-row3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ucs-fields>.ucs-row2,.ucs-fields>.ucs-row3{grid-column:1/-1}
@media (min-width:760px){
  .ucs-fields{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));column-gap:16px;align-items:start}
  .ucs-fields>*{grid-column:1/-1;min-width:0}
  .ucs-fields>.field:not(:has(textarea,.file-drop,.geo-box,.avatar-drop,[data-cal],.ucs-cal,.chips,.otp,.thai-calendar,.media-file-input,select[multiple],input[type=checkbox],input[type=radio])):not(.full):not(.span):not(.wide),
  .ucs-fields>.field.ucs-half{grid-column:auto}
  .ucs-fields .ctrl{max-width:100%}
  .ucs-fields>button,.ucs-fields>.btn,.ucs-fields>a.btn{justify-self:start;width:auto}
  .ucs-fields>[hidden],.ucs-fields>input[type=hidden]{display:none!important}
}
.field.ucs-stat b{font-size:18px}

/* Sticky bottom action bars never hide what the keyboard/picker brings into view (td-1026). */
html:has(.wiz-actions){scroll-padding-bottom:84px}
@media (max-width:900px){html:has(.wiz-actions){scroll-padding-bottom:160px}}

/* td-1026: the photo consent paragraph keeps a clear gap above the next field; toasts sit above the mobile bottom tab bar. */
.face-notice{margin-bottom:14px;padding-bottom:2px;overflow:visible}
.ucs-fields>.face-notice{grid-column:1/-1}
@media (max-width:900px){body:has(.tabbar) .ucs-toasts{bottom:calc(84px + env(safe-area-inset-bottom))}}

.bg-block .bg-pre{white-space:pre-wrap}
.bg-block .bg-dl{margin:0 0 6px}

/* Thai พ.ศ. picker (27 Oct 2026) */
.tp-wrap{position:relative;display:block;min-width:0}
.tp-btn{width:100%;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-btn.is-empty{color:var(--muted,#8b95a8)}
.tp-pop{position:absolute;z-index:1000;width:min(320px,calc(100vw - 24px));padding:10px;border-radius:14px;background:var(--panel,#0f1626);border:1px solid var(--line,#2a3550);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.tp-pop[hidden]{display:none}
.tm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tm-grid button{min-height:44px;border-radius:10px;border:1px solid var(--line,#2a3550);background:transparent;color:inherit;font:inherit;cursor:pointer}
.tm-grid button.on{background:var(--accent,#1aa0ff);color:#fff;border-color:transparent}
.tm-grid button.today{outline:2px solid var(--accent,#1aa0ff);outline-offset:-2px}
.tm-grid button:focus-visible,.tp-pop .calendar-days button:focus-visible{outline:3px solid #ffcc33;outline-offset:1px}
.tp-time-row{display:flex;align-items:end;gap:8px;margin-top:8px}.tp-time-row label{flex:1;display:grid;gap:4px;font-size:.85rem}
@media (max-width:480px){.tp-pop{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:80vh;overflow:auto}}

/* Row actions (owner คุณติ้ง 27 Oct 2026): same-size icon-only buttons, centred in one row, Thai tooltip on hover. */
.ucs-row-acts{display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px;vertical-align:middle}
.ucs-row-acts .icon-btn{width:38px;height:38px;min-width:38px;min-height:38px;margin:0;border-radius:10px}
.ucs-row-acts .icon-btn svg{width:18px;height:18px}
td.adm-act .ucs-row-acts,td .ucs-row-acts{margin:0}
.ucs-status-sel{min-width:128px;height:34px;padding:4px 28px 4px 10px;border-radius:999px;font-weight:700;font-size:13px}
.ucs-status-sel.st-pending{color:#b45309;border-color:#f59e0b}
.ucs-status-sel.st-admitted{color:#15803d;border-color:#22c55e}
.ucs-status-sel.st-rejected{color:#b42318;border-color:#ef4444}
@media (max-width:640px){.ucs-row-acts{justify-content:flex-start}.ucs-row-acts .icon-btn{width:44px;height:44px;min-width:44px;min-height:44px}}
/* TD 27 Oct 2026 (md=20261027): status dropdown readable in both themes — closed and opened list, explicit option colors. */
.ucs-status-sel{color-scheme:dark;background-color:#0b1424;color:#ffffff}
.ucs-status-sel option{background-color:#0b1424;color:#ffffff;font-weight:600}
.ucs-status-sel option:checked{background-color:#1d4ed8;color:#ffffff}
.ucs-status-sel.st-pending{color:#fbbf24}.ucs-status-sel.st-admitted{color:#4ade80}.ucs-status-sel.st-rejected{color:#f87171}
[data-theme="light"] .ucs-status-sel{color-scheme:light;background-color:#ffffff;color:#0b1424}
[data-theme="light"] .ucs-status-sel option{background-color:#ffffff;color:#0b1424}
[data-theme="light"] .ucs-status-sel option:checked{background-color:#dbeafe;color:#0b1424}
[data-theme="light"] .ucs-status-sel.st-pending{color:#92400e}[data-theme="light"] .ucs-status-sel.st-admitted{color:#166534}[data-theme="light"] .ucs-status-sel.st-rejected{color:#991b1b}
/* An invisible (opacity:0) absolute tooltip still widens the scroll area: that was the horizontal scrollbar under the
   admit tables. Render the tip only while shown, and right-align it on the last icon of a row so it stays inside. */
.icon-btn[data-tip]::after{display:none}
.icon-btn[data-tip]:hover::after,.icon-btn[data-tip]:focus-visible::after,.icon-btn.tip-on[data-tip]::after{display:block}
.ucs-row-acts .icon-btn:last-child[data-tip]::after{left:auto;right:0;transform:none}
select.ctrl.ucs-status-sel{background-color:#0b1424}
[data-theme="light"] select.ctrl.ucs-status-sel{background-color:#ffffff}

/* TD 28 Oct 2026: general buttons for pages without admin CSS (member area), same look as the back office
   (.btn / .btn.gold / .btn.ghost). :where() keeps specificity 0, so any page's own .btn rule still wins. */
:where(.btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--btn-secondary-border,rgba(47,140,255,.7));background:var(--btn-secondary-bg,transparent);color:var(--btn-secondary-ink,inherit);border-radius:14px;padding:12px 16px;min-height:48px;font:700 15px/1.2 "Noto Sans Thai",sans-serif;cursor:pointer;text-decoration:none;max-width:100%}
:where(.btn.gold){background:var(--btn-primary-bg,linear-gradient(90deg,#2f8cff,#22d3ee));color:var(--btn-primary-ink,#04101f);border:0;box-shadow:var(--btn-primary-shadow,0 0 18px rgba(34,211,238,.35))}
:where(.btn.gold:hover){filter:brightness(1.08)}
:where([data-theme="light"] .btn.gold){background:var(--btn-primary-bg,#1d6fe0);color:var(--btn-primary-ink,#fff);box-shadow:none}
:where(.btn.ghost){background:transparent;color:inherit;border:1px solid var(--btn-secondary-border,rgba(127,127,140,.5))}
:where(.btn:disabled){cursor:default}
/* td1028 income documents (shared/income-docs.js) */
.inc-notice{border:1px solid rgba(245,196,0,.35);background:rgba(245,196,0,.07);border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:13px;line-height:1.6}
.inc-notice p{margin:0}.inc-notice a{color:var(--gold,#f5c400);text-decoration:underline}
.inc-warn{margin:4px 0 0;font-size:12.5px;color:#f0a35e}
.inc-photo{margin:4px 0 0;font-size:12.5px;opacity:.8}
.inc-consent{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;font-size:14px;line-height:1.5;cursor:pointer}
.inc-consent input{margin:3px 0 0;width:18px;height:18px;flex:0 0 18px;accent-color:var(--red,#E10600);cursor:pointer}
.field label.inc-consent,label.inc-consent{display:flex;font-size:13px;line-height:1.55;color:inherit;font-weight:400;margin:12px 0 4px}
.field .inc-consent input[type=checkbox],.inc-consent input[type=checkbox]{min-height:0;padding:0;border:0;border-radius:3px;background:none!important;margin:3px 0 0;width:18px;height:18px;flex:0 0 18px}
.inc-consent>span{flex:1 1 auto;min-width:0}
.inc-consent .inc-req{white-space:nowrap}
.inc-consent.bad{outline:2px solid #e5484d;outline-offset:3px;border-radius:6px}
.inc-req{opacity:.7}
.inc-check{border:1px dashed rgba(127,127,127,.45);border-radius:10px;padding:8px 12px;margin:8px 0;font-size:13.5px}
.inc-check ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.inc-check li.ok{color:#3fb950}.inc-check li.miss{opacity:.85}
.dzf[hidden],.inc-row[hidden]{display:none!important}