/* EduShop — smooth transitions, button shine, modal animations */

:root {
 --ui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 --ui-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
 --ui-dur-open: 0.52s;
 --ui-dur-close: 0.4s;
 --ui-dur-shine: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
 :root {
 --ui-dur-open: 0.01s;
 --ui-dur-close: 0.01s;
 --ui-dur-shine: 0.01s;
 }
 .btn-shine::after { display: none; }
}

/* ── Buttons: shine + hover lift ── */
button[class*="bg-gradient-to-r"]:not(:disabled):not(.gallery-size-btn),
.btn-shine {
 position: relative;
 overflow: hidden;
 isolation: isolate;
 transition:
 transform var(--ui-dur-shine) var(--ui-ease-out),
 box-shadow 0.55s var(--ui-ease-soft),
 filter 0.4s ease,
 background-color 0.35s ease;
}

button[class*="bg-gradient-to-r"]:not(:disabled):not(.gallery-size-btn)::after,
.btn-shine::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
 105deg,
 transparent 38%,
 rgba(255, 255, 255, 0.22) 46%,
 rgba(255, 255, 255, 0.45) 50%,
 rgba(255, 255, 255, 0.22) 54%,
 transparent 62%
 );
 transform: translateX(-130%) skewX(-12deg);
 transition: transform var(--ui-dur-shine) var(--ui-ease-out);
 pointer-events: none;
 z-index: 1;
}

button[class*="bg-gradient-to-r"]:not(:disabled):not(.gallery-size-btn):hover,
.btn-shine:hover:not(:disabled) {
 transform: translateY(-2px);
 box-shadow: 0 14px 32px -10px rgba(234, 88, 12, 0.45);
 filter: brightness(1.03);
}

button[class*="bg-gradient-to-r"]:not(:disabled):not(.gallery-size-btn):hover::after,
.btn-shine:hover:not(:disabled)::after {
 transform: translateX(130%) skewX(-12deg);
}

button[class*="bg-gradient-to-r"]:not(:disabled):active,
.btn-shine:active:not(:disabled) {
 transform: translateY(0);
 transition-duration: 0.12s;
}

/* Solid primary / secondary buttons */
button.bg-orange-500:not(:disabled),
button.bg-orange-600:not(:disabled),
button.bg-amber-500:not(:disabled),
button.bg-emerald-500:not(:disabled),
button.bg-blue-500:not(:disabled),
button.bg-violet-500:not(:disabled),
button.bg-rose-500:not(:disabled),
.btn-soft {
 transition:
 transform 0.45s var(--ui-ease-out),
 background-color 0.35s ease,
 box-shadow 0.45s ease,
 color 0.25s ease,
 border-color 0.25s ease;
}

button.bg-orange-500:not(:disabled):hover,
button.bg-orange-600:not(:disabled):hover,
button.bg-amber-500:not(:disabled):hover,
button.bg-emerald-500:not(:disabled):hover,
button.bg-blue-500:not(:disabled):hover,
button.bg-violet-500:not(:disabled):hover,
button.bg-rose-500:not(:disabled):hover,
.btn-soft:hover:not(:disabled) {
 transform: translateY(-1px);
 box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.28);
}

button.rounded-full:not(:disabled),
button.rounded-lg:not(:disabled):not(.gallery-size-btn),
button.rounded-xl:not(:disabled):not(.gallery-size-btn) {
 transition:
 transform 0.4s var(--ui-ease-out),
 background-color 0.3s ease,
 color 0.25s ease,
 box-shadow 0.35s ease;
}

button.rounded-full:not(:disabled):hover,
button.rounded-lg:not(:disabled):not(.gallery-size-btn):hover,
button.rounded-xl:not(:disabled):not(.gallery-size-btn):hover {
 transform: scale(1.04);
}

/* Tab buttons */
#student-tabs-nav button,
.flex.border-b.border-slate-200 button {
 transition: color 0.35s ease, border-color 0.35s ease, background-color 0.3s ease;
}

/* ครู / นักเรียน — มือถือ: bottom nav | จอใหญ่: แท็บด้านบน */
.teacher-mode-nav {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 45;
 padding: 0;
 padding-bottom: env(safe-area-inset-bottom, 0px);
 background: #fff;
 border-top: 1px solid rgb(226 232 240);
 box-shadow: 0 -4px 16px -8px rgb(15 23 42 / 0.08);
}
.teacher-mode-nav__inner {
 display: flex;
 gap: 0;
 width: 100%;
 max-width: none;
 margin: 0;
 padding: 0;
 background: transparent;
 border: none;
 border-radius: 0;
 box-shadow: none;
}
.teacher-nav-item {
 position: relative;
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.1875rem;
 min-height: 3.5rem;
 padding: 0.375rem 0.25rem 0.3125rem;
 border: none;
 border-radius: 0;
 background: transparent;
 color: rgb(100 116 139);
 font-size: 0.625rem;
 font-weight: 600;
 line-height: 1.1;
 cursor: pointer;
 transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
 -webkit-tap-highlight-color: transparent;
}
.teacher-nav-item + .teacher-nav-item {
 border-left: 1px solid rgb(241 245 249);
}
.teacher-nav-item::before {
 content: "";
 position: absolute;
 top: 0;
 left: 18%;
 right: 18%;
 height: 2px;
 border-radius: 0 0 2px 2px;
 background: transparent;
 transition: background-color 0.2s ease;
}
.teacher-nav-item:focus {
 outline: none;
}
.teacher-nav-item:focus-visible {
 outline: 2px solid rgb(249 115 22);
 outline-offset: -2px;
}
.teacher-nav-item[data-active="true"] {
 color: rgb(234 88 12);
 font-weight: 700;
}
.teacher-nav-item[data-active="true"]::before {
 background: rgb(249 115 22);
}
.teacher-nav-item:not([data-active="true"]):active {
 color: rgb(71 85 105);
}
.teacher-nav-item__icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 1.25rem;
 height: 1.25rem;
 font-size: 1.0625rem;
 line-height: 1;
}
.teacher-nav-item__label {
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-align: center;
}
.teacher-nav-item__label-short {
 display: none;
}
@media (max-width: 767px) {
 body.has-teacher-nav #student-tabs-nav,
 body.has-student-nav #student-tabs-nav {
 display: none !important;
 }
 body.has-teacher-nav main.container,
 body.has-student-nav main.container {
 padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
 }
 body.has-teacher-nav footer,
 body.has-student-nav footer {
 margin-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
 }
 body.has-teacher-nav #toast-notification,
 body.has-student-nav #toast-notification {
 bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
 }
}
@media (max-width: 400px) {
 .teacher-nav-item__label-full {
 display: none;
 }
 .teacher-nav-item__label-short {
 display: inline;
 }
}
@media (min-width: 768px) {
 body.has-teacher-nav #teacher-mode-switch {
 display: none !important;
 }
 body.has-student-nav #student-mode-switch {
 display: none !important;
 }
 body.has-student-nav #student-tabs-nav {
 display: flex !important;
 }
 body.has-teacher-nav main.container,
 body.has-student-nav main.container {
 padding-bottom: 1.5rem;
 }
 body.has-teacher-nav footer,
 body.has-student-nav footer {
 margin-bottom: 0;
 }
 body.has-teacher-nav #toast-notification,
 body.has-student-nav #toast-notification {
 bottom: 1.25rem;
 }
}
@media (prefers-reduced-motion: reduce) {
 .teacher-nav-item {
 transition: none;
 }
}

/* Product cards */
.product-card {
 transition: transform 0.45s var(--ui-ease-out), box-shadow 0.45s ease;
}
.product-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 16px 32px -16px rgba(15, 23, 42, 0.18);
}
.product-card-image img {
 transition: transform 0.55s var(--ui-ease-out);
}
.product-card:hover .product-card-image img {
 transform: scale(1.06);
}

/* ── Modal / overlay transitions ── */
.ui-overlay.ui-opening {
 animation: ui-overlay-in var(--ui-dur-open) var(--ui-ease-out) forwards;
}
.ui-overlay.ui-closing {
 animation: ui-overlay-out var(--ui-dur-close) var(--ui-ease-soft) forwards;
}

.ui-overlay.ui-opening > .ui-modal-panel,
.ui-overlay.ui-opening #swal-panel {
 animation: ui-modal-in var(--ui-dur-open) var(--ui-ease-out) forwards;
}
.ui-overlay.ui-closing > .ui-modal-panel,
.ui-overlay.ui-closing #swal-panel {
 animation: ui-modal-out var(--ui-dur-close) var(--ui-ease-soft) forwards;
}

#cart-modal.ui-opening #cart-modal-panel {
 animation: ui-slide-in-right 0.55s var(--ui-ease-out) forwards;
}
#cart-modal.ui-closing #cart-modal-panel {
 animation: ui-slide-out-right var(--ui-dur-close) var(--ui-ease-soft) forwards;
}

#product-gallery-modal.ui-opening > .ui-modal-panel {
 animation: ui-modal-in var(--ui-dur-open) var(--ui-ease-out) forwards;
}
#product-gallery-modal.ui-closing > .ui-modal-panel {
 animation: ui-modal-out var(--ui-dur-close) var(--ui-ease-soft) forwards;
}

