/* =====================================================================
   SmartCAD Enterprise UI Patch
   Version: 2026-05-06-ent
   Purpose:
   - ปรับฟอนต์ภาษาไทยให้อ่านง่าย ลดอาการเวียนหัว
   - ยกระดับหน้า unlock_directives.php ให้เป็น Enterprise UI
   - Override CSS เดิมอย่างปลอดภัย ไม่กระทบ logic PHP/Database
   Install:
   <link rel="stylesheet" href="/assets/css/ui.css?v=20260506-final">
   ===================================================================== */

:root {
  --sc-font-thai: "Noto Sans Thai", "Sarabun", "Leelawadee UI", "Segoe UI", Tahoma, Arial, sans-serif;

  --sc-page-bg: #f5f7fb;
  --sc-surface: #ffffff;
  --sc-surface-soft: #f8fafc;
  --sc-surface-blue: #f1f7ff;

  --sc-text: #1f2937;
  --sc-heading: #0f172a;
  --sc-muted: #64748b;
  --sc-muted-2: #7a8798;

  --sc-border: #dbe4f0;
  --sc-border-strong: #c5d0df;

  --sc-primary: #2563eb;
  --sc-primary-hover: #1d4ed8;
  --sc-primary-soft: #eff6ff;

  --sc-success: #059669;
  --sc-warning: #d97706;
  --sc-danger: #dc2626;
  --sc-info: #0891b2;

  --sc-radius-sm: 10px;
  --sc-radius-md: 16px;
  --sc-radius-lg: 22px;

  --sc-shadow-card: 0 10px 30px rgba(15, 23, 42, 0.06);
  --sc-shadow-hover: 0 16px 38px rgba(15, 23, 42, 0.10);
  --sc-focus: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

/* -----------------------------
   Base readability
   ----------------------------- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sc-font-thai) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.66 !important;
  color: var(--sc-text) !important;
  letter-spacing: 0 !important;
  background: var(--sc-page-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
   ห้ามใช้ body * เพื่อบังคับ font-family เพราะจะทับ Font Awesome / Bootstrap Icons
   ให้บังคับเฉพาะ element ที่เป็นข้อความเท่านั้น
*/
body :where(
  h1, h2, h3, h4, h5, h6,
  p, span, div, label, small, strong, em,
  a, button, input, select, textarea, option,
  table, thead, tbody, tfoot, tr, th, td,
  .ud-wrap, .ud-panel, .ud-input, .ud-select, .ud-textarea,
  .ud-label, .ud-hint, .ud-soft, .ud-detail, .ud-badge,
  .select2-container, .select2-dropdown, .select2-results__option, .select2-search__field,
  .swal2-popup, .swal2-title, .swal2-html-container
):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fat):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not(.bx):not(.ri):not(.material-icons):not(.material-symbols-outlined) {
  font-family: var(--sc-font-thai) !important;
}

/* ลดความแน่นของ layout เดิม แต่ไม่ทำให้หลวมเกิน */
main.main-content,
.main-content {
  background: var(--sc-page-bg) !important;
}

/* -----------------------------
   Unlock directive enterprise scope
   ----------------------------- */
.unlock-directives-page,
.ud-wrap.unlock-directives-page,
.ud-wrap {
  font-family: var(--sc-font-thai) !important;
  color: var(--sc-text) !important;
  line-height: 1.62 !important;
}

.ud-wrap {
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.055), transparent 360px),
    linear-gradient(180deg, #f7f9fd 0%, var(--sc-page-bg) 100%) !important;
  padding: 24px 28px 56px !important;
  gap: 20px !important;
}

/* -----------------------------
   Header
   ----------------------------- */
.ud-header {
  background: rgba(255,255,255,0.76) !important;
  border: 1px solid rgba(219,228,240,0.9) !important;
  border-radius: var(--sc-radius-lg) !important;
  padding: 20px 22px !important;
  box-shadow: var(--sc-shadow-card) !important;
  backdrop-filter: blur(8px);
}

.ud-header h1 {
  font-size: clamp(1.28rem, 1.5vw, 1.62rem) !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  color: var(--sc-heading) !important;
  letter-spacing: -0.01em !important;
}

.ud-header p,
.ud-panel-sub,
.ud-soft,
.ud-hint {
  color: var(--sc-muted) !important;
  line-height: 1.55 !important;
}

.ud-hero-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 12px 24px rgba(37,99,235,0.22) !important;
}

.ud-scope-chip {
  min-height: 28px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  color: #334155 !important;
  background: #f8fafc !important;
  border-color: var(--sc-border) !important;
}

/* -----------------------------
   Panels / Cards
   ----------------------------- */
.ud-panel {
  border: 1px solid rgba(219, 228, 240, 0.95) !important;
  border-radius: var(--sc-radius-lg) !important;
  box-shadow: var(--sc-shadow-card) !important;
  overflow: hidden !important;
  background: var(--sc-surface) !important;
}

