/* ===================================================
   UWW Premium Layer — ใช้ร่วมกันทุกหน้า
   โหลดต่อจาก sidebar.css (หรือก่อน </head> ในหน้าที่ไม่มี sidebar)

   1) Global polish  — เพิ่มรายละเอียดเล็ก ๆ ที่ไม่ชนกับธีมเดิมของแต่ละหน้า
   2) .uww-premium   — ธีมพรีเมียมเต็มชุด ใช้กับหน้าที่ยังไม่มีธีมของตัวเอง
                        เปิดใช้ด้วย <body class="uww-premium">
=================================================== */

:root {
  --uww-ink:      #172033;
  --uww-ink-soft: #3b4658;
  --uww-muted:    #5b667a;
  --uww-line:     rgba(15, 23, 42, .07);
  --uww-brand:    #2563eb;
  --uww-brand-dk: #1d4ed8;
  --uww-navy:     #0d1f3c;
  --uww-gold:     #f59e0b;
  --uww-ease:     cubic-bezier(.22, 1, .36, 1);
  --uww-font-body: 'IBM Plex Sans Thai', 'Noto Sans Thai', 'Sarabun', -apple-system, 'Segoe UI', sans-serif;
  --uww-font-head: 'Prompt', 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;
  --uww-raised: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(16, 24, 40, .05), 0 12px 28px -10px rgba(16, 24, 40, .16);
  --uww-raised-hover: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(16, 24, 40, .05), 0 18px 38px -12px rgba(16, 24, 40, .22);
}

/* ══════════════════════════════════════════════
   1) GLOBAL POLISH (ทุกหน้า)
══════════════════════════════════════════════ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(37, 99, 235, .18); }
.sidebar ::selection { background: rgba(251, 191, 36, .35); }

/* วงโฟกัสสำหรับผู้ใช้คีย์บอร์ด */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--uww-brand);
  outline-offset: 2px;
}
.sidebar a:focus-visible,
.sidebar button:focus-visible { outline-color: #fbbf24; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c3cde0;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #9aa8c2; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #c3cde0 transparent; }
}

/* เนื้อหาค่อย ๆ ลอยขึ้นตอนเปิดหน้า (backwards: ไม่ล็อก transform ทับ hover ของการ์ด) */
@keyframes uwwRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.main > .page-header { animation: uwwRise .55s var(--uww-ease) backwards; }
.main > .card,
.main > .layout,
.main > .cal-card,
.main > .month-summary,
.main > .filter-bar { animation: uwwRise .6s var(--uww-ease) .08s backwards; }

/* ปุ่มยุบลงเล็กน้อยเมื่อกด */
.btn:not(:disabled):active { transform: translateY(1px) scale(.985); }