@keyframes ui-overlay-in {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes ui-overlay-out {
 from { opacity: 1; }
 to { opacity: 0; }
}
@keyframes ui-modal-in {
 from {
 opacity: 0;
 transform: scale(0.94) translateY(14px);
 }
 to {
 opacity: 1;
 transform: scale(1) translateY(0);
 }
}
@keyframes ui-modal-out {
 from {
 opacity: 1;
 transform: scale(1) translateY(0);
 }
 to {
 opacity: 0;
 transform: scale(0.96) translateY(10px);
 }
}
@keyframes ui-slide-in-right {
 from { transform: translateX(100%); opacity: 0.6; }
 to { transform: translateX(0); opacity: 1; }
}
@keyframes ui-slide-out-right {
 from { transform: translateX(0); opacity: 1; }
 to { transform: translateX(100%); opacity: 0.6; }
}

/* Collapsible admin panels */
.admin-collapse-body {
 display: none;
}
.admin-collapse-body.is-open {
 display: block;
 animation: admin-panel-open 0.42s var(--ui-ease-out);
}
@keyframes admin-panel-open {
 from { opacity: 0; transform: translateY(-8px); }
 to { opacity: 1; transform: translateY(0); }
}

.rt-content-fade {
 animation: ui-tab-in 0.42s var(--ui-ease-out);
}

.rt-row-exit {
 opacity: 0;
 transform: translateX(8px);
 transition: opacity 0.28s var(--ui-ease-out), transform 0.28s var(--ui-ease-out);
 pointer-events: none;
}

/* ครู — รายชื่อมือถือ */
.rt-mobile-list {
 display: flex;
 flex-direction: column;
}
.rt-card {
 padding: 0.5rem 0.75rem;
 background: #fff;
 border-bottom: 1px solid rgb(241 245 249);
}
.rt-card:last-child {
 border-bottom: none;
}
.rt-card--empty {
 padding-top: 0.375rem;
 padding-bottom: 0.375rem;
 background: rgb(248 250 252);
}
.rt-card--empty .rt-card-index {
 background: rgb(241 245 249);
 color: rgb(148 163 184);
 box-shadow: inset 0 0 0 1px rgb(226 232 240);
}
.rt-card--empty .rt-card-id {
 color: rgb(203 213 225);
}
.rt-row--empty {
 background: rgb(248 250 252 / 0.65);
}
.rt-row--empty:hover {
 background: rgb(241 245 249) !important;
}
.rt-card-top {
 display: flex;
 align-items: flex-start;
 gap: 0.5rem;
}
.rt-card-index {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.25rem;
 height: 1.25rem;
 margin-top: 0.125rem;
 border-radius: 0.3125rem;
 background: rgb(241 245 249);
 font-size: 0.625rem;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 color: rgb(100 116 139);
}
.rt-card--pending .rt-card-index {
 background: rgb(254 243 199);
 color: rgb(180 83 9);
}
.rt-card--approved .rt-card-index {
 background: rgb(219 234 254);
 color: rgb(29 78 216);
}
.rt-card-identity {
 flex: 1;
 min-width: 0;
}
.rt-card-title-row {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 0.375rem;
}
.rt-card-name {
 margin: 0;
 font-size: 0.8125rem;
 font-weight: 700;
 line-height: 1.2;
 color: rgb(15 23 42);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 min-width: 0;
}
.rt-card-name--muted {
 color: rgb(100 116 139);
}
.rt-card-prefix {
 margin-right: 0.1875rem;
 font-size: 0.625rem;
 font-weight: 500;
 color: rgb(148 163 184);
}
.rt-card-id {
 margin: 0.0625rem 0 0;
 font-size: 0.5625rem;
 font-weight: 500;
 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 color: rgb(148 163 184);
 line-height: 1.2;
}
.rt-card-status {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 gap: 0.1875rem;
 padding: 0.125rem 0.375rem;
 border-radius: 9999px;
 font-size: 0.5rem;
 font-weight: 700;
 line-height: 1.15;
 white-space: nowrap;
}
.rt-card-status i {
 font-size: 0.4375rem;
}
.rt-card-meta {
 margin-top: 0.375rem;
 padding-top: 0.375rem;
 border-top: 1px solid rgb(241 245 249);
 font-size: 0.5625rem;
 line-height: 1.25;
 color: rgb(71 85 105);
}
.rt-card-meta-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.5rem;
}
.rt-card-meta-time {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.125rem;
 font-variant-numeric: tabular-nums;
}
.rt-ts {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 font-weight: 600;
 white-space: nowrap;
}
.rt-ts--ordered {
 color: rgb(29 78 216);
}
.rt-ts--ordered .rt-ts-icon {
 color: rgb(37 99 235);
}
.rt-ts--approved {
 color: rgb(20 83 45);
}
.rt-ts--approved .rt-ts-icon {
 color: rgb(22 101 52);
}
.rt-ts-icon {
 font-size: 0.625rem;
 flex-shrink: 0;
}
.rt-ts-stack {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 0.125rem;
}
.rt-ts-by {
 display: inline-flex;
 align-items: center;
 gap: 0.2rem;
 max-width: 9rem;
 font-size: 0.625rem;
 font-weight: 600;
 line-height: 1.2;
 color: rgb(51 65 85);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.rt-ts-by-icon {
 font-size: 0.5625rem;
 color: rgb(100 116 139);
 flex-shrink: 0;
}
.rt-card-meta-time .rt-ts-stack {
 align-items: flex-start;
}
.rt-card-meta-sum {
 display: inline-flex;
 align-items: baseline;
 gap: 0.375rem;
 flex-shrink: 0;
}
.rt-card-meta-qty {
 font-weight: 600;
 color: rgb(100 116 139);
 font-variant-numeric: tabular-nums;
}
.rt-card-meta-amt {
 font-size: 0.75rem;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 color: rgb(234 88 12);
 letter-spacing: -0.02em;
}
.rt-card-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.25rem;
 margin-top: 0.3125rem;
}
.rt-card-order-lines {
 margin-top: 0.375rem;
}
.rt-item-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 max-width: 100%;
 padding: 0.125rem 0.375rem;
 border-radius: 0.3125rem;
 background: rgb(241 245 249);
 font-size: 0.5625rem;
 font-weight: 600;
 line-height: 1.2;
 color: rgb(51 65 85);
}
.rt-item-chip > span:last-child {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.rt-item-chip .rt-card-line-staff-icon {
 width: 0.5rem;
 font-size: 0.5rem;
 margin-top: 0;
}
.rt-card-line-staff-icon {
 flex-shrink: 0;
 color: rgb(100 116 139);
}
.rt-card-actions {
 margin-top: 0.4375rem;
}
.rt-card-actions-inner {
 display: flex;
 gap: 0.375rem;
}
.rt-btn {
 flex: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 min-height: 1.875rem;
 padding: 0.3125rem 0.5rem;
 border-radius: 0.4375rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 white-space: nowrap;
}
.rt-btn--approve {
 color: #fff;
 background: rgb(16 185 129);
}
.rt-btn--approve:hover {
 background: rgb(5 150 105);
}
.rt-btn--ghost {
 color: rgb(71 85 105);
 background: #fff;
 border: 1px solid rgb(226 232 240);
}
.rt-btn--ghost:hover {
 background: rgb(255 241 242);
 border-color: rgb(254 202 202);
 color: rgb(190 18 60);
}
.rt-btn--revoke {
 width: 100%;
 color: rgb(146 64 14);
 background: rgb(255 251 235);
 border: 1px solid rgb(253 230 138);
}
.rt-btn--revoke:hover {
 background: rgb(254 243 199);
}
@media (prefers-reduced-motion: reduce) {
 .rt-btn {
 transition: none;
 }
}

.ui-tab-panel {
 animation: ui-tab-in 0.48s var(--ui-ease-out);
}
.ui-view-panel {
 animation: ui-view-in 0.55s var(--ui-ease-out);
}

@keyframes ui-tab-in {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes ui-view-in {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Toast */
#toast-notification.toast-in {
 animation: ui-toast-in 0.5s var(--ui-ease-out) forwards;
}
#toast-notification.toast-out {
 animation: ui-toast-out 0.42s var(--ui-ease-soft) forwards;
}

@keyframes ui-toast-in {
 from { opacity: 0; transform: translateY(16px) scale(0.96); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ui-toast-out {
 from { opacity: 1; transform: translateY(0); }
 to { opacity: 0; transform: translateY(10px); }
}

/* Alert modal — แจ้งเตือนทุกประเภท (แทน toast มุมล่าง) */
#swal-overlay.swal-alert-mode #swal-panel {
 box-shadow:
  0 0 0 1px rgb(15 23 42 / 0.04),
  0 24px 48px -12px rgb(15 23 42 / 0.28),
  0 12px 24px -8px rgb(15 23 42 / 0.12);
}
#swal-overlay.swal-alert-mode #swal-icon-wrap {
 animation: swal-alert-icon-in 0.58s var(--ui-ease-out) forwards;
}
#swal-overlay.swal-alert-mode #swal-title {
 animation: swal-alert-text-in 0.45s var(--ui-ease-out) 0.08s both;
}
#swal-overlay.swal-alert-mode #swal-text:not(.hidden) {
 animation: swal-alert-text-in 0.45s var(--ui-ease-out) 0.14s both;
}
#swal-overlay.swal-alert-mode .swal-alert-footer {
 border-top: 1px solid rgb(241 245 249);
 padding: 0.875rem 1.25rem 1.125rem;
}
#swal-overlay.swal-alert-mode .swal-alert-ok {
 width: 100%;
 padding: 0.75rem 1rem;
 border-radius: 0.75rem;
 font-size: 0.875rem;
 font-weight: 700;
 color: #fff;
 background: linear-gradient(135deg, rgb(249 115 22), rgb(234 88 12));
 box-shadow: 0 4px 14px rgb(249 115 22 / 0.35);
 transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#swal-overlay.swal-alert-mode .swal-alert-ok:hover {
 filter: brightness(1.05);
 box-shadow: 0 6px 18px rgb(249 115 22 / 0.42);
}
#swal-overlay.swal-alert-mode .swal-alert-ok:active {
 transform: scale(0.98);
}
#swal-overlay.swal-alert-mode.swal-alert--error .swal-alert-ok {
 background: linear-gradient(135deg, rgb(244 63 94), rgb(225 29 72));
 box-shadow: 0 4px 14px rgb(244 63 94 / 0.32);
}
#swal-overlay.swal-alert-mode.swal-alert--error .swal-alert-ok:hover {
 box-shadow: 0 6px 18px rgb(244 63 94 / 0.4);
}
#swal-overlay.swal-alert-mode.swal-alert--success .swal-alert-ok {
 background: linear-gradient(135deg, rgb(16 185 129), rgb(5 150 105));
 box-shadow: 0 4px 14px rgb(16 185 129 / 0.32);
}
#swal-overlay.swal-alert-mode.swal-alert--success .swal-alert-ok:hover {
 box-shadow: 0 6px 18px rgb(16 185 129 / 0.4);
}
@keyframes swal-alert-icon-in {
 from { opacity: 0; transform: scale(0.7); }
 65% { transform: scale(1.05); }
 to { opacity: 1; transform: scale(1); }
}
@keyframes swal-alert-text-in {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
 #swal-overlay.swal-alert-mode #swal-icon-wrap,
 #swal-overlay.swal-alert-mode #swal-title,
 #swal-overlay.swal-alert-mode #swal-text {
  animation: none;
 }
}