.ud-panel-head {
  padding: 18px 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom-color: var(--sc-border) !important;
}

.ud-panel-title {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: var(--sc-heading) !important;
  letter-spacing: -0.005em !important;
}

.ud-panel-title i {
  color: var(--sc-primary) !important;
}

.ud-panel-body {
  padding: 22px !important;
}

/* -----------------------------
   Grid balance
   ----------------------------- */
.ud-grid {
  grid-template-columns: minmax(400px, 460px) minmax(0, 1fr) !important;
  gap: 22px !important;
}

.ud-col-side {
  top: 18px !important;
}

/* -----------------------------
   Stats cards
   ----------------------------- */
.ud-stat {
  min-height: 88px !important;
  border-radius: 18px !important;
  border-color: rgba(219,228,240,0.95) !important;
  box-shadow: var(--sc-shadow-card) !important;
  background: rgba(255,255,255,0.92) !important;
}

.ud-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sc-shadow-hover) !important;
}

.ud-stat-value {
  font-size: 1.55rem !important;
  color: var(--sc-heading) !important;
  letter-spacing: -0.02em !important;
}

.ud-stat-label {
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  color: var(--sc-muted) !important;
}

/* -----------------------------
   Forms
   ----------------------------- */
.ud-label {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 2px !important;
}

.ud-field {
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.ud-input,
.ud-select,
.ud-textarea,
.ud-search input,
.select2-container .select2-selection--single {
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  background-color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.ud-input,
.ud-select,
.ud-textarea {
  padding: 11px 14px !important;
}

.ud-textarea {
  min-height: 128px !important;
  resize: vertical !important;
}

.ud-input::placeholder,
.ud-textarea::placeholder,
.ud-search input::placeholder,
.select2-selection__placeholder,
.select2-search__field::placeholder {
  color: #98a2b3 !important;
  opacity: 1 !important;
}

.ud-input:focus,
.ud-select:focus,
.ud-textarea:focus,
.ud-search input:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--sc-primary) !important;
  box-shadow: var(--sc-focus) !important;
  outline: 0 !important;
}

.ud-hint {
  font-size: 0.82rem !important;
}

.ud-row2 {
  gap: 14px !important;
}

/* -----------------------------
   Select2
   ----------------------------- */
.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sc-text) !important;
  font-size: 1rem !important;
  line-height: 48px !important;
  padding-left: 14px !important;
  padding-right: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px !important;
  right: 10px !important;
}

.select2-dropdown {
  border-color: var(--sc-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.select2-search--dropdown {
  padding: 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--sc-border) !important;
  padding: 8px 12px !important;
  font-size: 0.98rem !important;
}

.select2-results__option {
  padding: 11px 14px !important;
  font-size: 0.96rem !important;
  line-height: 1.5 !important;
  color: var(--sc-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--sc-primary-soft) !important;
  color: var(--sc-primary-hover) !important;
}

.select2-results__message {
  color: var(--sc-muted) !important;
  padding: 14px !important;
}

/* -----------------------------
   Priority cards / upload
   ----------------------------- */
.ud-priority-card {
  border-radius: 14px !important;
  padding: 12px 10px !important;
  border-color: var(--sc-border) !important;
}

.ud-priority-card.is-checked {
  box-shadow: 0 0 0 4px rgba(37,99,235,0.08) !important;
}

.ud-file-drop {
  border-radius: 16px !important;
  padding: 16px !important;
  background: #f8fafc !important;
  border-color: var(--sc-border-strong) !important;
}

.ud-file-drop:hover {
  background: #eff6ff !important;
  border-color: var(--sc-primary) !important;
}

.ud-file-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
}

/* -----------------------------
   Buttons
   ----------------------------- */
.ud-btn,
.ud-submit,
.ud-icon-btn {
  border-radius: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.ud-submit {
  min-height: 50px !important;
  font-size: 1rem !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 12px 22px rgba(37,99,235,0.20) !important;
}

.ud-submit:hover:not(:disabled) {
  box-shadow: 0 16px 28px rgba(37,99,235,0.28) !important;
}

/* -----------------------------
   Toolbar / Tabs
   ----------------------------- */
.ud-toolbar {
  padding: 16px 18px !important;
  gap: 12px !important;
}

.ud-tabs {
  background: #eef2f7 !important;
  border-radius: 14px !important;
  padding: 5px !important;
}

.ud-tab {
  border-radius: 10px !important;
  padding: 8px 13px !important;
  font-size: 0.86rem !important;
}

.ud-tab.is-active {
  color: var(--sc-primary) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.07) !important;
}

/* -----------------------------
   Table
   ----------------------------- */
.ud-table {
  min-width: 1120px !important;
}

.ud-table thead th {
  padding: 13px 18px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
}

