/*-----------------------------------------------------------
  mlb_dialog.css — หน้าต่างแจ้งเตือน/ยืนยัน (.md_* จาก include/js/mlb_dialog.js) + Bootstrap modal ทุกหน้า + modal ออกจากระบบ (.lo_*)
  11 ต.ค. 69 — ชุดเดียวกับ mms_app (include/css/ui.css) แต่ใช้สีชมพู/กรมท่าของ mlb · เงาเป็นสีกลาง (ไม่มีเงาชมพู — ตามที่หน้า login กำหนด)
  โหลดต่อจาก bootstrap.min.css ในทุกหน้า (ก่อน css ของหน้า → modal ที่หน้ากำหนดเอง เช่น .an_modal / .ec_modal / #basket_modal ยังชนะ)
-----------------------------------------------------------*/
:root{
    --md-accent: #ec6892;               /* ปุ่มยืนยัน / ไอคอนทั่วไป (ชมพูเข้มของ mlb) */
    --md-accent-2: #ff85ab;             /* ชมพูอ่อน (ไล่สีไอคอน) */
    --md-accent-hover: #d9557f;
    --md-accent-rgb: 236, 104, 146;
    --md-navy: #294f7f;                 /* หัวข้อ (กรมท่าของ mlb) */
    --md-ink: #3a3d4a;  --md-muted: #7a8699;  --md-faint: #a0a7b5;
    --md-line: #e6e3ea; --md-line-soft: #f3eef1;
    --md-bad: #b42318;  --md-bad-soft: #fdecea;
    --md-shadow: 0 30px 60px -20px rgba(30,40,60,.35);      /* เงากลาง ไม่ใช้สีชมพู */
}

/*----------- Modal ทุกโมดูล (Bootstrap) — ปรับใหม่ 11 ต.ค. 69 ให้เข้าชุดกับหน้าต่างแจ้งเตือน .md_* ข้างล่าง -----------
   ฉากหลังเบลอ · กล่องมุมโค้ง 22px เด้งขึ้นนุ่มๆ · ปุ่มปิดกลม · แถบปุ่มล่างพื้นเทาอ่อน · มือถือ = แผ่นเลื่อนขึ้นจากล่าง */
.modal-backdrop{ --bs-backdrop-bg: #101830; --bs-backdrop-opacity: .42; }
.modal-backdrop.show{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-content{ border: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--md-shadow); }
.modal-header{ border-bottom: 1px solid var(--md-line-soft); padding: 18px 22px; }
.modal-body{ padding: 20px 22px; }
.modal-footer{ border-top: 1px solid #eef0f5; background: #f7f8fb; padding: 12px 18px; gap: 4px; }
.modal-footer .btn, .modal-header .btn{ border-radius: 12px; }
/* ปุ่มปิด X → ปุ่มกลมพื้นเทา ชี้แล้วเข้มขึ้น */
.modal-header .btn-close{
    width: 34px; height: 34px; padding: 0; margin: -4px -6px -4px auto; border-radius: 50%; opacity: .6;
    background-color: #f1f2f7; background-size: 11px; transition: background-color .15s, opacity .15s, transform .15s;
}
.modal-header .btn-close:hover{ opacity: 1; background-color: #e4e6ee; transform: rotate(90deg); }
.modal-header .btn-close:focus{ box-shadow: 0 0 0 3px rgba(41,79,127,.2); }
/* แอนิเมชันเปิด: เลื่อนขึ้นนิดๆ + ขยายจาก 96% (แทนการเลื่อนลงจากบนของ Bootstrap) */
.modal.fade .modal-dialog{ transform: translateY(14px) scale(.96); transition: transform .32s cubic-bezier(.2,.9,.3,1.2); }
.modal.show .modal-dialog{ transform: none; }
.modal.modal-static .modal-dialog{ transform: scale(1.02); }   /* กดพื้นหลังของ modal ที่ห้ามปิด → เด้งนิดเดียว */
/* มือถือ: modal ทั่วไป (ไม่ใช่แบบเต็มจอ) → แผ่นชิดขอบล่าง มุมบนโค้ง + ขีดจับ */
@media (max-width: 575.98px){
    .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]){
        margin: 0; min-height: 100%; display: flex; align-items: flex-end; max-width: none;
    }
    .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content{
        border-radius: 22px 22px 0 0; max-height: 92vh; width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal-dialog-scrollable:not(.modal-fullscreen):not([class*="modal-fullscreen-"]){ height: 100%; max-height: none; }
    .modal-dialog-scrollable:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content{ max-height: 92vh; }
    .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content::before{
        content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #d9dce5; z-index: 2;
    }
    .modal.fade .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]){ transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.3,1); }
    .modal.show .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]){ transform: none; }
}