/* Admin dispatch panel */
.adm-dispatch .adm-segment .admin-order-filter-btn {
 padding: 0.375rem 0.75rem;
 font-size: inherit;
 font-weight: inherit;
 line-height: 1.25;
 color: rgb(71 85 105);
 border-radius: 0.375rem;
 white-space: nowrap;
 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.adm-dispatch .adm-segment .admin-order-filter-btn[data-active="true"] {
 background: #fff;
 color: rgb(15 23 42);
 font-weight: 600;
 box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.adm-dispatch .adm-segment .admin-order-filter-btn:not([data-active="true"]):hover {
 color: rgb(15 23 42);
}
.adm-dispatch-table thead th {
 background: rgb(248 250 252);
}
.adm-dispatch-table th,
.adm-dispatch-table td {
 white-space: nowrap;
 vertical-align: middle;
}
.adm-dispatch-scroll {
 overflow: visible;
}
.adm-room-list {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 padding: 0.5rem 0.625rem;
 align-items: stretch;
}
.adm-room-block {
 flex: 0 0 auto;
 border: 1px solid rgb(226 232 240);
 border-left: 3px solid rgb(234 88 12);
 border-radius: 0.625rem;
 overflow: hidden;
 background: #fff;
 box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
 transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.adm-room-block:hover {
 box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.adm-room-block--paid {
 border-color: rgb(167 243 208);
 border-left-color: rgb(16 185 129);
 background: rgb(236 253 245);
 box-shadow: 0 1px 2px rgb(16 185 129 / 0.1);
}
.adm-room-block--paid:hover {
 box-shadow: 0 4px 12px rgb(16 185 129 / 0.14);
}
.adm-room-block--paid .adm-room-block-hdr,
.adm-room-block--paid .adm-room-block-body {
 background: transparent;
}
.adm-room-block--paid.adm-room-block--open .adm-room-block-hdr {
 border-bottom-color: rgb(187 247 208);
}
.adm-room-block-hdr {
 display: flex;
 align-items: center;
 gap: 0.4375rem;
 padding: 0.375rem 0.625rem;
 background: #fff;
 border-bottom: 1px solid transparent;
 min-height: 2.125rem;
}
.adm-room-block--open .adm-room-block-hdr {
 border-bottom-color: rgb(241 245 249);
}
.adm-room-toggle {
 display: flex;
 align-items: center;
 gap: 0.375rem;
 flex: 1 1 auto;
 min-width: 0;
 padding: 0;
 margin: 0;
 border: 0;
 background: transparent;
 text-align: left;
 cursor: pointer;
 color: inherit;
 font: inherit;
 overflow-x: auto;
 overflow-y: visible;
 scrollbar-width: none;
 -ms-overflow-style: none;
}
.adm-room-toggle::-webkit-scrollbar {
 display: none;
}
.adm-room-toggle:focus-visible {
 outline: 2px solid rgb(234 88 12);
 outline-offset: 2px;
 border-radius: 0.375rem;
}
.adm-room-chevron {
 flex-shrink: 0;
 width: 0.9375rem;
 height: 0.9375rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 0.5rem;
 color: rgb(148 163 184);
 background: rgb(248 250 252);
 border: 1px solid rgb(226 232 240);
 border-radius: 999px;
 transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.adm-room-block--open .adm-room-chevron {
 transform: rotate(90deg);
 color: rgb(234 88 12);
 background: rgb(255 247 237);
 border-color: rgb(254 215 170);
}
.adm-room-title {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 font-size: 0.75rem;
 font-weight: 800;
 color: rgb(15 23 42);
 white-space: nowrap;
 flex-shrink: 0;
 letter-spacing: -0.01em;
}
.adm-room-title i {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.125rem;
 height: 1.125rem;
 font-size: 0.5625rem;
 color: rgb(234 88 12);
 background: rgb(255 247 237);
 border: 1px solid rgb(254 215 170);
 border-radius: 0.3125rem;
 flex-shrink: 0;
}
.adm-room-teachers {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.0625rem 0.4375rem;
 font-size: 0.625rem;
 font-weight: 600;
 color: rgb(51 65 85);
 background: rgb(248 250 252);
 border: 1px solid rgb(226 232 240);
 border-radius: 999px;
 white-space: nowrap;
 flex-shrink: 0;
}
.adm-room-teachers i {
 font-size: 0.5625rem;
 color: rgb(100 116 139);
 flex-shrink: 0;
}
.adm-room-teachers-sep {
 color: rgb(203 213 225);
 font-weight: 400;
}
.adm-room-teachers--empty {
 color: rgb(148 163 184);
 background: rgb(248 250 252);
 border-color: rgb(241 245 249);
 font-weight: 500;
}
.adm-room-teachers--empty i {
 color: rgb(203 213 225);
}
.adm-room-teachers-group {
 display: inline-flex;
 align-items: center;
 flex-wrap: nowrap;
 gap: 0.3125rem;
 flex-shrink: 0;
}
.adm-room-teacher-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.125rem 0.4375rem;
 font-size: 0.625rem;
 font-weight: 600;
 line-height: 1.2;
 color: rgb(51 65 85);
 background: rgb(248 250 252);
 border: 1px solid rgb(226 232 240);
 border-radius: 999px;
 white-space: nowrap;
 flex-shrink: 0;
 cursor: pointer;
 font-family: inherit;
 transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.adm-room-teacher-badge:hover {
 background: rgb(241 245 249);
 border-color: rgb(203 213 225);
}
.adm-room-teacher-badge:focus-visible {
 outline: 2px solid rgb(234 88 12);
 outline-offset: 2px;
}
.adm-room-teacher-badge > i:first-child {
 font-size: 0.5625rem;
 color: rgb(100 116 139);
 flex-shrink: 0;
}
.adm-room-teacher-badge--paid {
 color: rgb(6 78 59);
 background: rgb(209 250 229);
 border-color: rgb(52 211 153);
 box-shadow: 0 1px 0 rgb(255 255 255 / 0.45) inset;
}
.adm-room-teacher-badge--paid:hover {
 background: rgb(167 243 208);
 border-color: rgb(16 185 129);
}
.adm-room-teacher-badge--paid > i:first-child,
.adm-room-teacher-badge-check {
 color: rgb(5 150 105);
}
.adm-room-teacher-badge-check {
 font-size: 0.5625rem;
 flex-shrink: 0;
}
.adm-room-teacher-badge--static {
 cursor: default;
}
.adm-room-teacher-badge--static:hover {
 background: rgb(248 250 252);
 border-color: rgb(226 232 240);
}
.adm-room-teacher-badge--static.adm-room-teacher-badge--paid:hover {
 background: rgb(209 250 229);
 border-color: rgb(52 211 153);
}
.adm-room-teachers--paid {
 background: rgb(236 253 245);
 border-color: rgb(167 243 208);
}
.adm-room-teachers--paid > i {
 color: rgb(16 185 129);
}
.adm-room-teacher-name--paid {
 color: rgb(6 95 70);
 font-weight: 800;
}
.adm-room-stats {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 flex: 0 0 auto;
 min-width: 0;
}
.adm-room-pill {
 display: inline-flex;
 align-items: center;
 gap: 0.1875rem;
 padding: 0.125rem 0.4375rem;
 font-size: 0.625rem;
 line-height: 1.2;
 white-space: nowrap;
 border: 1px solid rgb(226 232 240);
 border-radius: 999px;
 background: rgb(248 250 252);
 flex-shrink: 0;
}
.adm-room-pill i {
 font-size: 0.5625rem;
 flex-shrink: 0;
}
.adm-room-pill-label {
 font-weight: 700;
}
.adm-room-pill-val {
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 color: rgb(15 23 42);
}
.adm-room-pill--orders {
 color: rgb(100 116 139);
 background: rgb(248 250 252);
 border-color: rgb(226 232 240);
}
.adm-room-pill--orders i {
 color: rgb(100 116 139);
}
.adm-room-pill--student {
 color: rgb(29 78 216);
 background: rgb(239 246 255);
 border-color: rgb(191 219 254);
}
.adm-room-pill--student i {
 color: rgb(37 99 235);
}
.adm-room-pill--teacher {
 color: rgb(107 33 168);
 background: rgb(250 245 255);
 border-color: rgb(233 213 255);
}
.adm-room-pill--teacher i {
 color: rgb(126 34 206);
}
.adm-room-pill--total {
 color: rgb(194 65 12);
 background: rgb(255 247 237);
 border-color: rgb(254 215 170);
}
.adm-room-pill--total i {
 color: rgb(234 88 12);
}
.adm-room-pill--total .adm-room-pill-val {
 color: rgb(194 65 12);
}
.adm-room-actions {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 flex-shrink: 0;
}
.adm-room-actions-row {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
}
.adm-room-bulk {
 display: inline-flex;
 align-items: center;
 gap: 0.375rem;
 flex-shrink: 0;
}
.adm-room-sizes {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.25rem;
 min-width: 0;
 flex: 1 1 auto;
}
.adm-room-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 padding: 0.1875rem 0.4375rem;
 font-size: 0.625rem;
 font-weight: 700;
 line-height: 1.2;
 border-radius: 999px;
 border: 1px solid transparent;
 white-space: nowrap;
 cursor: pointer;
 font-family: inherit;
 transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.adm-room-btn i {
 font-size: 0.5625rem;
 flex-shrink: 0;
}
.adm-room-btn-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.125rem;
 height: 1.125rem;
 padding: 0 0.25rem;
 font-size: 0.625rem;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 border-radius: 999px;
 background: rgb(255 255 255 / 0.28);
}
.adm-room-btn--pay {
 color: rgb(29 78 216);
 background: rgb(239 246 255);
 border-color: rgb(191 219 254);
}
.adm-room-btn--pay:hover {
 background: rgb(219 234 254);
 border-color: rgb(147 197 253);
 box-shadow: 0 1px 3px rgb(59 130 246 / 0.12);
}
.adm-room-btn--ship {
 color: rgb(6 95 70);
 background: rgb(236 253 245);
 border-color: rgb(167 243 208);
}
.adm-room-btn--ship:hover {
 background: rgb(209 250 229);
 border-color: rgb(110 231 183);
 box-shadow: 0 1px 3px rgb(16 185 129 / 0.12);
}
.adm-room-btn--undo,
.adm-room-btn--ghost {
 color: rgb(120 53 15);
 background: rgb(255 251 235);
 border-color: rgb(253 230 138);
}
.adm-room-btn--undo:hover,
.adm-room-btn--ghost:hover {
 background: rgb(254 243 199);
 border-color: rgb(252 211 77);
}
.adm-room-paid-group {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
}
.adm-room-paid-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.1875rem 0.4375rem;
 font-size: 0.625rem;
 line-height: 1.2;
 color: rgb(6 95 70);
 background: rgb(236 253 245);
 border: 1px solid rgb(167 243 208);
 border-radius: 999px;
 white-space: nowrap;
}
.adm-room-paid-badge > i {
 font-size: 0.625rem;
 color: rgb(16 185 129);
 flex-shrink: 0;
}
.adm-room-paid-badge strong {
 font-size: 0.625rem;
 font-weight: 800;
 color: rgb(6 78 59);
 flex-shrink: 0;
}
.adm-room-paid-by {
 display: inline-flex;
 align-items: center;
 gap: 0.1875rem;
 padding-left: 0.1875rem;
 margin-left: 0.0625rem;
 border-left: 1px solid rgb(167 243 208);
 font-size: 0.5625rem;
 font-weight: 600;
 color: rgb(4 120 87);
 white-space: nowrap;
 flex-shrink: 0;
}
.adm-room-paid-by i {
 font-size: 0.5rem;
 color: rgb(16 185 129);
 flex-shrink: 0;
}
.adm-room-paid-by > span {
 white-space: nowrap;
}
.adm-room-flag {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 padding: 0.1875rem 0.4375rem;
 font-size: 0.625rem;
 font-weight: 700;
 line-height: 1.2;
 border-radius: 999px;
 white-space: nowrap;
}
.adm-room-flag i {
 font-size: 0.625rem;
}
.adm-room-flag--pending {
 color: rgb(180 83 9);
 background: rgb(255 251 235);
 border: 1px solid rgb(253 230 138);
}
.adm-room-flag--done {
 color: rgb(6 95 70);
 background: rgb(236 253 245);
 border: 1px solid rgb(167 243 208);
}
.adm-room-btn--ship .adm-room-btn-count {
 background: rgb(6 95 70 / 0.12);
 color: rgb(6 78 59);
}
.adm-room-btn--pay .adm-room-btn-count {
 background: rgb(29 78 216 / 0.1);
 color: rgb(30 64 175);
}
@media (max-width: 900px) {
 .adm-room-block-hdr {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
 }
 .adm-room-block-hdr::-webkit-scrollbar {
  display: none;
 }
 .adm-room-toggle {
  flex: 1 0 auto;
 }
 .adm-room-actions {
  flex: 0 0 auto;
 }
}
.adm-room-block-body {
 background: #fff;
 overflow-x: auto;
 overflow-y: visible;
}
.adm-room-table {
 table-layout: fixed;
 width: 100%;
 min-width: 52rem;
}
.adm-room-table .adm-col-code { width: 7.25rem; }
.adm-room-table .adm-col-name { width: 24%; }
.adm-room-table .adm-col-items { width: 20%; }
.adm-room-table .adm-col-qty { width: 3.75rem; }
.adm-room-table .adm-col-amount { width: 5.25rem; }
.adm-room-table .adm-col-dates { width: 10.5rem; }
.adm-room-table .adm-col-status { width: 5.75rem; }
.adm-order-dates {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.125rem;
 font-size: 0.625rem;
 line-height: 1.25;
}
.adm-order-dates .rt-ts-stack {
 align-items: flex-start;
}
.adm-room-table .adm-col-actions { width: 8.25rem; }
.adm-room-table .adm-th-code,
.adm-room-table .adm-td-code { text-align: left; }
.adm-room-table .adm-th-name,
.adm-room-table .adm-td-name { text-align: left; }
.adm-room-table .adm-th-items,
.adm-room-table .adm-td-items { text-align: left; }
.adm-room-table .adm-th-qty,
.adm-room-table .adm-td-qty { text-align: center; }
.adm-room-table .adm-th-amount,
.adm-room-table .adm-td-amount { text-align: right; }
.adm-room-table .adm-th-status,
.adm-room-table .adm-td-status { text-align: center; }
.adm-room-table .adm-th-actions,
.adm-room-table .adm-td-actions { text-align: right; }
.adm-room-table .adm-td-code,
.adm-room-table .adm-td-qty,
.adm-room-table .adm-td-amount,
.adm-room-table .adm-td-status,
.adm-room-table .adm-td-actions {
 white-space: nowrap;
}
.adm-room-table .adm-td-name {
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 0;
}
.adm-room-table .adm-td-items {
 overflow: hidden;
}
.adm-room-table .adm-td-items .inline-flex {
 max-width: 100%;
 overflow: hidden;
}
.adm-room-table .adm-qty-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.25rem;
 padding: 0.125rem 0.375rem;
 border-radius: 0.25rem;
 font-size: 0.75rem;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 background: rgb(255 247 237);
 color: rgb(194 65 12);
 border: 1px solid rgb(255 237 213);
}
.adm-room-table thead th {
 position: static;
 top: auto;
 z-index: auto;
 background: rgb(248 250 252);
 border-bottom: 1px solid rgb(226 232 240);
}
.adm-room-table tbody tr {
 display: table-row;
}
.adm-room-table tbody td {
 padding: 0.375rem 0.75rem;
 font-size: 0.8125rem;
 line-height: 1.35;
}
.adm-room-table tbody tr:last-child td {
 border-bottom: none;
}
.adm-dispatch-toolbar {
    --adm-toolbar-fs: 0.8125rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    font-size: var(--adm-toolbar-fs);
    align-items: center;
}
.adm-dispatch-toolbar > * {
    flex-shrink: 0;
}
.adm-dispatch-toolbar .adm-toolbar-field,
.adm-dispatch-toolbar .admin-order-filter-btn {
    font-size: var(--adm-toolbar-fs) !important;
    line-height: 1.25;
    font-weight: 500;
}
.adm-dispatch-toolbar .adm-toolbar-icon {
    font-size: 0.75em;
    line-height: 1;
}
.adm-dispatch-toolbar .adm-filter-icon {
    font-size: 0.75em;
    opacity: 0.72;
    margin-right: 0.25rem;
    line-height: 1;
}
.adm-dispatch-toolbar .adm-filter-count {
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.1;
}
.adm-dispatch-toolbar .admin-order-filter-btn[data-active="true"] {
    font-weight: 600;
}

.teacher-global-filters {
    margin-top: 0.125rem;
}

/* รายการรอบสั่งซื้อ — ตั้งค่าระบบ */
.or-round-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}
.or-round-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.or-round-legend-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.or-round-legend-dot--on {
    background: #22c55e;
    box-shadow: 0 0 0 2px #dcfce7;
}
.or-round-legend-dot--off {
    background: #f43f5e;
    box-shadow: 0 0 0 2px #ffe4e6;
}
.or-round-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.or-round-row--current {
    box-shadow: inset 3px 0 0 #14b8a6;
}
.or-round-row--display-on {
    border-color: #86efac;
    background: #f0fdf4;
}
.or-round-row--display-off {
    border-color: #fecdd3;
    background: #fff1f2;
}
.or-round-row--current.or-round-row--display-on {
    border-color: #86efac;
    background: linear-gradient(90deg, #f0fdf4 0%, #f0fdfa 100%);
}
.or-display-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.25rem 0.375rem 0.25rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.or-display-toggle:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.65);
}
.or-display-toggle:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}
.or-display-toggle:disabled {
    cursor: default;
    opacity: 0.92;
}
.or-display-toggle-track {
    position: relative;
    width: 2.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.or-display-toggle-thumb {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.or-display-toggle--on .or-display-toggle-track {
    background: #22c55e;
}
.or-display-toggle--on .or-display-toggle-thumb {
    transform: translateX(1rem);
}
.or-display-toggle--on .or-display-toggle-text {
    color: #15803d;
}
.or-display-toggle--off .or-display-toggle-track {
    background: #f43f5e;
}
.or-display-toggle--off .or-display-toggle-thumb {
    transform: translateX(0);
}
.or-display-toggle--off .or-display-toggle-text {
    color: #be123c;
}
.or-display-toggle-text {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    min-width: 2.75rem;
    text-align: left;
}
@media (prefers-reduced-motion: reduce) {
    .or-display-toggle-track,
    .or-display-toggle-thumb,
    .or-round-row {
        transition: none;
    }
}
.or-round-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.or-round-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.or-round-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    line-height: 1.35;
}
.or-round-badge--current {
    color: #0f766e;
    background: #ccfbf1;
    border-color: #99f6e4;
}
.or-round-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.375rem 0.5625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.or-round-btn:hover {
    color: #0f766e;
    background: #ccfbf1;
    border-color: #99f6e4;
}
.or-round-btn--danger:hover {
    color: #be123c;
    background: #ffe4e6;
    border-color: #fecdd3;
}

.adm-kpi {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.15rem 0.5rem;
 border-radius: 0.25rem;
 background: rgb(248 250 252);
 border: 1px solid rgb(226 232 240);
 font-size: 0.6875rem;
 line-height: 1.2;
 white-space: nowrap;
 color: rgb(71 85 105);
}
.adm-kpi strong {
 color: rgb(15 23 42);
 font-weight: 700;
}
.adm-kpi i {
 color: rgb(148 163 184);
 font-size: 0.625rem;
}
.adm-room-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.15rem 0.5rem;
 font-size: 0.75rem;
 font-weight: 700;
 color: rgb(15 23 42);
 background: #fff;
 border: 1px solid rgb(203 213 225);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-room-badge i {
 color: rgb(234 88 12);
 font-size: 0.65rem;
}
.adm-stat-pill {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 font-size: 0.6875rem;
 font-weight: 500;
 color: rgb(100 116 139);
 white-space: nowrap;
}
.adm-stat-pill i {
 font-size: 0.6rem;
 opacity: 0.75;
}
.adm-size-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.1875rem;
 padding: 0.0625rem 0.3125rem;
 font-size: 0.625rem;
 font-weight: 600;
 border-radius: 0.3125rem;
 border: 1px solid rgb(226 232 240);
 background: rgb(248 250 252);
 color: rgb(71 85 105);
 white-space: nowrap;
 line-height: 1.35;
}
.adm-size-chip-label {
 font-weight: 700;
 color: rgb(51 65 85);
 letter-spacing: 0.01em;
}
.adm-size-chip-qty {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1rem;
 padding: 0 0.1875rem;
 font-size: 0.5625rem;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 color: rgb(234 88 12);
 background: rgb(255 247 237);
 border-radius: 0.1875rem;
}
.adm-size-chip em {
 font-style: normal;
 color: rgb(234 88 12);
}
.adm-item-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.15rem 0.4rem;
 font-size: 0.6875rem;
 font-weight: 600;
 line-height: 1;
 border-radius: 0.25rem;
 border: 1px solid rgb(226 232 240);
 background: #fff;
 color: rgb(51 65 85);
 white-space: nowrap;
}
.adm-item-badge--staff {
 background: rgb(238 242 255);
 border-color: rgb(199 210 254);
 color: rgb(67 56 202);
}
.adm-item-badge--staff i {
 font-size: 0.6rem;
 opacity: 0.85;
}
.adm-item-size {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.1rem;
 padding: 0 0.2rem;
 font-size: 0.625rem;
 font-weight: 800;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 border-radius: 0.15rem;
 background: rgb(241 245 249);
 color: rgb(51 65 85);
}
.adm-item-qty {
 font-size: 0.625rem;
 font-weight: 800;
 color: rgb(234 88 12);
}
.adm-status {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.15rem 0.45rem;
 font-size: 0.625rem;
 font-weight: 700;
 line-height: 1.2;
 border-radius: 0.25rem;
 border: 1px solid transparent;
 white-space: nowrap;
}
.adm-status i {
 font-size: 0.55rem;
}
.adm-filter-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.1rem;
 padding: 0 0.25rem;
 margin-left: 0.15rem;
 font-size: inherit;
 font-weight: 700;
 border-radius: 9999px;
 background: rgba(15, 23, 42, 0.08);
 color: rgb(51 65 85);
}
.adm-dispatch .adm-segment .admin-order-filter-btn[data-active="true"] .adm-filter-count {
 background: rgb(255 237 213);
 color: rgb(194 65 12);
}
.adm-actions {
 display: inline-flex;
 align-items: center;
 gap: 0.15rem;
 white-space: nowrap;
}
.adm-btn-ship {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.2rem 0.45rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 color: #fff;
 background: rgb(234 88 12);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-btn-ship:hover {
 background: rgb(194 65 12);
}
.adm-btn-teacher-paid {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.2rem 0.45rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 color: rgb(22 101 52);
 background: rgb(240 253 244);
 border: 1px solid rgb(134 239 172);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-btn-teacher-paid:hover {
 background: rgb(220 252 231);
}
.adm-btn-teacher-paid-undo {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.2rem 0.45rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 color: rgb(180 83 9);
 background: rgb(255 247 237);
 border: 1px solid rgb(253 186 116);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-btn-teacher-paid-undo:hover {
 background: rgb(255 237 213);
}
.adm-btn-bulk {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 padding: 0.25rem 0.55rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 color: rgb(6 95 70);
 background: rgb(236 253 245);
 border: 1px solid rgb(167 243 208);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-btn-bulk:hover {
 background: rgb(209 250 229);
}
.adm-btn-class-paid {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 padding: 0.25rem 0.55rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 color: rgb(29 78 216);
 background: rgb(239 246 255);
 border: 1px solid rgb(191 219 254);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-btn-class-paid:hover {
 background: rgb(219 234 254);
}
.adm-btn-class-paid-undo {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.25rem 0.55rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 color: rgb(180 83 9);
 background: rgb(255 247 237);
 border: 1px solid rgb(253 186 116);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-btn-class-paid-undo:hover {
 background: rgb(255 237 213);
}
.adm-btn-unship-bulk,
.adm-btn-unship {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 padding: 0.2rem 0.45rem;
 font-size: 0.6875rem;
 font-weight: 700;
 line-height: 1;
 color: rgb(180 83 9);
 background: rgb(255 247 237);
 border: 1px solid rgb(253 186 116);
 border-radius: 0.25rem;
 white-space: nowrap;
}
.adm-btn-unship-bulk {
 padding: 0.25rem 0.55rem;
}
.adm-btn-unship-bulk:hover,
.adm-btn-unship:hover {
 background: rgb(255 237 213);
}
.adm-btn-export,
.adm-btn-sheets {
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 line-height: 1;
}
.adm-btn-sheets:disabled {
 opacity: 0.55;
 cursor: wait;
}
.adm-btn-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.5rem;
 height: 1.5rem;
 border-radius: 0.25rem;
 color: rgb(148 163 184);
 flex-shrink: 0;
}
.adm-btn-icon:hover {
 color: rgb(234 88 12);
 background: rgb(255 247 237);
}
.adm-btn-icon--del:hover {
 color: rgb(225 29 72);
 background: rgb(255 241 242);
}
.adm-dispatch-summary {
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 gap: 0.5rem;
 overflow-x: auto;
}
.adm-room-table tbody tr td {
 border-bottom: 1px solid rgb(241 245 249);
}
@media (prefers-reduced-motion: reduce) {
 .adm-dispatch .adm-segment .admin-order-filter-btn {
 transition: none;
 }
}

/* ครู — กรองรายชื่อ (segment control) */
.teacher-roster-segment {
 display: flex;
 flex-wrap: nowrap;
 align-items: stretch;
 gap: 2px;
 padding: 3px;
 border-radius: 0.625rem;
 background: rgb(226 232 240 / 0.7);
 max-width: 100%;
}
@media (min-width: 640px) {
 .teacher-roster-segment {
 display: inline-flex;
 align-items: center;
 padding: 0.1875rem;
 gap: 1px;
 }
}
.teacher-roster-filter-btn {
 display: inline-flex;
 flex: 1 1 0;
 min-width: 0;
 min-height: 2rem;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 padding: 0.3125rem 0.1875rem;
 font-size: 0.625rem;
 font-weight: 500;
 line-height: 1.2;
 color: rgb(71 85 105);
 border-radius: 0.4375rem;
 white-space: nowrap;
 transition: background-color 0.15s ease, color 0.15s ease;
}
@media (min-width: 640px) {
 .teacher-roster-filter-btn {
 flex: 0 1 auto;
 min-height: 0;
 gap: 0.3125rem;
 padding: 0.375rem 0.625rem;
 font-size: 0.6875rem;
 line-height: 1.25;
 }
}
.teacher-roster-filter-btn:focus {
 outline: none;
}
.teacher-roster-filter-btn:focus-visible {
 outline: 2px solid rgb(249 115 22);
 outline-offset: -1px;
 z-index: 1;
}
.teacher-roster-filter-btn[data-active="true"] {
 background: #fff;
 color: rgb(154 52 18);
 font-weight: 600;
}
.teacher-roster-filter-btn:not([data-active="true"]):hover {
 color: rgb(15 23 42);
 background: rgb(255 255 255 / 0.55);
}
.teacher-roster-filter-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 0.875rem;
 flex-shrink: 0;
 font-size: 0.5625rem;
 color: rgb(100 116 139);
 line-height: 1;
}
.teacher-roster-filter-btn[data-active="true"] .teacher-roster-filter-icon {
 color: rgb(234 88 12);
}
.teacher-roster-filter-body {
 display: inline-flex;
 align-items: center;
 gap: 0.1875rem;
 min-width: 0;
}
@media (min-width: 640px) {
 .teacher-roster-filter-body {
 gap: 0.375rem;
 }
}
.teacher-roster-filter-label-short {
 display: none;
}
@media (max-width: 639px) {
 .teacher-roster-filter-label-full {
 display: none;
 }
 .teacher-roster-filter-label-short {
 display: inline;
 }
}
.teacher-roster-filter-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 0;
 padding: 0;
 font-size: 0.625rem;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 color: rgb(100 116 139);
 line-height: 1;
 flex-shrink: 0;
}
@media (min-width: 640px) {
 .teacher-roster-filter-count {
 min-width: 1rem;
 padding: 0 0.3rem;
 font-size: 0.5625rem;
 line-height: 1.45;
 border-radius: 9999px;
 background: rgba(15, 23, 42, 0.07);
 }
}
.teacher-roster-filter-btn[data-active="true"] .teacher-roster-filter-count {
 color: rgb(194 65 12);
}
@media (min-width: 640px) {
 .teacher-roster-filter-btn[data-active="true"] .teacher-roster-filter-count {
 background: rgb(255 237 213);
 }
}
@media (prefers-reduced-motion: reduce) {
 .teacher-roster-filter-btn {
 transition: none;
 }
}

/* แดชบอร์ดครู — รายการสั่งซื้อในตาราง */
.teacher-roster-table .teacher-order-col {
 min-width: 12rem;
 max-width: 22rem;
 width: 30%;
 white-space: normal;
 word-break: break-word;
 vertical-align: top;
}
.teacher-roster-table tbody td {
 vertical-align: top;
}
.teacher-roster-table tbody td.align-top {
 padding-top: 0.625rem;
 padding-bottom: 0.625rem;
}
.teacher-order-lines {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}
.teacher-order-lines--multi {
 padding: 0.25rem 0;
}
.teacher-order-lines--multi .teacher-order-line + .teacher-order-line {
 padding-top: 0.5rem;
 border-top: 1px dashed rgb(226 232 240);
}
.teacher-order-line-head {
 display: flex;
 align-items: flex-start;
 gap: 0.375rem;
 line-height: 1.35;
}
.teacher-order-line-name {
 flex: 1;
 min-width: 0;
 font-size: 0.6875rem;
 font-weight: 600;
 color: rgb(30 41 59);
 word-break: break-word;
}
.teacher-order-line-qty {
 flex-shrink: 0;
 align-self: flex-start;
 font-size: 0.625rem;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 color: rgb(194 65 12);
 background: rgb(255 247 237);
 padding: 0.0625rem 0.4375rem;
 border-radius: 9999px;
 white-space: nowrap;
}
.teacher-order-line-detail {
 margin: 0.125rem 0 0 1.125rem;
 font-size: 0.625rem;
 line-height: 1.35;
 color: rgb(100 116 139);
 word-break: break-word;
}
.teacher-order-line-bullet {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1rem;
 height: 1rem;
 margin-top: 0.0625rem;
 border-radius: 9999px;
 background: rgb(241 245 249);
 font-size: 0.5625rem;
 font-weight: 700;
 color: rgb(100 116 139);
}
.teacher-order-total-qty {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-width: 2.25rem;
 padding: 0.25rem 0.375rem;
 border-radius: 0.5rem;
 background: rgb(255 247 237);
 font-size: 0.8125rem;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 color: rgb(194 65 12);
 line-height: 1.1;
}
.teacher-order-total-unit {
 font-size: 0.5625rem;
 font-weight: 600;
 color: rgb(234 88 12);
}
.teacher-order-lines--mobile .teacher-order-line-name {
 font-size: 0.75rem;
}
.teacher-order-lines--mobile .teacher-order-line-detail {
 font-size: 0.6875rem;
}

/* รายงานรายห้อง — รายการสินค้าทีละบรรทัด */
.report-order-lines {
 display: flex;
 flex-direction: column;
 gap: 0.15rem;
}
.report-order-line {
 display: flex;
 align-items: flex-start;
 gap: 0.2rem;
 line-height: 1.28;
 white-space: nowrap;
}
.report-order-lines .report-order-line + .report-order-line {
 margin-top: 0;
}
.report-order-lines--detail .report-order-line {
 justify-content: center;
}
.report-order-dot {
 flex-shrink: 0;
 margin-top: 0;
}
.report-order-text {
 min-width: 0;
}
.report-order-qty {
 flex-shrink: 0;
 font-size: 0.625rem;
 font-weight: 700;
 color: rgb(194 65 12);
}
.class-report-list-wrap td.report-order-col {
 vertical-align: top;
 white-space: normal;
 line-height: 1.28;
}
.class-report-list-wrap table td,
.class-report-list-wrap table th {
 padding-top: 0.3rem;
 padding-bottom: 0.3rem;
}
.class-report-list-wrap table.list-student {
 table-layout: fixed;
}
.class-report-list-wrap table.list-student .col-no { width: 4%; }
.class-report-list-wrap table.list-student .col-id { width: 9%; }
.class-report-list-wrap table.list-student .col-prefix { width: 6%; }
.class-report-list-wrap table.list-student .col-name { width: 18%; }
.class-report-list-wrap table.list-student .col-color { width: 30%; }
.class-report-list-wrap table.list-student .col-size { width: 10%; }
.class-report-list-wrap table.list-student .col-amount { width: 7%; }
.class-report-list-wrap table.list-student .col-sign { width: 9%; }
.class-report-list-wrap table.list-student .col-note { width: 7%; }
.class-report-list-wrap table.list-student th:nth-child(5),
.class-report-list-wrap table.list-student th:nth-child(6),
.class-report-list-wrap table.list-student th:nth-child(7),
.class-report-list-wrap table.list-student th:nth-child(8) {
 white-space: normal;
 line-height: 1.15;
 vertical-align: middle;
}
.class-report-list-wrap table.list-student td:nth-child(6),
.class-report-list-wrap table.list-student td:nth-child(7) {
 white-space: nowrap;
}
.class-report-list-wrap table.list-student td:nth-child(4) {
 word-break: break-word;
 overflow-wrap: anywhere;
}
.class-report-list-wrap table.list-student td:nth-child(5) .report-order-line,
.class-report-list-wrap table.list-student td:nth-child(5) .report-order-text {
 white-space: normal;
 word-break: break-word;
 overflow-wrap: anywhere;
}

/* แดชบอร์ดครู — สรุปตัวเลข (3 โซน) */
.teacher-stats-panel {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1px;
 background: rgb(241 245 249);
 border: 1px solid rgb(226 232 240);
 border-radius: 0.75rem;
 overflow: hidden;
}
.teacher-stats-zone {
 display: contents;
}
.teacher-stat {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 min-width: 0;
 padding: 0.625rem 0.75rem;
 background: #fff;
 border: none;
 border-radius: 0;
}
.teacher-stat--urgent {
 background: rgb(255 251 235);
}
.teacher-stat--urgent .teacher-stat-badge--pending {
 background: rgb(254 243 199);
 color: rgb(217 119 6);
}
.teacher-stat--urgent .teacher-stat-value {
 color: rgb(180 83 9);
}
.teacher-stat-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 1.5rem;
 height: 1.5rem;
 border-radius: 0.375rem;
 font-size: 0.6875rem;
 line-height: 1;
}
.teacher-stat-badge--pending {
 background: rgb(254 243 199);
 color: rgb(217 119 6);
}
.teacher-stat-badge--approved {
 background: rgb(209 250 229);
 color: rgb(5 150 105);
}
.teacher-stat-badge--muted {
 width: 1.5rem;
 height: 1.5rem;
 font-size: 0.6875rem;
 background: rgb(241 245 249);
 color: rgb(100 116 139);
}
.teacher-stat-badge--total {
 display: none;
}
.teacher-stat-copy {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 0.25rem;
 min-width: 0;
 flex: 1;
}
.teacher-stat-label {
 margin: 0;
 font-size: 0.75rem;
 line-height: 1.2;
 font-weight: 600;
 color: rgb(100 116 139);
 white-space: nowrap;
}
.teacher-stat-label-short {
 display: inline;
}
.teacher-stat-label-full {
 display: none;
}
@media (min-width: 768px) {
 .teacher-stat-label-short {
 display: none;
 }
 .teacher-stat-label-full {
 display: inline;
 }
}
.teacher-stat-value {
 margin: 0;
 font-size: 1rem;
 line-height: 1.1;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 color: rgb(15 23 42);
 letter-spacing: -0.02em;
 text-align: right;
 white-space: nowrap;
}
.teacher-stat--pending .teacher-stat-value,
.teacher-stat--approved .teacher-stat-value {
 font-size: 1.0625rem;
}
.teacher-stat--combined {
 grid-column: 1 / -1;
 align-items: center;
 padding: 0.75rem 0.875rem;
 background: rgb(255 247 237);
}
.teacher-stat--combined .teacher-stat-copy {
 width: 100%;
}
.teacher-stat--combined .teacher-stat-label {
 font-size: 0.8125rem;
 font-weight: 700;
 color: rgb(124 45 18);
}
.teacher-stat--combined .teacher-stat-value {
 font-size: 1.25rem;
 color: rgb(154 52 18);
 letter-spacing: -0.025em;
}
.teacher-stat-unit {
 margin-left: 0.125rem;
 font-size: 0.6875rem;
 font-weight: 600;
 color: rgb(148 163 184);
}
.teacher-stat-hint {
 display: block;
 font-size: 0.625rem;
 font-weight: 400;
 color: rgb(148 163 184);
}
@media (min-width: 480px) {
 .teacher-stat-hint {
 display: inline;
 }
 .teacher-stat-hint::before {
 content: " · ";
 }
}
@media (min-width: 768px) and (max-width: 1023px) {
 .teacher-stats-panel {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 border-radius: 1rem;
 }
 .teacher-stat {
 flex-direction: column;
 align-items: flex-start;
 gap: 0.375rem;
 padding: 0.875rem 1rem;
 }
 .teacher-stat-copy {
 display: block;
 width: 100%;
 }
 .teacher-stat-value {
 text-align: left;
 margin-top: 0.125rem;
 }
 .teacher-stat--combined {
 grid-column: 1 / -1;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 padding: 1rem 1.125rem;
 }
 .teacher-stat--combined .teacher-stat-badge--total {
 display: inline-flex;
 width: 2rem;
 height: 2rem;
 border-radius: 0.5rem;
 background: rgb(254 215 170);
 color: rgb(154 52 18);
 }
}
@media (min-width: 1024px) {
 .teacher-stats-panel {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(10.5rem, 13.5rem);
 grid-template-rows: auto auto;
 gap: 1px;
 background: rgb(241 245 249);
 border-radius: 1rem;
 }
 .teacher-stats-zone {
 display: contents;
 }
 .teacher-stat {
 flex-direction: column;
 align-items: flex-start;
 gap: 0.5rem;
 padding: 1rem 1.125rem;
 min-height: 5.5rem;
 }
 .teacher-stat-copy {
 display: block;
 width: 100%;
 }
 .teacher-stat-value {
 text-align: left;
 white-space: normal;
 margin-top: 0.125rem;
 }
 .teacher-stat-label {
 font-size: 0.75rem;
 font-weight: 600;
 }
 .teacher-stat--pending,
 .teacher-stat--approved {
 background: rgb(248 250 252);
 }
 .teacher-stat--urgent {
 background: rgb(255 251 235);
 }
 .teacher-stat--pending .teacher-stat-value,
 .teacher-stat--approved .teacher-stat-value {
 font-size: 1.625rem;
 }
 .teacher-stat--students .teacher-stat-value,
 .teacher-stat--orders .teacher-stat-value {
 font-size: 1.375rem;
 font-weight: 800;
 }
 .teacher-stat--student-amt .teacher-stat-value,
 .teacher-stat--teacher-amt .teacher-stat-value,
 .teacher-stat--student-shirts .teacher-stat-value,
 .teacher-stat--teacher-shirts .teacher-stat-value {
 font-size: 1.25rem;
 font-weight: 700;
 }
 .teacher-stat-badge {
 width: 2rem;
 height: 2rem;
 font-size: 0.8125rem;
 }
 .teacher-stat-unit {
 font-size: 0.75rem;
 }
 .teacher-stat--combined {
 grid-column: 5;
 grid-row: 1 / -1;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 gap: 0.625rem;
 min-height: 0;
 padding: 1.25rem 1.375rem;
 background: linear-gradient(165deg, rgb(255 251 245), rgb(255 237 213));
 border-left: 1px solid rgb(254 215 170);
 }
 .teacher-stat--combined .teacher-stat-badge--total {
 display: inline-flex;
 width: 2.25rem;
 height: 2.25rem;
 border-radius: 0.5rem;
 background: rgb(254 215 170);
 color: rgb(154 52 18);
 font-size: 0.875rem;
 }
 .teacher-stat--combined .teacher-stat-label {
 font-size: 0.8125rem;
 font-weight: 700;
 color: rgb(124 45 18);
 }
 .teacher-stat--combined .teacher-stat-value {
 font-size: 1.875rem;
 font-weight: 800;
 color: rgb(154 52 18);
 }
}
@media (min-width: 1280px) {
 .teacher-stats-panel {
 grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(12rem, 15rem);
 }
 .teacher-stat {
 padding: 1.125rem 1.25rem;
 min-height: 6rem;
 }
 .teacher-stat--pending .teacher-stat-value,
 .teacher-stat--approved .teacher-stat-value {
 font-size: 1.75rem;
 }
 .teacher-stat--combined .teacher-stat-value {
 font-size: 2.125rem;
 }
}

/* รายงาน — ตาราง + สรุปยอดเงิน */
#report-overview-wrap,
#report-class-wrap,
#report-teacher-wrap {
 text-align: center;
}
#report-class-wrap .class-report-summary .space-y-2 > p,
#report-teacher-wrap .space-y-2 > p {
 text-align: center;
}
#report-class-wrap .class-report-list-wrap,
#report-teacher-wrap .class-report-list-wrap {
 display: inline-block;
 max-width: 100%;
 width: 100%;
 text-align: left;
 vertical-align: top;
}
.matrix-report-block {
 display: inline-block;
 max-width: 100%;
 text-align: left;
 vertical-align: top;
}
.matrix-report-table-wrap {
 overflow-x: auto;
 max-width: 100%;
}
.matrix-money-summary {
 display: flex;
 align-items: baseline;
 justify-content: flex-end;
 flex-wrap: wrap;
 gap: 0.375rem 0.625rem;
 margin-top: 0.5rem;
 padding-top: 0.5rem;
 border-top: 1px solid rgb(226 232 240);
}
.matrix-money-summary-label {
 display: inline-flex;
 align-items: center;
 gap: 0.375rem;
 font-size: 0.8125rem;
 font-weight: 600;
 color: rgb(100 116 139);
}
.matrix-money-summary-label i {
 color: rgb(245 158 11);
}
.matrix-money-summary-value {
 font-size: 1.25rem;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 color: rgb(154 52 18);
 letter-spacing: -0.02em;
}

