/**
 * DM9 ปุ่มมาตรฐาน — ใช้ร่วมกับ ui-tokens.css
 * คลาดหลัก: .dm-btn-save, .dm-btn-cta, .dm-btn-outline, .dm-btn-danger, .dm-btn-cancel, .dm-btn-back, .dm-btn-icon-action, .dm-btn-hit-md
 * .dm-btn-cta = ปุ่มหลักนอกฟอร์มบันทึก (เพิ่มรายการ, ดูรายละเอียด) โทนเดียวกับ save
 * .dm-btn-outline = ปุ่มขอบโทน primary (เช่น เปิด modal เลือกพิกัด)
 * .dm-btn-hit-md = ปุ่มพิเศษที่ไม่ใช้โทน dm — ให้สูง/padding เท่าปุ่มมาตรฐาน (ใส่คู่ .btn-sm ได้)
 * .curriculum-btn-save = alias เดิม (เลิกใช้ค่อยๆ ได้)
 */

/* ---------- Save / primary submit / CTA ---------- */
.dm-btn-save,
.dm-btn-cta,
.curriculum-btn-save,
.curriculum-form-page .curriculum-btn-save,
.curriculum-structure-page .curriculum-btn-save,
.subjectgroup-form-modal .curriculum-btn-save {
    background: linear-gradient(
        180deg,
        var(--dm-action-save-top) 0%,
        var(--dm-action-save-bottom) 100%
    );
    border: 1px solid var(--dm-action-save-border);
    color: var(--dm-action-save-text);
    font-weight: 600;
    border-radius: 8px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.15);
}

.dm-btn-save:hover,
.dm-btn-save:focus,
.dm-btn-cta:hover,
.dm-btn-cta:focus,
.curriculum-btn-save:hover,
.curriculum-btn-save:focus,
.curriculum-form-page .curriculum-btn-save:hover,
.curriculum-form-page .curriculum-btn-save:focus,
.curriculum-structure-page .curriculum-btn-save:hover,
.curriculum-structure-page .curriculum-btn-save:focus,
.subjectgroup-form-modal .curriculum-btn-save:hover,
.subjectgroup-form-modal .curriculum-btn-save:focus {
    background: linear-gradient(
        180deg,
        var(--dm-action-save-hover-top) 0%,
        var(--dm-action-save-hover-bottom) 100%
    );
    border-color: var(--dm-action-save-hover-border);
    color: var(--dm-action-save-text);
}

.dm-btn-save.btn-sm,
.dm-btn-cta.btn-sm,
.curriculum-btn-save.btn-sm,
.subjectgroup-form-modal .curriculum-btn-save.btn-sm {
    padding: var(--dm-btn-pad-y-sm) var(--dm-btn-pad-x-sm);
    border-radius: 6px;
    font-size: 0.875rem;
}

/* ---------- Outline primary (เช่น ปุ่มเปิดแผนที่) ---------- */
.dm-btn-outline {
    background-color: transparent;
    border: 1px solid var(--dm-action-save-border);
    color: var(--dm-action-save-solid);
    font-weight: 600;
    border-radius: 8px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: none;
}

.dm-btn-outline:hover,
.dm-btn-outline:focus {
    background-color: rgba(73, 103, 216, 0.08);
    border-color: var(--dm-action-save-hover-border);
    color: var(--dm-action-save-solid-hover);
}

.dm-btn-outline.btn-sm {
    padding: var(--dm-btn-pad-y-sm) var(--dm-btn-pad-x-sm);
    border-radius: 6px;
    font-size: 0.875rem;
}