/* พื้นหลัง pop-up เบลอ */
.modal-overlay,
.modal-bg {
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

/* ตัวเลขในตารางกว้างเท่ากัน — คอลัมน์เวลา/จำนวนเรียงตรง */
.main table td { font-variant-numeric: tabular-nums; }

@media print {
  .sidebar, .uww-sb-fab, .uww-sb-overlay, .menu-toggle { display: none !important; }
  .main,
  .main.expanded,
  html.uww-sb-collapsed .main { margin-left: 0 !important; max-width: 100% !important; padding: 0 !important; }
  body { background: #fff !important; }
  .main > * { animation: none !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .main > * { animation: none !important; }
  .btn:not(:disabled):active { transform: none; }
}

/* ══════════════════════════════════════════════
   2) FULL PREMIUM THEME (opt-in: body.uww-premium)
══════════════════════════════════════════════ */

body.uww-premium {
  font-family: var(--uww-font-body);
  color: var(--uww-ink);
  background:
    radial-gradient(900px 420px at 92% -8%, rgba(37, 99, 235, .09), transparent 62%),
    radial-gradient(760px 380px at -6% 4%, rgba(245, 158, 11, .07), transparent 58%),
    linear-gradient(180deg, #eef2f8 0%, #e6ebf3 100%);
  background-attachment: fixed;
}

/* ── หัวข้อหน้า ── */
.uww-premium .page-header { margin-bottom: 26px; }
.uww-premium .page-header h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--uww-font-head);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--uww-ink);
}
.uww-premium .page-header h1 > i {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.3rem;
  color: #fff !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 60%, #4338ca 100%);
  box-shadow: 0 8px 18px -6px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.uww-premium .page-header p {
  margin: 8px 0 0 60px;
  color: var(--uww-muted);
  font-size: .94rem;
}
.uww-premium .page-header p small { color: #8794a8; }

/* ── การ์ด ── */
.uww-premium .card {
  background: #fff;
  border: 1px solid var(--uww-line);
  border-radius: 20px;
  box-shadow: var(--uww-raised);
  transition: box-shadow .3s ease;
}
.uww-premium .card:hover { box-shadow: var(--uww-raised-hover); }

.uww-premium .card-title {
  gap: 12px;
  font-family: var(--uww-font-head);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--uww-ink);
}
.uww-premium .card-title > i {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf1ff;
  box-shadow: inset 0 0 0 1px #d3e1fd;
}
.uww-premium .card-sub { color: var(--uww-muted); margin-left: 48px; }

/* ── Alert ── */
.uww-premium .alert {
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px -1px rgba(16, 24, 40, .06);
}
.uww-premium .alert-success { background: linear-gradient(90deg, #ecfbf2, #f6fdf9); border-color: #b7ebcb; color: #137a3c; }
.uww-premium .alert-error   { background: linear-gradient(90deg, #fff0ef, #fff7f7); border-color: #f8c9c6; color: #b42318; }

/* ── ช่องกรอก ── */
.uww-premium .form-control {
  font-family: var(--uww-font-body);
  background: #f6f8fc;
  border: 1px solid #d5dcea;
  border-radius: 12px;
  color: var(--uww-ink);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.uww-premium .form-control:hover { border-color: #b6c2d9; }
.uww-premium .form-control:focus {
  background: #fff;
  border-color: var(--uww-brand);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}
.uww-premium select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.uww-premium .form-group label { color: var(--uww-ink-soft); }
.uww-premium input[type="checkbox"] { accent-color: var(--uww-brand); }

/* ── ปุ่ม ── */
.uww-premium .btn {
  font-family: var(--uww-font-body);
  border-radius: 12px;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.uww-premium .btn-primary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  border: 1px solid #1e40af;
  box-shadow: 0 6px 14px -4px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.uww-premium .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(37, 99, 235, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.uww-premium .btn-danger {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 55%, #dc2626 100%);
  border: 1px solid #b91c1c;
  box-shadow: 0 6px 14px -5px rgba(239, 68, 68, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.uww-premium .btn-danger:hover { transform: translateY(-2px); filter: brightness(1.05); }
.uww-premium .btn-outline {
  background: #fff;
  border: 1px solid #d5dcea;
  color: var(--uww-ink-soft);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.uww-premium .btn-outline:hover {
  border-color: var(--uww-brand);
  color: var(--uww-brand);
  box-shadow: 0 6px 12px -6px rgba(37, 99, 235, .45);
}

/* ── ตาราง ── */
.uww-premium .table-wrap {
  background: #fff;
  border: 1px solid #e3e9f3;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #fff;
}
.uww-premium .table-wrap th {
  font-family: var(--uww-font-head);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #14306b;
  background: linear-gradient(180deg, #e6eefc 0%, #d8e4f8 100%);
  border-bottom: 2px solid #b7caef;
}
.uww-premium .table-wrap td { color: var(--uww-ink); border-bottom-color: #edf1f7; }
.uww-premium .table-wrap tbody tr:last-child td { border-bottom: none; }
.uww-premium .table-wrap tbody tr { transition: background .18s ease; }
.uww-premium .table-wrap tbody tr:hover { background: linear-gradient(90deg, #f3f7ff 0%, #f9fbff 100%); }
.uww-premium .table-wrap tbody tr.picked { background: #eaf1ff; }
.uww-premium .table-wrap tbody tr.picked td:first-child { box-shadow: inset 3px 0 0 var(--uww-brand); }

/* ── ชิป / ป้าย ── */
.uww-premium .last-reset,
.uww-premium .sel-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eff6ff, #e0ebff);
  border: 1px solid #c9dafc;
  color: #1e4fd1;
  font-size: .82rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

/* ── กล่องกำหนดค่าแต่ละประเภท (quota) ── */
.uww-premium .quota-box {
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border: 1px solid var(--uww-line);
  border-top: 4px solid var(--c);
  border-radius: 16px;
  box-shadow: var(--uww-raised);
  transition: transform .25s var(--uww-ease), box-shadow .25s var(--uww-ease);
}
.uww-premium .quota-box:hover { transform: translateY(-2px); box-shadow: var(--uww-raised-hover); }
.uww-premium .quota-box label i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 14%, #fff);
}

/* ── Pop-up ── */
.uww-premium .modal-bg { background: rgba(12, 20, 40, .5); }
.uww-premium .modal {
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 40px 90px -20px rgba(8, 15, 35, .55);
}
.uww-premium .modal-bg.show .modal { animation: uwwPop .28s var(--uww-ease); }
@keyframes uwwPop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.uww-premium .modal h3 {
  gap: 12px;
  font-family: var(--uww-font-head);
  font-weight: 600;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f7;
}
.uww-premium .modal h3 > i {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 8px 16px -6px rgba(220, 38, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.uww-premium .warn-box {
  background: linear-gradient(90deg, #fff9e6, #fffcf2);
  border-color: #fbe3a0;
  border-left: 4px solid var(--uww-gold);
}
.uww-premium .summary-list {
  background: linear-gradient(180deg, #f8faff, #f1f5fc);
  border: 1px solid var(--uww-line);
  border-radius: 12px;
}

@media (max-width: 767px) {
  .uww-premium .page-header h1 { font-size: 1.25rem; gap: 10px; }
  .uww-premium .page-header h1 > i { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 12px; }
  .uww-premium .page-header p { margin-left: 0; }
  .uww-premium .card-sub { margin-left: 0; }
  .uww-premium .modal { padding: 22px 18px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .uww-premium .modal-bg.show .modal { animation: none; }
  .uww-premium .quota-box:hover,
  .uww-premium .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   Premium pop-ups — users.php (เพิ่มผู้ใช้ / สิทธิ์ / แก้ไขสิทธิ์-สถานะ)
   ═══════════════════════════════════════════════════════════ */
#modalCreate, #modalRoles, #modalEdit {
  background: radial-gradient(120% 90% at 50% 0%, rgba(37, 99, 235, .28), rgba(8, 15, 35, .62) 70%);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
}
#modalCreate.show .modal, #modalRoles.show .modal, #modalEdit.show .modal {
  animation: uwwPop .32s var(--uww-ease);
}
#modalCreate .modal, #modalRoles .modal, #modalEdit .modal {
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 0 0 1px rgba(15, 40, 100, .10),
              0 50px 100px -24px rgba(5, 12, 35, .65), 0 18px 40px -16px rgba(29, 78, 216, .35);
  font-family: var(--uww-font-body);
}

/* หัวโมดัล: ประกายแสง + เส้นทองด้านล่าง */
#modalCreate .cu-head, #modalRoles .rl-head, #modalEdit .eu-head {
  position: relative; overflow: hidden; isolation: isolate;
}
#modalCreate .cu-head::before, #modalRoles .rl-head::before, #modalEdit .eu-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .22), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(245, 158, 11, .22), transparent 40%);
}
#modalCreate .cu-head::after, #modalRoles .rl-head::after, #modalEdit .eu-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--uww-gold), #fde68a, var(--uww-gold), transparent);
  opacity: .9;
}
#modalCreate .cu-head h3, #modalRoles .rl-head h3, #modalEdit .eu-who h3 {
  font-family: var(--uww-font-head); letter-spacing: .005em;
  border: 0; padding: 0; gap: 0; display: block;
}
#modalCreate .modal-close, #modalRoles .modal-close, #modalEdit .modal-close {
  backdrop-filter: blur(6px); transition: transform .25s var(--uww-ease), background .2s;
}

/* ช่องกรอก */
#modalCreate .form-control-lg, #modalRoles .form-control-lg, #modalEdit .form-control-lg {
  border-radius: 13px !important;
  transition: border-color .2s, box-shadow .25s var(--uww-ease), transform .2s var(--uww-ease);
}
#modalCreate .form-control-lg:hover, #modalRoles .form-control-lg:hover, #modalEdit .form-control-lg:hover { border-color: #4f7ae0 !important; }
#modalCreate .form-control-lg:focus, #modalRoles .form-control-lg:focus, #modalEdit .form-control-lg:focus {
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .18), 0 10px 22px -10px rgba(29, 78, 216, .45) !important;
  transform: translateY(-1px);
}

/* ปุ่ม: ผิวเงา + ยกตัวเมื่อ hover */
#modalCreate .btn, #modalRoles .btn, #modalEdit .btn {
  position: relative; overflow: hidden; border-radius: 13px;
  transition: transform .2s var(--uww-ease), box-shadow .25s var(--uww-ease), filter .2s;
}
#modalCreate .btn::after, #modalRoles .btn::after, #modalEdit .btn::after {
  content: ""; position: absolute; inset: 0 0 50% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}
#modalCreate .btn:not(:disabled):hover, #modalRoles .btn:not(:disabled):hover, #modalEdit .btn:not(:disabled):hover {
  transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 14px 26px -10px rgba(15, 40, 120, .55);
}
#modalCreate .btn:not(:disabled):active, #modalRoles .btn:not(:disabled):active, #modalEdit .btn:not(:disabled):active { transform: translateY(0) scale(.99); }
#modalCreate .cu-cancel::after { display: none; }

/* การ์ดและแถวรายการ */
#modalEdit .eu-card { transition: transform .25s var(--uww-ease), box-shadow .25s var(--uww-ease); }
#modalEdit .eu-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(15, 40, 100, .35); }
#modalEdit .eu-ico, #modalEdit .eu-step-no {
  box-shadow: 0 6px 14px -5px rgba(15, 40, 100, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
#modalRoles .rl-row { transition: transform .2s var(--uww-ease), box-shadow .25s var(--uww-ease), border-color .2s; }
#modalRoles .rl-row:hover { transform: translateX(3px); }
#modalCreate .cu-sec-title, #modalEdit .eu-card-title { font-family: var(--uww-font-head); }
#modalCreate .cu-sec-title::after {
  content: ""; flex: 1; height: 1px; margin-left: 6px;
  background: linear-gradient(90deg, rgba(29, 78, 216, .35), transparent);
}

/* แถบเลื่อนบางๆ + ring สำหรับคีย์บอร์ด */
#modalCreate .cu-body, #modalRoles .rl-body, #modalRoles .rl-list, #modalEdit .eu-body {
  scrollbar-width: thin; scrollbar-color: #9fb0cc transparent;
}
#modalCreate .cu-body::-webkit-scrollbar, #modalRoles .rl-body::-webkit-scrollbar,
#modalRoles .rl-list::-webkit-scrollbar, #modalEdit .eu-body::-webkit-scrollbar { width: 8px; }
#modalCreate .cu-body::-webkit-scrollbar-thumb, #modalRoles .rl-body::-webkit-scrollbar-thumb,
#modalRoles .rl-list::-webkit-scrollbar-thumb, #modalEdit .eu-body::-webkit-scrollbar-thumb {
  background: #9fb0cc; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
#modalCreate :focus-visible, #modalRoles :focus-visible, #modalEdit :focus-visible {
  outline: 3px solid rgba(245, 158, 11, .7); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #modalCreate.show .modal, #modalRoles.show .modal, #modalEdit.show .modal { animation: none; }
  #modalCreate *, #modalRoles *, #modalEdit * { transition: none !important; }
  #modalEdit .eu-card:hover, #modalRoles .rl-row:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   Royal pop-up — กำหนดสิทธิ์เมนู (#modalMenuPerm)
   ═══════════════════════════════════════════════════════════ */
#modalMenuPerm {
  --mp-gold: #e6b84a; --mp-gold-lt: #fbe6a6; --mp-violet: #6d28d9; --mp-ink: #0b0f24;
  background: radial-gradient(120% 90% at 50% 0%, rgba(109, 40, 217, .35), rgba(8, 10, 30, .68) 70%);
  backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15);
}
#modalMenuPerm.show .modal { animation: uwwPop .34s var(--uww-ease); }
#modalMenuPerm .modal.mp-modal {
  max-width: 580px; padding: 0; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; border: 1px solid rgba(230, 184, 74, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(60, 20, 120, .12),
              0 55px 110px -26px rgba(5, 8, 30, .7), 0 20px 44px -18px rgba(109, 40, 217, .45);
  font-family: var(--uww-font-body); text-rendering: geometricPrecision;
}

/* หัวโมดัลสไตล์ Royal: ม่วงเข้ม + ทอง */
#modalMenuPerm .mp-head {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 18px;
  padding: 26px 66px 24px 26px;
  background: linear-gradient(135deg, #0b0f24 0%, #241056 55%, #3b1a8a 100%);
}
#modalMenuPerm .mp-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 8% -10%, rgba(230, 184, 74, .35), transparent 42%),
    radial-gradient(circle at 105% 120%, rgba(167, 139, 250, .38), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px);
}
#modalMenuPerm .mp-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--mp-gold), var(--mp-gold-lt), var(--mp-gold), transparent);
}
#modalMenuPerm .mp-crest {
  position: relative; width: 74px; height: 74px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #f4ecd0);
  box-shadow: 0 0 0 3px var(--mp-gold), 0 0 0 7px rgba(230, 184, 74, .25), 0 12px 26px -6px rgba(0, 0, 0, .6);
}
#modalMenuPerm .mp-crest img { width: 50px; height: 50px; object-fit: contain; }
#modalMenuPerm .mp-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--mp-gold);
}
#modalMenuPerm .mp-head h3 {
  display: block; margin: 4px 0 8px; padding: 0; border: 0; gap: 0;
  font-family: var(--uww-font-head); font-size: 1.7rem; font-weight: 600; line-height: 1.25; letter-spacing: .01em;
  background: linear-gradient(180deg, #ffffff 25%, var(--mp-gold-lt) 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none;
}
#modalMenuPerm .mp-user {
  display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; font-weight: 600; font-size: .92rem; max-width: 100%;
}
#modalMenuPerm .mp-user > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modalMenuPerm .mp-user-av {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--mp-gold-lt), var(--mp-gold)); color: #2a1760; font-weight: 800; font-size: .85rem;
}
#modalMenuPerm .modal-close {
  top: 20px; right: 20px; background: rgba(255, 255, 255, .14); border-color: rgba(230, 184, 74, .6); color: var(--mp-gold-lt);
  backdrop-filter: blur(6px); z-index: 3;
}
#modalMenuPerm .modal-close:hover { background: rgba(230, 184, 74, .3); color: #fff; }