.sign {
 margin-top: 1.5rem;
 font-size: 0.875rem;
 text-align: right;
 color: rgb(51 65 85);
}
.sign-inner {
 display: inline-block;
 text-align: center;
}
.sign-line {
 white-space: nowrap;
}
.sign-name {
    margin-top: 0.125rem;
}

/* แอดมิน — แก้ไขคำสั่งซื้อ (รายการ + เลือกสินค้า) */
.admin-order-section-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(30 41 59);
}
.admin-order-item-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(100 116 139);
}
.admin-order-basket-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex-shrink: 0;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
}
.admin-order-basket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgb(248 250 252);
    border-bottom: 1px solid rgb(241 245 249);
}
.admin-order-basket-total {
    font-size: 0.9375rem;
    font-weight: 800;
    color: rgb(234 88 12);
    font-variant-numeric: tabular-nums;
}
.admin-order-basket-section.is-empty .admin-order-edit-items {
    display: none;
}
.admin-order-basket-section.is-empty .admin-order-basket-header {
    border-bottom: none;
    padding: 0.375rem 0.625rem;
}
.admin-order-edit-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: min(28vh, 11rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}
.admin-order-edit-items:not(:empty) {
    min-height: 0;
}
.admin-order-edit-empty {
    display: none;
}
.admin-order-item {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.375rem 0.75rem;
    align-items: start;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgb(241 245 249);
    background: #fff;
    flex-shrink: 0;
}
.admin-order-item:last-child {
    border-bottom: none;
}
.admin-order-item-thumb {
    grid-row: 1 / span 2;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.625rem;
    overflow: hidden;
    background: rgb(241 245 249);
    border: 1px solid rgb(226 232 240);
}
.admin-order-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-order-item-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(148 163 184);
    font-size: 0.875rem;
}
.admin-order-item-body {
    grid-column: 2;
    min-width: 0;
}
.admin-order-item-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(15 23 42);
    line-height: 1.4;
    word-break: break-word;
}
.admin-order-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
}
.admin-order-item-size {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(37 99 235);
    background: rgb(239 246 255);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
}
.admin-order-item-size--editable {
    border: 1px solid rgb(191 219 254);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-order-item-size--editable:hover {
    background: rgb(219 234 254);
    border-color: rgb(147 197 253);
}
.admin-order-item-size--editable:focus-visible {
    outline: 2px solid rgb(59 130 246);
    outline-offset: 1px;
}
.admin-order-item-unit {
    font-size: 0.75rem;
    color: rgb(100 116 139);
}
.admin-order-item-unit--muted {
    color: rgb(148 163 184);
    text-decoration: line-through;
}
.admin-order-item--uncharged {
    background: rgb(248 250 252 / 0.7);
}
.admin-order-item--uncharged .admin-order-item-name {
    color: rgb(100 116 139);
}
.admin-order-charge-toggle {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(71 85 105);
    cursor: pointer;
    user-select: none;
}
.admin-order-charge-check {
    width: 0.875rem;
    height: 0.875rem;
    accent-color: rgb(234 88 12);
    cursor: pointer;
}
.admin-order-item-subtotal--free {
    color: rgb(100 116 139);
    font-weight: 600;
    font-size: 0.75rem;
}
.admin-order-item-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.375rem;
}
.admin-order-item-subtotal {
    font-size: 0.875rem;
    font-weight: 800;
    color: rgb(234 88 12);
    font-variant-numeric: tabular-nums;
}
.admin-order-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(226 232 240);
    background: #fff;
}
.admin-order-qty-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    color: rgb(100 116 139);
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-order-qty-btn:hover {
    background: rgb(255 237 213);
    color: rgb(234 88 12);
}
.admin-order-qty-value {
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(30 41 59);
}
.admin-order-item-remove {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: rgb(244 63 94);
    transition: background 0.15s ease;
}
.admin-order-item-remove:hover {
    background: rgb(255 241 242);
}
.admin-order-add-panel {
    border: 1px solid rgb(226 232 240);
    border-radius: 0.625rem;
    background: #fff;
    overflow: hidden;
}
.admin-order-add-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.625rem;
    background: rgb(248 250 252);
    border-bottom: 1px solid rgb(241 245 249);
}
.admin-order-add-title {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(51 65 85);
}
.admin-order-picker-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.admin-order-picker-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: rgb(148 163 184);
    pointer-events: none;
}
.admin-order-picker-search {
    width: 100%;
    padding: 0.3125rem 0.5rem 0.3125rem 1.75rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.4375rem;
    font-size: 0.8125rem;
    color: rgb(15 23 42);
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-order-picker-search::placeholder {
    color: rgb(100 116 139);
}
.admin-order-picker-search:focus {
    border-color: rgb(249 115 22);
    box-shadow: 0 0 0 2px rgb(249 115 22 / 0.15);
}
.admin-order-add-body {
    position: relative;
    min-height: 0;
    background: #fff;
}
.admin-order-add-body[data-step="browse"] .admin-order-product-picker {
    max-height: 10.5rem;
}
.admin-order-add-body[data-step="configure"] .admin-order-add-list-pane {
    display: none;
}
.admin-order-add-body[data-step="configure"] {
    min-height: 8.5rem;
}
.admin-order-add-body[data-step="browse"] .admin-order-add-detail {
    display: none !important;
}
.admin-order-add-list-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
.admin-order-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
    padding: 0.125rem 0;
    border: none;
    background: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(71 85 105);
    cursor: pointer;
}
.admin-order-back-btn:hover {
    color: rgb(15 23 42);
}
.admin-order-back-btn:focus-visible {
    outline: 2px solid rgb(249 115 22);
    outline-offset: 2px;
    border-radius: 0.25rem;
}
.admin-order-product-picker {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
.admin-order-picker-row {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    gap: 0.4375rem;
    align-items: center;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    text-align: left;
    border: none;
    border-bottom: 1px solid rgb(241 245 249);
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, outline-color 0.15s ease;
}
.admin-order-picker-row:last-child {
    border-bottom: none;
}
.admin-order-picker-row:hover {
    background: rgb(248 250 252);
}
.admin-order-picker-row:focus-visible {
    outline: 2px solid rgb(249 115 22);
    outline-offset: -2px;
    z-index: 1;
}
.admin-order-picker-row.is-selected {
    background: rgb(255 247 237);
    outline: 1px solid rgb(253 186 116);
    outline-offset: -1px;
}
.admin-order-picker-row-thumb {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.4375rem;
    overflow: hidden;
    background: rgb(241 245 249);
    border: 1px solid rgb(226 232 240);
}
.admin-order-picker-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-order-picker-row-body {
    flex: 1;
    min-width: 0;
}
.admin-order-picker-row-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(15 23 42);
    line-height: 1.35;
    word-break: break-word;
    text-wrap: pretty;
}
.admin-order-picker-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4375rem;
    margin-top: 0.125rem;
}
.admin-order-picker-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: rgb(71 85 105);
    background: rgb(241 245 249);
    border: 1px solid rgb(226 232 240);
    line-height: 1.3;
}
.admin-order-picker-price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(194 65 12);
}
.admin-order-picker-stock {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(71 85 105);
}
.admin-order-picker-stock--out {
    color: rgb(190 18 60);
    font-weight: 600;
}
.admin-order-picker-row-check {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    color: #fff;
    background: rgb(249 115 22);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.admin-order-picker-row.is-selected .admin-order-picker-row-check {
    opacity: 1;
    transform: scale(1);
}
.admin-order-picker-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgb(148 163 184);
    font-size: 1rem;
}
.admin-order-picker-hidden {
    display: none;
}
.admin-order-picker-empty {
    padding: 1.25rem 0.875rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgb(100 116 139);
}
.admin-order-add-detail {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.625rem 0.625rem;
    background: #fff;
    border-top: 1px solid rgb(241 245 249);
}
.admin-order-add-detail.hidden {
    display: none;
}
.admin-order-add-body[data-step="configure"] .admin-order-add-detail:not(.hidden) {
    display: flex;
}
.admin-order-selected-preview {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.4375rem;
    align-items: start;
    margin-bottom: 0.375rem;
    flex-shrink: 0;
}
.admin-order-selected-thumb {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.4375rem;
    overflow: hidden;
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-order-selected-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-order-selected-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(15 23 42);
    line-height: 1.35;
    text-wrap: pretty;
}
.admin-order-selected-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(71 85 105);
    margin-top: 0.0625rem;
}
.admin-order-size-section {
    margin-bottom: 0.375rem;
}
.admin-order-size-section.hidden {
    display: none;
}
.admin-order-size-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(51 65 85);
    margin-bottom: 0.25rem;
}
.admin-order-size-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.625rem, 1fr));
    gap: 0.3125rem;
    align-content: start;
}
.admin-order-size-chip {
    min-width: 0;
    min-height: 2rem;
    padding: 0.3125rem 0.25rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(51 65 85);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.admin-order-size-chip:focus-visible {
    outline: 2px solid rgb(249 115 22);
    outline-offset: 1px;
}
.admin-order-size-chip:hover {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252);
}
.admin-order-size-chip.is-selected {
    border-color: rgb(234 88 12);
    background: rgb(249 115 22);
    color: #fff;
}
.admin-order-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: rgb(234 88 12);
    border: none;
    transition: background 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
}
.admin-order-add-btn:hover:not(:disabled) {
    background: rgb(194 65 12);
}
.admin-order-add-btn:focus-visible {
    outline: 2px solid rgb(249 115 22);
    outline-offset: 2px;
}
.admin-order-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.admin-order-add-btn:not(:disabled) {
    cursor: pointer;
}
.admin-order-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(190 18 60);
    background: rgb(255 241 242);
    border: 1px solid rgb(254 205 211);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-order-cancel-btn:hover {
    background: rgb(255 228 230);
    border-color: rgb(253 164 175);
}
.admin-order-cancel-btn:focus-visible {
    outline: 2px solid rgb(244 63 94);
    outline-offset: 2px;
}
.admin-order-stock-note {
    font-size: 0.6875rem;
    color: rgb(180 83 9);
    background: rgb(255 251 235);
    border: 1px solid rgb(254 243 199);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}