.ud-table tbody td {
  padding: 16px 18px !important;
  color: var(--sc-text) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

.ud-table tbody tr:hover {
  background: #f8fbff !important;
}

.ud-detail {
  color: #475569 !important;
  font-size: 0.9rem !important;
  line-height: 1.58 !important;
}

.ud-code {
  font-size: 0.82rem !important;
  color: var(--sc-primary) !important;
}

/* -----------------------------
   Badges
   ----------------------------- */
.ud-badge {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* -----------------------------
   Empty state
   ----------------------------- */
.ud-empty {
  padding: 76px 24px !important;
}

.ud-empty h4 {
  font-size: 1.12rem !important;
  color: var(--sc-heading) !important;
  font-weight: 800 !important;
}

.ud-empty p {
  font-size: 0.95rem !important;
  color: var(--sc-muted) !important;
}

/* -----------------------------
   Alert
   ----------------------------- */
.ud-alert {
  border-radius: 16px !important;
  padding: 15px 18px !important;
  box-shadow: var(--sc-shadow-card) !important;
}

/* -----------------------------
   Responsive
   ----------------------------- */
@media (max-width: 1280px) {
  .ud-grid {
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 1080px) {
  .ud-grid {
    grid-template-columns: 1fr !important;
  }

  .ud-col-side {
    position: static !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15.75px !important;
    line-height: 1.72 !important;
  }

  .ud-wrap {
    padding: 14px 12px 44px !important;
  }

  .ud-header {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  .ud-header-left {
    align-items: flex-start !important;
  }

  .ud-hero-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  .ud-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  .ud-panel {
    border-radius: 18px !important;
  }

  .ud-panel-body {
    padding: 16px !important;
  }

  .ud-row2 {
    grid-template-columns: 1fr !important;
  }

  .ud-priority {
    grid-template-columns: 1fr !important;
  }

  .ud-toolbar {
    align-items: stretch !important;
  }

  .ud-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .ud-tab {
    white-space: nowrap !important;
  }
}

/* -----------------------------
   Print
   ----------------------------- */
@media print {
  body,
  .ud-wrap {
    background: #fff !important;
  }

  .ud-header,
  .ud-panel,
  .ud-stat {
    box-shadow: none !important;
  }

  .ud-top-actions,
  .ud-col-side,
  .ud-toolbar {
    display: none !important;
  }
}


/* =====================================================================
   Select2 Cooperative Lookup Patch — 2026-05-06
   เป้าหมาย: แสดงเฉพาะ "รหัสสหกรณ์ - ชื่อสหกรณ์" และเพิ่มพื้นที่ dropdown
   ===================================================================== */
.unlock-directives-page .ud-grid {
  grid-template-columns: minmax(500px, 540px) minmax(0, 1fr) !important;
}

.unlock-directives-page .ud-col-side {
  min-width: 0 !important;
}

.unlock-directives-page #cooperative_lookup + .select2-container,
.unlock-directives-page .select2-container {
  width: 100% !important;
}

.unlock-directives-page .select2-dropdown {
  border-radius: 18px !important;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
}

.unlock-directives-page .select2-search--dropdown {
  padding: 12px !important;
  background: #ffffff !important;
}

.unlock-directives-page .select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  border: 2px solid #dbe7f5 !important;
  padding: 10px 14px !important;
  font-size: 1.04rem !important;
  line-height: 1.45 !important;
  color: #111827 !important;
  background: #ffffff !important;
}

.unlock-directives-page .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13) !important;
  outline: 0 !important;
}

.unlock-directives-page .select2-results > .select2-results__options {
  max-height: 460px !important;
  overflow-y: auto !important;
}

.unlock-directives-page .select2-results__option {
  padding: 12px 16px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  font-size: 1rem !important;
  line-height: 1.45 !important;
  color: #172033 !important;
  border-bottom: 1px solid #eef2f7 !important;
}

.unlock-directives-page .select2-results__option:last-child {
  border-bottom: 0 !important;
}

.unlock-directives-page .coop-result-one-line,
.unlock-directives-page .select2-results__option .coop-result-one-line {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 650 !important;
  color: inherit !important;
}

.unlock-directives-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.unlock-directives-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 600 !important;
}

@media (max-width: 1280px) {
  .unlock-directives-page .ud-grid {
    grid-template-columns: minmax(460px, 500px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  .unlock-directives-page .ud-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================================
   Icon Safe Guard — ป้องกัน ui.css ทับ font icon แม้โหลด icon-fix.css ผิดลำดับ
   ===================================================================== */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1 !important;
}
.fab, .fa-brands, [class^="fa-brands"], [class*=" fa-brands"] {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}
.far, .fa-regular, [class^="fa-regular"], [class*=" fa-regular"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
}
.fa, .fas, .fa-solid, [class^="fa-solid"], [class*=" fa-solid"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
.bi, [class^="bi-"], [class*=" bi-"] {
  font-family: "bootstrap-icons" !important;
  font-style: normal !important;
  line-height: 1 !important;
}