/* เนื้อหา: พื้นเทาอมม่วง การ์ดนูนขึ้นจากพื้น */
#modalMenuPerm .mp-body {
  padding: 20px 22px 24px; overflow-y: auto; flex: 1; min-height: 0; background: #ebeef7;
  scrollbar-width: thin; scrollbar-color: #a9b3cc transparent;
}
#modalMenuPerm .mp-body::-webkit-scrollbar { width: 8px; }
#modalMenuPerm .mp-body::-webkit-scrollbar-thumb { background: #a9b3cc; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
#modalMenuPerm .mp-card {
  margin-bottom: 14px; padding: 14px 16px 16px; background: linear-gradient(180deg, #ffffff, #fbfbff);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px;
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(40, 50, 100, .08), 0 2px 4px rgba(20, 30, 70, .06), 0 16px 30px -14px rgba(30, 40, 100, .32);
}
#modalMenuPerm .mp-group {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 9px;
  border-bottom: 1px solid #e5e8f3; font-family: var(--uww-font-head); font-size: .98rem; font-weight: 600; color: #1b1340;
}
#modalMenuPerm .mp-group i {
  width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 9px; font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, var(--mp-violet)); box-shadow: 0 6px 12px -5px rgba(109, 40, 217, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
#modalMenuPerm .mp-dept-box {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: 46px; border-radius: 13px;
  background: linear-gradient(180deg, #f2f6ff, #e8efff); border: 1.5px solid #b9cdf5; color: #1d3f9a; font-weight: 700; font-size: 1rem;
}
#modalMenuPerm .mp-dept-box #menuPermTargetDept { color: #1d3f9a; font-weight: 700; }
#modalMenuPerm .mp-nodept { color: #5b667a; font-weight: 600; font-style: italic; font-size: .92rem; }
#modalMenuPerm .mp-note { margin: 2px 2px 14px; font-size: .9rem; font-weight: 600; color: #2a3350; }
#modalMenuPerm .mp-note i { color: var(--mp-violet); }

#modalMenuPerm .mp-quick { display: flex; gap: 10px; margin-bottom: 14px; }
#modalMenuPerm .mp-quick button {
  flex: 1; padding: 10px; border-radius: 13px; font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid; box-shadow: 0 1px 0 #fff inset, 0 8px 16px -10px rgba(20, 30, 70, .45);
  transition: transform .2s var(--uww-ease), box-shadow .25s var(--uww-ease);
}
#modalMenuPerm .mp-quick button:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #fff inset, 0 14px 22px -10px rgba(20, 30, 70, .5); }
#modalMenuPerm .mp-q-on { background: linear-gradient(180deg, #f0fdf4, #dcfce7); border-color: #4ade80; color: #116932; }
#modalMenuPerm .mp-q-off { background: linear-gradient(180deg, #fff5f6, #ffe4e8); border-color: #fb8fa0; color: #a11d33; }