.admin-order-stock-note summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.admin-order-stock-note summary::-webkit-details-marker {
    display: none;
}
.admin-order-stock-note p {
    margin-top: 0.25rem;
    line-height: 1.4;
    color: rgb(146 64 14);
}
.admin-order-picker-hint.hidden {
    display: none;
}
.admin-order-size-select {
    display: none;
}
@media (max-width: 479px) {
    .admin-order-item {
        grid-template-columns: 2.5rem 1fr;
        grid-template-rows: auto auto auto;
    }
    .admin-order-item-thumb {
        grid-row: 1 / span 2;
    }
    .admin-order-item-actions {
        grid-column: 1 / span 2;
        grid-row: 3;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.375rem;
        margin-top: 0.125rem;
        border-top: 1px solid rgb(241 245 249);
    }
}
@media (prefers-reduced-motion: reduce) {
    .admin-order-item,
    .admin-order-picker-row,
    .admin-order-qty-btn,
    .admin-order-item-remove,
    .admin-order-size-chip,
    .admin-order-add-btn {
        transition: none;
    }
}

/* แอดมิน — แท็บนำทาง บรรทัดเดียว ไม่ตัด ... */
.admin-chrome {
    max-width: 100%;
}
.admin-main-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.admin-main-tabs::-webkit-scrollbar {
    display: none;
}
.admin-main-tab {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    text-overflow: clip;
    overflow: visible;
    min-width: max-content;
}
.admin-main-tab-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
}
.admin-tab-text,
.admin-tab-badge {
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-user-role-tabs-wrap {
    container-type: inline-size;
    container-name: user-role-tabs;
    overflow: visible;
}
.admin-user-role-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 0.25rem;
}
.admin-user-role-tab {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    text-overflow: clip;
    overflow: visible;
    text-align: center;
    line-height: 1.15;
    padding: 0.4375rem 0.125rem;
    font-size: clamp(0.4rem, 2.1cqi, 0.75rem);
}
@container user-role-tabs (min-width: 36rem) {
    .admin-user-role-tab {
        flex: 0 0 auto;
        overflow: visible;
        padding: 0.375rem 0.875rem;
        font-size: 0.75rem;
    }
    .admin-user-role-tabs {
        width: auto;
        display: inline-flex;
        gap: 0.5rem;
    }
}