/*----------- หน้าต่างแจ้งเตือน/ยืนยัน .md_* (include/js/mms_dialog.js — แทน SweetAlert2, 11 ต.ค. 69) -----------
   ดีไซน์ B เหมือนหน้าต่างออกจากระบบ: ไอคอนกล่องไล่สีด้านซ้าย + หัวข้อ/ข้อความ + แถบปุ่มล่างพื้นเทา · มือถือ = แผ่นเลื่อนขึ้นจากล่าง */
html.md_lock, html.md_lock body{ overflow: hidden; }
.md_back{
    position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(16,24,48,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .22s; font-family: "Prompt", sans-serif; font-weight: 300;
}
.md_back.show{ opacity: 1; }
.md_box{
    position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto;
    background: #fff; border-radius: 22px; box-shadow: var(--md-shadow);
    transform: translateY(14px) scale(.96); opacity: 0; transition: transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
}
.md_back.show .md_box{ transform: none; opacity: 1; }
.md_box.md_shake{ animation: md_shake .4s; }   /* กดพื้นหลังตอนห้ามปิด → สั่นเบาๆ */
@keyframes md_shake{ 20%,60%{ transform: translateX(-6px); } 40%,80%{ transform: translateX(6px); } }
.md_x{ position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f2f7; color: var(--md-muted); display: grid; place-items: center; cursor: pointer; }
.md_x:hover{ background: #e4e6ee; color: var(--md-ink); }
/* หัว: ไอคอน + หัวข้อ + ข้อความ */
.md_in{ padding: 26px 24px 6px; display: flex; gap: 16px; align-items: flex-start; }
.md_ico{
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 26px; background: linear-gradient(135deg, var(--md-accent-2), var(--md-accent)); box-shadow: 0 8px 16px -8px rgba(30,40,60,.35);
}
.md_back.show .md_ico i{ display: inline-block; animation: md_pop .5s .15s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes md_pop{ from{ transform: scale(.3); opacity: 0; } to{ transform: none; opacity: 1; } }
.md_ico--success, .md_tico.md_ico--success{ background: linear-gradient(135deg, #22b07d, #11845b); box-shadow: 0 8px 16px -8px rgba(30,40,60,.35); }
.md_ico--error, .md_tico.md_ico--error{ background: linear-gradient(135deg, #e5484d, #b42318); box-shadow: 0 8px 16px -8px rgba(30,40,60,.35); }
.md_ico--warning, .md_tico.md_ico--warning{ background: linear-gradient(135deg, #f5b335, #d98a00); box-shadow: 0 8px 16px -8px rgba(30,40,60,.35); }
.md_ico--info, .md_tico.md_ico--info{ background: linear-gradient(135deg, #3b8beb, var(--md-navy)); box-shadow: 0 8px 16px -8px rgba(30,40,60,.35); }
.md_ico--loading{ background: #eef0f7; box-shadow: none; }
.md_ico--loading .md_spin{ width: 24px; height: 24px; border-width: 3px; border-color: rgba(41,79,127,.2); border-top-color: var(--md-accent); }
.md_head{ flex: 1; min-width: 0; padding-top: 2px; }
.md_title{ margin: 0 0 4px; font-size: 18px; font-weight: 500; color: var(--md-navy); line-height: 1.4; word-break: break-word; }
.md_text{ margin: 0; color: var(--md-muted); font-size: 14px; line-height: 1.55; word-break: break-word; }
.md_html{ padding: 6px 24px 0; color: var(--md-ink); font-size: 14px; line-height: 1.55; word-break: break-word; }
.md_box:not(.md_box--noicon) .md_html{ padding-left: 92px; }   /* เนื้อหาเยื้องตรงกับหัวข้อ (ไอคอน 52 + ช่อง 16 + ขอบ 24) */
.md_html:has(input, select, textarea, table){ padding-left: 24px !important; }   /* มีฟอร์ม/ตาราง → ใช้ความกว้างเต็มกล่อง */
.md_field{ padding: 12px 24px 0; }
/* ช่องกรอก: ของตัวเอง (.md_input) + ที่หน้าเดิมเขียนมาเองใน html (.swal2-input / .swal2-select) */
.md_input, .md_back .swal2-input, .md_back .swal2-select, .md_back .swal2-textarea{
    display: block; width: 100%; box-sizing: border-box; margin: 10px 0 0; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--md-ink);
    background: #fff; border: 1px solid var(--md-line); border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.md_textarea{ min-height: 96px; resize: vertical; }
.md_input:focus, .md_back .swal2-input:focus, .md_back .swal2-select:focus, .md_back .swal2-textarea:focus{ border-color: rgba(41,79,127,.55); box-shadow: 0 0 0 .2rem rgba(41,79,127,.15); }
.md_input--bad{ border-color: #e5484d !important; box-shadow: 0 0 0 .2rem rgba(229,72,77,.15) !important; }
.md_back .swal2-select:disabled{ background: #f4f5f9; color: var(--md-muted); }
.md_valid{ display: none; margin: 10px 24px 0; padding: 8px 12px; border-radius: 10px; background: var(--md-bad-soft); color: var(--md-bad); font-size: 13.5px; }
.md_has_valid .md_valid{ display: block; animation: md_pop .25s; }
.md_note{ margin: 14px 24px 0; padding-top: 10px; border-top: 1px solid var(--md-line-soft); color: var(--md-faint); font-size: 13px; text-align: center; }
/* แถบปุ่มล่าง */
.md_ft{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; padding: 14px 20px; background: #f7f8fb; border-top: 1px solid #eef0f5; }
.md_btn{
    font: inherit; font-size: 15px; font-weight: 400; border: 0; cursor: pointer; border-radius: 12px; padding: 10px 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, background .15s, color .15s;
}
.md_btn:focus{ outline: none; }
.md_btn:focus-visible{ outline: 3px solid rgba(41,79,127,.28); outline-offset: 2px; }
.md_btn:active{ transform: scale(.97); }
.md_btn:disabled{ cursor: wait; opacity: .8; }
.md_no{ background: transparent; color: var(--md-muted); }
.md_no:hover{ background: #eceef4; color: var(--md-ink); }
.md_deny{ background: #fff; color: var(--md-ink); box-shadow: inset 0 0 0 1px var(--md-line); }
.md_deny:hover{ background: #f1f2f7; }
.md_yes{ background: var(--md-accent); color: #fff; min-width: 96px; }
.md_yes:hover{ background: var(--md-accent-hover); }
.md_yes--danger{ background: var(--md-bad); }
.md_yes--danger:hover{ background: #9a1d13; }
/* ไม่มีปุ่ม (แจ้งผลแล้วปิดเอง): กว้างพอดีเนื้อหา + ขอบเท่ากันรอบด้าน + ไอคอนกลางแนวตั้งกับข้อความ (20 ต.ค. 69 — เหมือน mms ui.css) */
.md_box--noft{ width: auto; min-width: 300px; }
.md_box--noft .md_in{ padding: 22px 28px 22px 22px; align-items: center; }
.md_box--noft .md_head{ padding-top: 0; }
.md_box--noft .md_title:last-child{ margin-bottom: 0; }
.md_loading--full .md_ft{ display: none; }   /* "กำลังโหลด..." → ซ่อนปุ่ม */
.md_loading--full .md_in{ padding-bottom: 24px; align-items: center; }
.md_spin{ display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: md_r .7s linear infinite; }
@keyframes md_r{ to{ transform: rotate(360deg); } }
.md_bar{ position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(var(--md-accent-rgb), .5); }   /* แถบเวลาปิดเอง */
/* มือถือ: แผ่นเลื่อนขึ้นจากล่าง · หัวกลาง · ปุ่มเต็มกว้างเรียงตั้ง (ปุ่มยืนยันอยู่บน) */
@media (max-width: 575.98px){
    .md_back{ align-items: flex-end; padding: 0; }
    .md_box{ max-width: none !important; max-height: 92vh; border-radius: 22px 22px 0 0; transform: translateY(100%); opacity: 1; }
    .md_in{ flex-direction: column; align-items: center; text-align: center; padding-top: 14px; gap: 12px; }
    .md_in::before{ content: ""; width: 40px; height: 4px; border-radius: 4px; background: #d9dce5; }
    .md_box:not(.md_box--noicon) .md_html{ padding-left: 24px; }
    .md_html{ text-align: center; }
    .md_html:has(input, select, textarea, table){ text-align: left; }
    .md_ft{ flex-direction: column-reverse; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .md_ft .md_btn{ width: 100%; padding: 12px 18px; }
    .md_box--noft{ width: 100%; min-width: 0; }
    .md_box--noft .md_in{ padding: 14px 24px calc(26px + env(safe-area-inset-bottom)); }   /* แผ่นล่างไม่มีปุ่ม: เผื่อขอบล่าง + แถบโฮม iPhone */
}

/*----------- toast มุมขวาบน (Swal.fire({ toast: true }) / alert_add() ฯลฯ) -----------*/
.md_toasts{ position: fixed; top: 16px; right: 16px; z-index: 2200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; font-family: "Prompt", sans-serif; font-weight: 300; }
.md_toast{
    position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: 12px;
    min-width: 260px; max-width: min(380px, calc(100vw - 32px)); padding: 12px 10px 12px 12px;
    background: #fff; border-radius: 16px; box-shadow: 0 16px 36px -14px rgba(30,40,60,.30), 0 0 0 1px rgba(30,40,60,.05);
    transform: translateX(24px); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .25s;
}
.md_toast.show{ transform: none; opacity: 1; }
.md_tico{ flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; background: linear-gradient(135deg, var(--md-accent-2), var(--md-accent)); }
.md_tbody{ flex: 1; min-width: 0; }
.md_ttitle{ font-size: 14.5px; font-weight: 400; color: var(--md-ink); line-height: 1.4; }
.md_ttext{ font-size: 13px; color: var(--md-muted); line-height: 1.4; }
.md_tclose{ flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--md-faint); display: grid; place-items: center; cursor: pointer; font-size: 18px; }
.md_tclose:hover{ background: #f1f2f7; color: var(--md-ink); }
.md_tbar{ position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(var(--md-accent-rgb), .45); }
@media (max-width: 575.98px){
    .md_toasts{ left: 12px; right: 12px; top: 12px; align-items: stretch; }
    .md_toast{ max-width: none; transform: translateY(-16px); }
}

/*----------- modal ออกจากระบบ แบบ B (#lo_modal ใน menu/sub_menu_pc.php + alumni_sub_menu_pc.php → logout()) -----------*/
/* ฉากหลังเบลอ + มืด · ใส่ .show = เปิด (จางเข้า) · z-index สูงกว่า offcanvas เมนูมือถือ (1045) */
.lo_back{
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(16,24,48,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; font-family: "Prompt", sans-serif;
}
.lo_back.show{ opacity: 1; visibility: visible; }
/* กล่อง: เด้งขึ้นจากด้านล่างนิดๆ ตอนเปิด */
.lo_box{
    width: 100%; max-width: 380px; background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow: var(--md-shadow);
    transform: translateY(14px) scale(.96); opacity: 0; transition: transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
}
.lo_back.show .lo_box{ transform: none; opacity: 1; }
/* เนื้อหา: ไอคอนประตูไล่สี (accent → กรมท่า) + หัวข้อ + ข้อความ */
.lo_in{ padding: 28px 24px 20px; display: flex; gap: 16px; align-items: flex-start; }
.lo_ico{
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--md-accent-2), var(--md-accent)); color: #fff; font-size: 24px;
    box-shadow: 0 8px 16px -8px rgba(30,40,60,.35);
}
.lo_back.show .lo_ico i{ display: inline-block; animation: lo_door .9s .25s ease both; }   /* ไอคอนขยับเข้า-ออกเบาๆ ตอนเปิด */
@keyframes lo_door{ 0%{ transform: translateX(-4px); opacity: .3; } 60%{ transform: translateX(3px); opacity: 1; } 100%{ transform: none; } }
.lo_title{ margin: 2px 0 4px; font-size: 18px; font-weight: 600; color: var(--md-navy); }
.lo_text{ margin: 0; color: var(--md-muted); font-size: 14px; line-height: 1.5; }
.lo_text b{ color: var(--md-ink); font-weight: 500; }
/* แถบปุ่มล่าง: ยกเลิก (โปร่ง) + ออกจากระบบ (สี accent) */
.lo_ft{ display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; background: #f7f8fb; border-top: 1px solid #eef0f5; }
.lo_btn{
    font: inherit; font-size: 15px; border: 0; cursor: pointer; border-radius: 12px; padding: 11px 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, background .15s, color .15s;
}
.lo_btn:focus{ outline: none; }
.lo_btn:focus-visible{ outline: 3px solid rgba(41,79,127,.28); outline-offset: 2px; }
.lo_btn:active{ transform: scale(.97); }
.lo_btn:disabled{ cursor: wait; opacity: .85; }
.lo_no{ background: transparent; color: var(--md-muted); }
.lo_no:hover{ background: #eceef4; color: var(--md-ink); }
.lo_yes{ background: var(--md-accent); color: #fff; padding-inline: 20px; }
.lo_yes:hover{ background: var(--md-accent-hover); }
.lo_yes kbd{ font: inherit; font-size: 11px; opacity: .7; border: 1px solid rgba(255,255,255,.4); border-radius: 5px; padding: 0 5px; background: none; color: inherit; }
.lo_spin{ width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: lo_r .7s linear infinite; }   /* วงหมุน "กำลังออก..." */
@keyframes lo_r{ to{ transform: rotate(360deg); } }
/* มือถือ: กลายเป็นแผ่นเลื่อนขึ้นจากด้านล่าง (bottom sheet) · ปุ่มเต็มกว้าง กดด้วยนิ้วโป้งง่าย */
@media (max-width: 575px){
    .lo_back{ align-items: flex-end; padding: 0; }
    .lo_box{ max-width: none; border-radius: 22px 22px 0 0; transform: translateY(100%); }
    .lo_in{ flex-direction: column; align-items: center; text-align: center; padding-top: 14px; }
    .lo_in::before{ content: ""; width: 40px; height: 4px; border-radius: 4px; background: #d9dce5; margin-bottom: 6px; }   /* ขีดจับด้านบนแผ่น */
    .lo_ft{ flex-direction: column-reverse; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .lo_ft .lo_btn{ width: 100%; }
    .lo_yes kbd{ display: none; }
}