/* รายการเมนู (ชิป) */
#modalMenuPerm .menu-check-grid { gap: 10px; }
#modalMenuPerm .menu-check-item {
  padding: 12px 14px; border-radius: 14px; border: 1.5px solid #c9d1e6; background: linear-gradient(180deg, #ffffff, #f3f5fb);
  box-shadow: 0 1px 0 #fff inset, 0 6px 12px -8px rgba(20, 30, 70, .4);
  transition: transform .2s var(--uww-ease), box-shadow .25s var(--uww-ease), border-color .2s, background .2s;
}
#modalMenuPerm .menu-check-item:hover { transform: translateY(-2px); border-color: #8b5cf6; box-shadow: 0 1px 0 #fff inset, 0 14px 22px -12px rgba(109, 40, 217, .55); }
#modalMenuPerm .menu-check-item.checked {
  border-color: var(--mp-violet); background: linear-gradient(180deg, #f6f1ff, #ebe1ff);
  box-shadow: 0 1px 0 #fff inset, 0 0 0 3px rgba(109, 40, 217, .12), 0 12px 20px -12px rgba(109, 40, 217, .6);
}
#modalMenuPerm .menu-check-item input[type=checkbox] { width: 19px; height: 19px; }
#modalMenuPerm .menu-check-item .item-icon { font-size: 1.1rem; color: var(--mp-violet); }
#modalMenuPerm .menu-check-item .item-label { font-size: .95rem; font-weight: 700; color: #0b0f24; }