/* แอดมิน — มือถือกระชับ + การ์ดผู้ใช้ */
@media (max-width: 767px) {
    .admin-view {
        max-width: 100%;
        overflow-x: clip;
    }
    .admin-chrome {
        position: relative;
        z-index: 2;
    }
    .admin-view.space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem;
    }
    .admin-stats-grid {
        gap: 0.5rem;
    }
    .admin-stat-card {
        padding: 0.625rem 0.75rem;
        border-radius: 0.875rem;
        min-width: 0;
    }
    .admin-stat-label {
        display: block;
        font-size: clamp(0.5rem, 2.15vw, 0.6875rem);
        line-height: 1.2;
        white-space: nowrap;
        overflow: visible;
    }
    .admin-stat-value {
        margin-top: 0.375rem !important;
        font-size: clamp(0.8125rem, 4.1vw, 1rem) !important;
        line-height: 1.15;
        white-space: nowrap;
        overflow: visible;
    }
    .admin-main-tabs {
        gap: 0;
        overflow-x: visible;
    }
    .admin-main-tab {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 0.375rem 0.1rem 0.5rem !important;
        font-size: clamp(0.4rem, 2.05vw, 0.6875rem) !important;
        gap: 0.125rem;
        text-align: center;
        line-height: 1.1;
    }
    .admin-main-tab-icon {
        font-size: 0.875rem;
        line-height: 1;
    }
    .admin-tab-text,
    .admin-tab-badge {
        font-size: inherit;
        line-height: 1.1;
    }
    .admin-users-view.space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.75rem;
    }
    .admin-user-role-tabs-wrap {
        padding: 0.5rem;
    }
    .admin-user-role-tab {
        font-size: clamp(0.4rem, 2.1vw, 0.6875rem);
        padding: 0.4rem 0.1rem;
    }
    #view-admin > [id^="subview-admin-"] {
        max-width: 100%;
        overflow-x: clip;
    }
    .adm-dispatch {
        max-width: 100%;
    }
    .adm-dispatch-toolbar {
        --adm-toolbar-fs: 0.75rem;
    }
    .admin-user-panel {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }
    .admin-user-panel-head h3 {
        font-size: 0.875rem;
    }
    .admin-user-panel-actions {
        width: 100%;
    }
    .admin-user-panel-actions button {
        flex: 1;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.625rem !important;
        white-space: nowrap;
    }
    .admin-user-filters {
        padding: 0.5rem !important;
    }
    .admin-user-filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.375rem !important;
        align-items: end;
    }
    .admin-user-filter-field:first-child {
        grid-column: 1 / -1;
    }
    .admin-user-filter-field label {
        margin-bottom: 0.125rem !important;
    }
    .admin-user-filter-field input,
    .admin-user-filter-field select {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    .admin-user-filter-check {
        grid-column: 1 / -1;
        padding-bottom: 0 !important;
        font-size: 0.6875rem !important;
    }
    .admin-user-filter-reset {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.adm-user-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.adm-user-empty {
    margin: 0;
    padding: 1.25rem 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgb(148 163 184);
    background: rgb(248 250 252);
    border: 1px dashed rgb(226 232 240);
    border-radius: 0.75rem;
}
.adm-user-card {
    padding: 0.625rem 0.75rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
.adm-user-card--teacher {
    border-left: 3px solid rgb(245 158 11);
}
.adm-user-card--staff {
    border-left: 3px solid rgb(16 185 129);
}
.adm-user-card--student {
    border-left: 3px solid rgb(59 130 246);
}
.adm-user-card--admin {
    border-left: 3px solid rgb(244 63 94);
}
.adm-user-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.adm-user-card-id {
    flex: 1;
    min-width: 0;
}
.adm-user-card-name {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgb(15 23 42);
    word-break: break-word;
}
.adm-user-card-user {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: rgb(100 116 139);
    line-height: 1.25;
    word-break: break-all;
}
.adm-user-card-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.125rem;
}
.adm-user-card-actions button {
    min-width: 1.75rem;
    min-height: 1.75rem;
}
.adm-user-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(241 245 249);
}
.adm-user-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.adm-user-meta-item--full {
    grid-column: 1 / -1;
}
.adm-user-meta-label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(148 163 184);
    line-height: 1.2;
}
.adm-user-meta-value {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(51 65 85);
    word-break: break-word;
}
.adm-user-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    width: fit-content;
    max-width: 100%;
    word-break: break-word;
}
.adm-user-badge--amber {
    background: rgb(254 243 199);
    color: rgb(180 83 9);
}
.adm-user-badge--blue {
    background: rgb(219 234 254);
    color: rgb(29 78 216);
}
.adm-user-order {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(241 245 249);
}
.adm-order-none {
    margin: 0;
    font-size: 0.6875rem;
    color: rgb(203 213 225);
}
.adm-order-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.adm-order-chip {
    display: inline-block;
    padding: 0.1875rem 0.4375rem;
    border-radius: 0.375rem;
    background: rgb(237 233 254);
    border: 1px solid rgb(221 214 254);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(91 33 182);
    word-break: break-word;
}
.adm-order-size {
    font-weight: 500;
    color: rgb(124 58 237);
}
.adm-order-status {
    margin: 0.375rem 0 0;
    padding: 0.25rem 0.4375rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}