/* ---------- Cancel / secondary ---------- */
.dm-btn-cancel {
    white-space: nowrap;
    background-color: var(--dm-action-cancel-bg);
    border: 1px solid var(--dm-action-cancel-border);
    color: var(--dm-action-cancel-text);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.dm-btn-cancel:hover,
.dm-btn-cancel:focus {
    background-color: var(--dm-action-cancel-hover-bg);
    border-color: var(--dm-action-cancel-hover-border);
    color: var(--dm-action-cancel-hover-text);
}

.dm-btn-cancel.btn-sm {
    padding: var(--dm-btn-pad-y-sm) var(--dm-btn-pad-x-sm);
    border-radius: 6px;
    font-size: 0.875rem;
}

/* ---------- Back (กลับหน้าก่อน) — โทนเดียวกับ cancel ---------- */
.dm-btn-back {
    white-space: nowrap;
    background-color: var(--dm-action-cancel-bg);
    border: 1px solid var(--dm-action-cancel-border);
    color: var(--dm-action-cancel-text);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.dm-btn-back:hover,
.dm-btn-back:focus {
    background-color: var(--dm-action-cancel-hover-bg);
    border-color: var(--dm-action-cancel-hover-border);
    color: var(--dm-action-cancel-hover-text);
}

.dm-btn-back.btn-sm {
    padding: var(--dm-btn-pad-y-sm) var(--dm-btn-pad-x-sm);
    border-radius: 6px;
    font-size: 0.875rem;
}

/* ---------- Danger (ลบ / ทำลาย) ---------- */
.dm-btn-danger {
    white-space: nowrap;
    background-color: var(--dm-action-danger-bg);
    border: 1px solid var(--dm-action-danger-border, var(--dm-action-danger-bg));
    color: var(--dm-action-danger-text);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.12);
}

.dm-btn-danger:hover,
.dm-btn-danger:focus {
    background-color: var(--dm-action-danger-hover-bg);
    border-color: var(--dm-action-danger-hover-border, var(--dm-action-danger-hover-bg));
    color: var(--dm-action-danger-hover-text, var(--dm-action-danger-text));
}

.dm-btn-danger.btn-sm {
    padding: var(--dm-btn-pad-y-sm) var(--dm-btn-pad-x-sm);
    border-radius: 6px;
    font-size: 0.875rem;
}

/* ---------- Semantic palette variants (Bootstrap-like reusable tones) ---------- */
.dm-btn-primary {
    background-color: var(--dm-btn-primary-bg, var(--dm-primary, #34495e));
    border: 1px solid var(--dm-btn-primary-border, var(--dm-btn-primary-bg, var(--dm-primary, #34495e)));
    color: var(--dm-btn-primary-text, #ffffff);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.dm-btn-primary:hover,
.dm-btn-primary:focus {
    background-color: var(--dm-btn-primary-hover-bg, var(--dm-btn-primary-bg, var(--dm-primary, #34495e)));
    border-color: var(--dm-btn-primary-hover-border, var(--dm-btn-primary-hover-bg, var(--dm-btn-primary-bg, var(--dm-primary, #34495e))));
    color: var(--dm-btn-primary-hover-text, var(--dm-btn-primary-text, #ffffff));
}

.dm-btn-secondary {
    background-color: var(--dm-btn-secondary-bg, var(--dm-bg-soft, #eef2f5));
    border: 1px solid var(--dm-btn-secondary-border, var(--dm-border, #dce4ec));
    color: var(--dm-btn-secondary-text, var(--dm-text-main, #2c3e50));
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.dm-btn-secondary:hover,
.dm-btn-secondary:focus {
    background-color: var(--dm-btn-secondary-hover-bg, var(--dm-btn-secondary-bg, var(--dm-bg-soft, #eef2f5)));
    border-color: var(--dm-btn-secondary-hover-border, var(--dm-btn-secondary-border, var(--dm-border, #dce4ec)));
    color: var(--dm-btn-secondary-hover-text, var(--dm-btn-secondary-text, var(--dm-text-main, #2c3e50)));
}

.dm-btn-success {
    background-color: var(--dm-btn-success-bg, #198754);
    border: 1px solid var(--dm-btn-success-border, var(--dm-btn-success-bg, #198754));
    color: var(--dm-btn-success-text, #ffffff);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.dm-btn-success:hover,
.dm-btn-success:focus {
    background-color: var(--dm-btn-success-hover-bg, var(--dm-btn-success-bg, #198754));
    border-color: var(--dm-btn-success-hover-border, var(--dm-btn-success-hover-bg, var(--dm-btn-success-bg, #198754)));
    color: var(--dm-btn-success-hover-text, var(--dm-btn-success-text, #ffffff));
}

.dm-btn-warning {
    background-color: var(--dm-btn-warning-bg, #ffc107);
    border: 1px solid var(--dm-btn-warning-border, var(--dm-btn-warning-bg, #ffc107));
    color: var(--dm-btn-warning-text, #212529);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.dm-btn-warning:hover,
.dm-btn-warning:focus {
    background-color: var(--dm-btn-warning-hover-bg, var(--dm-btn-warning-bg, #ffc107));
    border-color: var(--dm-btn-warning-hover-border, var(--dm-btn-warning-hover-bg, var(--dm-btn-warning-bg, #ffc107)));
    color: var(--dm-btn-warning-hover-text, var(--dm-btn-warning-text, #212529));
}

.dm-btn-danger-solid {
    background-color: var(--dm-btn-danger-bg, #dc3545);
    border: 1px solid var(--dm-btn-danger-border, var(--dm-btn-danger-bg, #dc3545));
    color: var(--dm-btn-danger-text, #ffffff);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.dm-btn-danger-solid:hover,
.dm-btn-danger-solid:focus {
    background-color: var(--dm-btn-danger-hover-bg, var(--dm-btn-danger-bg, #dc3545));
    border-color: var(--dm-btn-danger-hover-border, var(--dm-btn-danger-hover-bg, var(--dm-btn-danger-bg, #dc3545)));
    color: var(--dm-btn-danger-hover-text, var(--dm-btn-danger-text, #ffffff));
}

.dm-btn-primary.btn-sm,
.dm-btn-secondary.btn-sm,
.dm-btn-success.btn-sm,
.dm-btn-warning.btn-sm,
.dm-btn-danger-solid.btn-sm {
    padding: var(--dm-btn-pad-y-sm) var(--dm-btn-pad-x-sm);
    border-radius: 6px;
    font-size: 0.875rem;
}

/*
 * ความสูงปุ่มข้อความชั้น md / sm — คงความสูงจริงเท่ากัน (รวม <a> กับ <button>)
 * ใช้ height + padding แนวตั้ง 0 + line-height จาก token — ไม่กระทบ .dm-btn-icon-action
 */
.btn.dm-btn-save:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-cta:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-cancel:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-back:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-outline:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-danger:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-primary:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-secondary:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-success:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-warning:not(.btn-sm):not(.dm-btn-icon-action),
.btn.dm-btn-danger-solid:not(.btn-sm):not(.dm-btn-icon-action) {
    box-sizing: border-box;
    min-height: var(--dm-btn-min-height);
    height: var(--dm-btn-min-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--dm-btn-pad-x);
    padding-right: var(--dm-btn-pad-x);
    line-height: var(--dm-btn-text-line-height, 1.35);
}

.btn.btn-sm.dm-btn-save:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-cta:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-cancel:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-back:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-outline:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-danger:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-primary:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-secondary:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-success:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-warning:not(.dm-btn-icon-action),
.btn.btn-sm.dm-btn-danger-solid:not(.dm-btn-icon-action) {
    box-sizing: border-box;
    min-height: var(--dm-btn-min-height-sm);
    height: var(--dm-btn-min-height-sm);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--dm-btn-pad-x-sm);
    padding-right: var(--dm-btn-pad-x-sm);
    line-height: var(--dm-btn-text-line-height-sm, 1.25);
}

/* แถบหัวการ์ด / โมดัล — กันปุ่มถูกดึงสูงผิดปกติจาก flex บรรพบุรุษ */
.card-header.d-flex .btn,
.modal-header .btn,
.modal-footer .btn {
    align-self: center;
}

/* ---------- ปุ่มพิเศษ (Bootstrap/CoreUI) ให้สูงเท่าปุ่มมาตรฐาน — ใช้คู่ .btn ---------- */
.btn.dm-btn-hit-md {
    min-height: var(--dm-btn-min-height);
    padding: var(--dm-btn-pad-y) var(--dm-btn-pad-x);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.btn.btn-sm.dm-btn-hit-md {
    min-height: var(--dm-btn-min-height-sm);
    padding: var(--dm-btn-pad-y-sm) var(--dm-btn-pad-x-sm);
    font-size: 0.875rem;
}

/* ---------- ปุ่มไอคอนในแถวตาราง (ดู / แก้ไข / ลบ) — ขนาดเท่ากันทุกโทน ---------- */
/* ใช้คู่: .btn .btn-sm .dm-btn-icon-action + (.dm-btn-cta | .dm-btn-outline | .dm-btn-danger) */
.btn.btn-sm.dm-btn-icon-action {
    width: var(--dm-btn-icon-action-size);
    min-width: var(--dm-btn-icon-action-size);
    height: var(--dm-btn-icon-action-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.btn.btn-sm.dm-btn-icon-action > i {
    line-height: 1;
}

/* ---------- Admin layout: CTA / save โทนเทา–ดำ (ไม่ใช้ --dm-action-save-* สีน้ำเงินของธีม Light) ---------- */
body.admin-theme .dm-btn-save,
body.admin-theme .dm-btn-cta,
body.admin-theme .curriculum-btn-save,
body.admin-theme .curriculum-form-page .curriculum-btn-save,
body.admin-theme .curriculum-structure-page .curriculum-btn-save,
body.admin-theme .subjectgroup-form-modal .curriculum-btn-save {
    background: linear-gradient(180deg, #3d444c 0%, #252a31 100%);
    border-color: #1a1e24;
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.22);
}

body.admin-theme .dm-btn-save:hover,
body.admin-theme .dm-btn-save:focus,
body.admin-theme .dm-btn-cta:hover,
body.admin-theme .dm-btn-cta:focus,
body.admin-theme .curriculum-btn-save:hover,
body.admin-theme .curriculum-btn-save:focus,
body.admin-theme .curriculum-form-page .curriculum-btn-save:hover,
body.admin-theme .curriculum-form-page .curriculum-btn-save:focus,
body.admin-theme .curriculum-structure-page .curriculum-btn-save:hover,
body.admin-theme .curriculum-structure-page .curriculum-btn-save:focus,
body.admin-theme .subjectgroup-form-modal .curriculum-btn-save:hover,
body.admin-theme .subjectgroup-form-modal .curriculum-btn-save:focus {
    background: linear-gradient(180deg, #4c545e 0%, #2f363e 100%);
    border-color: #12151a;
    color: #ffffff;
}

body.admin-theme .dm-btn-outline {
    border-color: #495057;
    color: #343a40;
}

body.admin-theme .dm-btn-outline:hover,
body.admin-theme .dm-btn-outline:focus {
    background-color: rgba(33, 37, 41, 0.08);
    border-color: #212529;
    color: #212529;
}