/* สรุป + ปุ่ม */
#modalMenuPerm .mp-summary {
  display: flex; align-items: center; justify-content: space-between; margin: 16px 0 0; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #1a0f45, #3b1a8a); color: #ede9fe; font-weight: 600; font-size: .95rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 14px 26px -14px rgba(36, 16, 86, .8);
}
#modalMenuPerm .mp-summary i { color: var(--mp-gold); margin-right: 4px; }
#modalMenuPerm .mp-summary b { font-family: var(--uww-font-head); font-size: 1.05rem; color: var(--mp-gold-lt); }
#modalMenuPerm .mp-summary b span { font-size: 1.35rem; }
#modalMenuPerm .mp-actions { display: flex; gap: 12px; margin-top: 16px; }
#modalMenuPerm .mp-actions .btn, #modalMenuPerm .mp-revoke {
  position: relative; overflow: hidden; border-radius: 14px; font-family: var(--uww-font-head); font-weight: 600; font-size: 1rem;
  padding: 13px 18px; justify-content: center; transition: transform .2s var(--uww-ease), box-shadow .25s var(--uww-ease), filter .2s;
}
#modalMenuPerm .mp-actions .btn::after, #modalMenuPerm .mp-revoke::after {
  content: ""; position: absolute; inset: 0 0 50% 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .24), transparent);
}
#modalMenuPerm .mp-save { flex: 1; background: linear-gradient(180deg, #8b5cf6, #5b21b6) !important; color: #fff !important; border: 0 !important; box-shadow: 0 16px 26px -12px rgba(91, 33, 182, .8); }
#modalMenuPerm .mp-cancel { background: #fff !important; color: #1b1340 !important; border: 1.5px solid #b4bdd6 !important; box-shadow: 0 8px 16px -10px rgba(20, 30, 70, .4); }
#modalMenuPerm .mp-actions .btn:hover, #modalMenuPerm .mp-revoke:hover { transform: translateY(-2px); filter: brightness(1.05); }
#modalMenuPerm .mp-cancel::after { display: none; }