.adm-order-status--neutral {
    color: rgb(71 85 105);
    background: rgb(248 250 252);
    border-color: rgb(226 232 240);
}

/* แอดมิน — การ์ดคลังสินค้า */
.adm-product-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgb(249 115 22), rgb(234 88 12));
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgb(234 88 12 / 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.adm-product-add-btn:hover {
    box-shadow: 0 4px 12px rgb(234 88 12 / 0.28);
}
.adm-product-add-btn:active {
    transform: scale(0.98);
}
.adm-product-cards {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}
.adm-product-card {
    padding: 0.5rem 0.625rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    border-left: 3px solid rgb(249 115 22);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.adm-product-card:hover {
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.06);
    border-color: rgb(203 213 225);
}
.adm-product-card--dim {
    opacity: 0.78;
    border-left-color: rgb(148 163 184);
}
.adm-product-card-main {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}
.adm-product-card-thumb {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.5rem;
    background: rgb(248 250 252);
    border: 1px solid rgb(241 245 249);
}
.adm-product-card-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: rgb(203 213 225);
}
.adm-product-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.adm-product-card-headrow {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
}
.adm-product-card-name {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgb(15 23 42);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.adm-product-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}
.adm-product-card-desc {
    margin: 0;
    font-size: 0.6875rem;
    color: rgb(100 116 139);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.adm-product-card-meta {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgb(148 163 184);
    line-height: 1.2;
    white-space: nowrap;
}
.adm-product-card-cat {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: rgb(255 247 237);
    border: 1px solid rgb(254 215 170);
    font-size: 0.625rem;
    font-weight: 700;
    color: rgb(194 65 12);
    line-height: 1.3;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-product-card-flag {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
    font-size: 0.5625rem;
    font-weight: 700;
    color: rgb(100 116 139);
    white-space: nowrap;
}
.adm-product-card-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.125rem;
}
.adm-product-card-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    color: rgb(148 163 184);
    background: rgb(248 250 252);
    border: 1px solid rgb(241 245 249);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.adm-product-card-actions .btn-edit:hover {
    background: rgb(255 247 237);
    border-color: rgb(254 215 170);
    color: rgb(234 88 12);
}
.adm-product-card-actions .btn-del:hover {
    background: rgb(255 241 242);
    border-color: rgb(254 205 211);
    color: rgb(244 63 94);
}
.adm-product-card-footrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.125rem;
}
.adm-product-card-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}
.adm-prod-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}
.adm-prod-pill > i {
    font-size: 0.5rem;
    opacity: 0.85;
}
.adm-prod-pill-unit {
    font-size: 0.5625rem;
    font-weight: 600;
    opacity: 0.75;
}
.adm-prod-pill--price {
    color: rgb(154 52 18);
    background: rgb(255 247 237);
    border-color: rgb(254 215 170);
}
.adm-prod-pill--stock {
    color: rgb(6 95 70);
    background: rgb(236 253 245);
    border-color: rgb(167 243 208);
}
.adm-prod-pill--order {
    color: rgb(3 105 161);
    background: rgb(240 249 255);
    border-color: rgb(186 230 253);
}
.adm-prod-pill--muted {
    color: rgb(100 116 139);
    background: rgb(248 250 252);
    border-color: rgb(226 232 240);
}
.adm-prod-pill--danger {
    color: rgb(190 18 60);
    background: rgb(255 241 242);
    border-color: rgb(254 205 211);
}
.adm-product-vis {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}
.adm-product-vis-switch {
    position: relative;
    width: 2rem;
    height: 1.125rem;
    border-radius: 999px;
    background: rgb(203 213 225);
    transition: background 0.18s ease;
    flex-shrink: 0;
}
.adm-product-vis-switch::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
    transition: transform 0.18s ease;
}
.adm-product-vis .vis-checkbox:checked + .adm-product-vis-switch {
    background: rgb(16 185 129);
}
.adm-product-vis .vis-checkbox:checked + .adm-product-vis-switch::after {
    transform: translateX(0.875rem);
}
.adm-product-vis .vis-checkbox:focus-visible + .adm-product-vis-switch {
    outline: 2px solid rgb(249 115 22);
    outline-offset: 2px;
}
.adm-product-vis-text {
    font-size: 0.5625rem;
    font-weight: 700;
    color: rgb(148 163 184);
    white-space: nowrap;
    line-height: 1;
}
.adm-product-vis-text.is-on {
    color: rgb(5 150 105);
}

/* Ordering window override toggle */
.ow-override-vis {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}
.ow-override-vis.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.ow-override-switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgb(244 63 94);
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.12);
    transition: background 0.22s ease, box-shadow 0.22s ease;
    flex-shrink: 0;
}
.ow-override-switch::after {
    content: '';
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.18);
    transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ow-override-vis .vis-checkbox:checked + .ow-override-switch {
    background: rgb(16 185 129);
    box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.08), 0 0 0 1px rgb(16 185 129 / 0.25);
}
.ow-override-vis .vis-checkbox:checked + .ow-override-switch::after {
    transform: translateX(1.25rem);
}
.ow-override-vis .vis-checkbox:focus-visible + .ow-override-switch {
    outline: 2px solid rgb(245 158 11);
    outline-offset: 2px;
}
.ow-override-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(225 29 72);
    white-space: nowrap;
    line-height: 1.2;
    min-width: 3.5rem;
}
.ow-override-text.is-on {
    color: rgb(5 150 105);
}
#ow-override-panel.is-active {
    border-color: rgb(251 191 36);
    box-shadow: 0 0 0 1px rgb(251 191 36 / 0.25);
}

@media (max-width: 767px) {
    .admin-product-head h3 {
        font-size: 0.875rem;
    }
}