/* Danger zone */
#modalMenuPerm .mp-danger {
  margin-top: 18px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #fff7f8, #ffecef);
  border: 1.5px solid #f6a3b0; box-shadow: 0 1px 0 #fff inset, 0 14px 26px -16px rgba(190, 30, 60, .5);
}
#modalMenuPerm .mp-danger-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--uww-font-head); font-weight: 600; font-size: .98rem; color: #a11d33; }
#modalMenuPerm .mp-danger p { margin: 0 0 12px; font-size: .88rem; line-height: 1.6; font-weight: 600; color: #3b4658; }
#modalMenuPerm .mp-revoke { width: 100%; background: linear-gradient(180deg, #f87171, #b91c1c) !important; color: #fff !important; border: 0 !important; box-shadow: 0 14px 24px -12px rgba(185, 28, 28, .8); }

#modalMenuPerm :focus-visible { outline: 3px solid rgba(230, 184, 74, .85); outline-offset: 2px; }
@media (max-width: 560px) {
  #modalMenuPerm .mp-head { padding: 20px 56px 20px 16px; gap: 12px; }
  #modalMenuPerm .mp-crest { width: 58px; height: 58px; } #modalMenuPerm .mp-crest img { width: 38px; height: 38px; }
  #modalMenuPerm .mp-head h3 { font-size: 1.35rem; }
  #modalMenuPerm .menu-check-grid { grid-template-columns: 1fr; }
  #modalMenuPerm .mp-body { padding: 16px 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #modalMenuPerm.show .modal { animation: none; }
  #modalMenuPerm * { transition: none !important; }
}