/* =============================================================================
   ไฟล์: app/static/css/style.css
   -----------------------------------------------------------------------------
   วัตถุประสงค์ของไฟล์นี้:
       ไฟล์ CSS หลักของระบบ (Phase 1) ใช้จัดรูปแบบหน้าตาเบื้องต้นให้ดูสะอาด
       อ่านง่าย โดยยังไม่ใช้ CSS Framework ภายนอกใด ๆ (เช่น Bootstrap) เพื่อ
       ให้ Junior Programmer เห็นโครงสร้าง CSS แบบพื้นฐานทั้งหมดได้ชัดเจน
       ก่อนที่ Phase ถัดไปอาจพิจารณานำ Framework มาช่วยเสริมความสวยงาม
   ============================================================================= */

/* --- Reset ค่าพื้นฐานของ Browser ---
   * { } หมายถึง เลือก "ทุก element" บนหน้าเว็บ
   box-sizing: border-box ทำให้การคำนวณ width/height รวม padding/border
   ไปด้วยเลย (ทำให้จัด layout ง่ายขึ้นมาก ไม่ต้องคำนวณเผื่อ padding เอง) */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- ตัวแปรสีของธีม (CSS Custom Properties) ---
   ค่าเริ่มต้นกำหนดไว้ตรงนี้ และจะถูก "ทับ" ด้วยค่าจริงจากเมนู "ตั้งค่าระบบ"
   ผ่าน <style> ที่ฝังใน <head> ของ base.html (ดึงจากตาราง app_settings)
   ทุกจุดในไฟล์นี้ที่เป็นสีแบรนด์จะอ้างอิงผ่าน var(...) เพื่อให้เปลี่ยนธีม
   ได้ทั้งระบบโดยไม่ต้องแก้ไฟล์ CSS */
:root {
    --color-primary: #1a2b45;         /* สีหลัก: แถบเมนู, หัวตาราง, ปุ่มหลัก */
    --color-primary-hover: #12203a;   /* สีหลักตอนเอาเมาส์ชี้ */
    --color-accent: #27ae60;          /* สีเน้น: ป้ายสถานะ/แบดจ์ */
}

body {
    font-family: "Segoe UI", "Sarabun", Tahoma, sans-serif; /* Sarabun เป็นฟอนต์ที่อ่านภาษาไทยได้สวยงาม */
    background-color: #f4f6f9;
    color: #2c3e50;
    line-height: 1.6;
}

/* --- แถบเมนูด้านบน (Navbar) --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary); /* สีน้ำเงินเข้ม สื่อถึงความน่าเชื่อถือ เหมาะกับธุรกิจการเงิน/ประกันภัย */
    color: #ffffff;
    padding: 0.75rem 1.5rem;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.1rem;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge {
    background-color: var(--color-accent);
    color: #fff;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
}

.btn-logout {
    color: #fff;
    background-color: #c0392b;
    padding: 0.35rem 0.9rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-logout:hover {
    background-color: #a93226;
}

/* --- กล่องแจ้งเตือน (Flash Messages) --- */
.flash-container {
    max-width: 900px;
    margin: 1rem auto 0;
    padding: 0 1rem;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.alert-success { background-color: #d4efdf; color: #1e8449; }
.alert-danger  { background-color: #fadbd8; color: #922b21; }
.alert-warning { background-color: #fdebd0; color: #9c640c; }
.alert-info    { background-color: #d6eaf8; color: #21618c; }

/* --- พื้นที่เนื้อหาหลัก --- */
.main-content {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* --- หน้า Login --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.login-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 400px;
}

.login-title {
    text-align: center;
    margin-bottom: 0.25rem;
    color: var(--color-primary);
}

.login-subtitle {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 1.1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-error {
    display: block;
    color: #c0392b;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.btn-submit {
    display: inline-block;
    width: 100%;
    padding: 0.7rem;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn-submit:hover {
    background-color: var(--color-primary-hover);
}

/* --- หน้า Dashboard --- */
.permission-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.permission-table th, .permission-table td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #ecf0f1;
    text-align: left;
}

.permission-table th {
    background-color: var(--color-primary);
    color: #fff;
}

.empty-state {
    color: #7f8c8d;
    font-style: italic;
    margin-top: 1rem;
}

/* --- หน้า Error --- */
.error-container {
    text-align: center;
    padding: 4rem 1rem;
}

.error-code {
    font-size: 4rem;
    color: #c0392b;
}

.error-message {
    font-size: 1.2rem;
    margin: 1rem 0 2rem;
}

/* --- Footer --- */
.footer {
    text-align: center;
    color: #95a5a6;
    font-size: 0.85rem;
    padding: 1.5rem 0;
}

.navbar-brand a { color: inherit; text-decoration: none; }

/* =============================================================================
   ส่วนที่เพิ่มใน Phase 2 (Admin UI: จัดการผู้ใช้งาน / บทบาท / สิทธิ์)
   -----------------------------------------------------------------------------
   ยังคงไม่ใช้ CSS Framework ภายนอก เพื่อให้ Junior Programmer เห็นโครงสร้าง
   ทั้งหมดได้ชัดเจน (Phase ถัดไปจึงค่อยพิจารณานำ Bootstrap เข้ามาเสริม)
   ============================================================================= */

/* --- โครงหน้า: Sidebar + พื้นที่เนื้อหา --- */
.layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 120px); /* กันไม่ให้ footer ลอยขึ้นมากลางจอตอนเนื้อหาน้อย */
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #e5e9f0;
    padding: 1.25rem 0;
    align-self: stretch;
}

.sidebar-group { margin-bottom: 1.25rem; }

.sidebar-group-title {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #97a3b6;
    padding: 0 1.25rem;
    margin-bottom: 0.35rem;
}

.sidebar-link {
    display: block;
    padding: 0.5rem 1.25rem;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}

.sidebar-link:hover { background: #f4f6f9; }

.sidebar-link.is-active {
    background: #eef2f8;
    border-left-color: var(--color-primary);
    font-weight: 600;
}

.sidebar-link.is-disabled {
    color: #b6bfce;
    cursor: not-allowed;
}

.sidebar-link.is-disabled em {
    font-style: normal;
    font-size: 0.68rem;
    background: #eef0f3;
    color: #97a3b6;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    margin-left: 0.25rem;
}

.page-area {
    flex: 1;
    min-width: 0; /* กันตารางกว้าง ๆ ดัน layout พัง (flexbox overflow fix) */
    overflow-x: clip; /* คลิปเนื้อหาที่ล้นแนวนอน โดยไม่กระทบ position:sticky ของ sidebar/navbar */
}

/* ปรับ .main-content เดิมให้เข้ากับ layout ที่มี sidebar (กว้างขึ้น ชิดซ้าย) */
.layout .page-area .main-content {
    max-width: 1120px;
    margin: 1.5rem auto;
}
.layout .page-area .flash-container { max-width: 1120px; }

/* --- หัวเรื่องของหน้า + ปุ่มการกระทำหลัก --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.page-header h1 { font-size: 1.4rem; color: var(--color-primary); }

/* --- ระบบปุ่ม (Buttons) --- */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    background: #e9edf2;
    color: #2c3e50;
}
.btn:hover { filter: brightness(0.96); }

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-secondary { background: #ffffff; color: var(--color-primary); border-color: #c9d2df; }
.btn-success { background: #27ae60; color: #fff; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-danger-outline { background: #fff; color: #c0392b; border-color: #e2b3ad; }
.btn-link {
    background: transparent;
    color: #21618c;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
.btn-link:hover { text-decoration: underline; filter: none; }

/* --- แถบตัวกรอง --- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    background: #fff;
    padding: 0.9rem 1rem;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    margin-bottom: 1.1rem;
}
.filter-bar .form-input { width: auto; flex: 0 1 220px; }

/* --- ตารางข้อมูล --- */
.table-wrapper { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #ecf0f1;
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    background-color: var(--color-primary);
    color: #fff;
    white-space: nowrap;
}

.data-table tbody tr:hover { background: #f8fafc; }

.data-table .row-inactive { background: #fbf3f2; color: #8a8a8a; }
.data-table .col-actions { white-space: nowrap; }
.data-table .col-num, .data-table .col-check { text-align: center; }
.data-table code {
    background: #eef0f3;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.cell-desc, .cell-schedule { max-width: 280px; font-size: 0.85rem; color: #55606e; }
.result-count { margin-top: 0.75rem; color: #7f8c8d; font-size: 0.85rem; }
.text-muted { color: #aab2bf; }

.inline-form { display: inline; }

/* --- ป้ายสถานะ (Tag / Badge) --- */
.tag {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    white-space: nowrap;
}
.tag-active { background: #d4efdf; color: #1e8449; }
.tag-inactive { background: #f2f3f4; color: #7f8c8d; }
.tag-locked { background: #fdebd0; color: #9c640c; }

/* --- การ์ดฟอร์ม --- */
.form-card {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.form-card-narrow { max-width: 560px; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
}
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 640px) {
    .form-grid, .form-grid-2 { grid-template-columns: 1fr; }
    .sidebar { width: 180px; }
}

.form-fieldset {
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0 1.25rem;
}
.form-fieldset legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.field-hint {
    font-size: 0.8rem;
    color: #7f8c8d;
    margin: 0.2rem 0 0.6rem;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* รายการ checkbox แนวนอน (ฟิลด์ work_days ที่ render เป็น <ul>) */
.checkbox-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.checkbox-list li { display: flex; align-items: center; gap: 0.3rem; }

/* --- ตารางเมทริกซ์สิทธิ์ --- */
.perm-matrix .col-menu { min-width: 240px; }
.perm-matrix .col-check { width: 90px; }
.perm-matrix .menu-key {
    display: block;
    font-size: 0.72rem;
    color: #aab2bf;
    margin-top: 0.15rem;
}
.perm-matrix .group-row td {
    background: #eef2f8;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.82rem;
}
.perm-matrix .mini-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: #cdd6e4;
    margin-top: 0.2rem;
}
.perm-matrix input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* --- การ์ดทางลัดในหน้า Dashboard --- */
.shortcut-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.25rem 0 1.75rem;
}
.shortcut-card {
    flex: 1 1 260px;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: #2c3e50;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.shortcut-card:hover { border-color: var(--color-primary); }
.shortcut-title { display: block; font-weight: 600; color: var(--color-primary); margin-bottom: 0.25rem; }
.shortcut-desc { display: block; font-size: 0.82rem; color: #7f8c8d; }

/* =============================================================================
   ส่วนที่เพิ่มใน Phase 2 (Audit Log Viewer: ประวัติกิจกรรมผู้ใช้ + System Log)
   ============================================================================= */

/* --- แท็บสลับมุมมอง --- */
.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #e5e9f0;
    margin-bottom: 1.1rem;
}
.tab {
    padding: 0.55rem 1.1rem;
    text-decoration: none;
    color: #55606e;
    font-size: 0.92rem;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;
}
.tab:hover { background: #f4f6f9; }
.tab.is-active {
    color: var(--color-primary);
    font-weight: 600;
    border-color: #e5e9f0;
    border-bottom: 2px solid #fff;
    background: #fff;
}

/* --- ตัวกรองแบบมี label ในบรรทัดเดียว --- */
.filter-inline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #55606e;
}
.filter-inline .form-input { flex: 0 0 auto; }

/* --- ตาราง Log --- */
.log-table { font-size: 0.85rem; }
.log-table .nowrap, .nowrap { white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* --- ป้ายประเภทการกระทำ (Activity Log) --- */
.action-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    background: #eef0f3;
    color: #55606e;
}
.action-badge.act-create  { background: #d4efdf; color: #1e8449; }
.action-badge.act-update  { background: #d6eaf8; color: #21618c; }
.action-badge.act-delete  { background: #fadbd8; color: #922b21; }
.action-badge.act-login   { background: #e8f6ef; color: #148f77; }
.action-badge.act-logout  { background: #f2f3f4; color: #7f8c8d; }
.action-badge.act-fail    { background: #fdebd0; color: #9c640c; }
.action-badge.act-read    { background: #eef0f3; color: #5d6d7e; }

/* --- ป้ายระดับความรุนแรง (System Log) --- */
.level-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.level-badge.lvl-debug    { background: #f2f3f4; color: #7f8c8d; }
.level-badge.lvl-info     { background: #d6eaf8; color: #21618c; }
.level-badge.lvl-warning  { background: #fdebd0; color: #9c640c; }
.level-badge.lvl-error    { background: #fadbd8; color: #922b21; }
.level-badge.lvl-critical { background: #922b21; color: #fff; }

/* --- แถบแบ่งหน้า (Pagination) --- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1rem;
}
.pagination a, .pagination span {
    padding: 0.35rem 0.7rem;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    text-decoration: none;
    color: #21618c;
    font-size: 0.85rem;
}
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination .disabled, .pagination .ellipsis { color: #b6bfce; border-color: #e5e9f0; }

/* --- หน้ารายละเอียด Log --- */
.section-title {
    font-size: 1.05rem;
    color: var(--color-primary);
    margin: 1.5rem 0 0.6rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.9rem;
}
.detail-grid dt { font-weight: 600; color: #55606e; }
.detail-grid dd { margin: 0; color: #2c3e50; }

@media (max-width: 560px) {
    .detail-grid { grid-template-columns: 1fr; gap: 0.1rem; }
    .detail-grid dd { margin-bottom: 0.5rem; }
}

/* --- กล่องแสดง JSON / Stack Trace --- */
.json-block {
    background: #1e2733;
    color: #e6edf3;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.json-block.stack-trace { white-space: pre; }

.json-inline {
    margin: 0;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 0.78rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- ตารางเปรียบเทียบค่าเก่า/ค่าใหม่ --- */
.diff-table td { vertical-align: top; }
.diff-table tr.is-changed { background: #fff9e6; }
.diff-table tr.is-changed td:first-child { font-weight: 600; color: #9c640c; }

/* =============================================================================
   ส่วนที่เพิ่มใน Phase 2 (ตั้งค่าระบบ / ปรับแต่งหน้าจอ)
   ============================================================================= */

/* โลโก้บนแถบเมนู (แทนข้อความชื่อระบบ) */
.brand-logo {
    height: 34px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* แถวของแต่ละ setting ในฟอร์มตั้งค่า */
.setting-row { max-width: 640px; }

/* ช่องเลือกสี + รหัส HEX กำกับ */
.color-field {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.color-field input[type="color"] {
    width: 54px;
    height: 34px;
    padding: 0;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.color-field code {
    background: #eef0f3;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ตัวอย่างรูปที่อัปโหลดไว้ */
.image-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: #f4f6f9;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.image-preview img {
    max-height: 60px;
    max-width: 220px;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 4px;
    padding: 4px;
}
.image-preview .remove-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #922b21;
}

/* =============================================================================
   ส่วนที่เพิ่มใน Phase 2 (ข้อมูลหลัก / Master Data — Generic CRUD)
   ============================================================================= */

/* ปุ่มกลุ่มด้านขวาของหัวข้อหน้า */
.header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* หน้ารวม (hub) การ์ดเลือกตารางข้อมูลหลัก */
.master-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.master-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: #2c3e50;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.master-card:hover { border-color: var(--color-primary); }
.master-card-title { font-weight: 600; color: var(--color-primary); }
.master-card-desc { font-size: 0.82rem; color: #7f8c8d; }
.master-card-count { font-size: 0.78rem; color: #97a3b6; margin-top: 0.25rem; }

/* ดาวแดงหน้าฟิลด์บังคับกรอก */
.req { color: #c0392b; }

/* =============================================================================
   ส่วนที่เพิ่มใน Phase 3 (ใบเสนอราคา / เปรียบเทียบเบี้ย)
   ============================================================================= */

/* ช่องกรอก + ปุ่มต่อท้ายในบรรทัดเดียว (ช่องทะเบียน + ปุ่มค้นหา) */
.input-with-btn { display: flex; gap: 0.5rem; }
.input-with-btn .form-input { flex: 1; }
.input-with-btn .btn { white-space: nowrap; }

/* ตารางเปรียบเทียบ: คอลัมน์แรกตรึงความกว้าง, คอลัมน์ "แนะนำ" เน้นสี */
.compare-table th, .compare-table td { text-align: right; }
.compare-table th.col-menu, .compare-table td.col-menu { text-align: left; white-space: nowrap; }
.compare-table thead th { vertical-align: bottom; }
.compare-table .col-recommend { background: #eafaf1; }
.compare-table thead th.col-recommend { background: #1e8449; }

/* การ์ดปรับรายการคู่เทียบ */
.item-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.item-edit-card { padding: 1rem 1.1rem; }
.item-edit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e9f0;
}

/* --- แถบ Workflow ในหน้ารายละเอียดใบเสนอราคา --- */
.workflow-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.workflow-status { font-size: 1rem; }
.workflow-actions { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; }
.reject-box { display: inline-block; }
.reject-box > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
}
.reject-box > summary::-webkit-details-marker { display: none; }
.reject-box[open] > summary { margin-bottom: 0.4rem; }
.reject-box form { display: flex; flex-direction: column; gap: 0.4rem; max-width: 320px; }

/* =============================================================================
   ส่วนที่เพิ่มใน Phase 4 (บิล / ใบแจ้งหนี้)
   ============================================================================= */
.row-inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.row-inline-form .form-input { width: auto; }
.add-item-form .form-input { width: auto; flex: 0 1 auto; }
.form-input.qty { width: 80px; }
.form-input.price { width: 120px; }
.amount-cell { min-width: 90px; text-align: right; font-weight: 600; display: inline-block; }

.totals-card { max-width: 420px; margin-left: auto; }
.totals-table { width: 100%; }
.totals-table td { padding: 0.3rem 0.4rem; }
.totals-table td.col-num { text-align: right; }
.totals-table tr.grand td { border-top: 1px solid #c9d2df; font-weight: 700; font-size: 1.05rem; }

/* --- เครื่องมือช่วยคำนวณในหน้าบิล --- */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.calc-grid details.form-card > summary { cursor: pointer; padding: 0.25rem 0; }
.calc-grid details.form-card[open] > summary { margin-bottom: 0.75rem; border-bottom: 1px solid #e5e9f0; padding-bottom: 0.5rem; }

/* =============================================================================
   ส่วนที่เพิ่มใน Phase 5 (แจ้งงาน / ติดตามกรมธรรม์ / สลักหลัง)
   ============================================================================= */
.stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stage-grid .form-card { padding: 1rem 1.1rem; }
.stage-grid .section-title { margin-top: 0; }

.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.attach-card { background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; padding: 0.5rem; font-size: 0.82rem; }
.attach-card img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; display: block; }
.attach-card .file-icon { display: block; text-align: center; padding: 2rem 0; text-decoration: none; color: #21618c; }
.attach-card .attach-meta { margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }

/* =============================================================================
   ธีมทันสมัย (Modern Theme) — เพิ่มหลัง Phase 6
   -----------------------------------------------------------------------------
   วัตถุประสงค์: ยกระดับหน้าตาให้ดูทันสมัย มีมิติ และมี "ปฏิสัมพันธ์" เวลา
   เอาเมาส์ชี้/คลิก (hover / active / ripple) โดยไม่ใช้ CSS Framework ภายนอก
   - ประกาศ Design Token เพิ่ม (เงา, มุมโค้ง, ทรานสิชัน, เส้นขอบ) ใน :root
   - ทับสไตล์ .navbar / .sidebar / .footer / ปุ่ม / การ์ด ให้เรียบหรูขึ้น
   - เพิ่มไอคอน SVG หน้าเมนู (.svg-icon) + เอฟเฟกต์คลื่นตอนคลิก (.ripple-ink)
   หมายเหตุ: ใช้ color-mix() ผสมเฉดสีจาก --color-primary ของธีมโดยอัตโนมัติ
   (เบราว์เซอร์รุ่นเก่าที่ไม่รองรับจะข้ามบรรทัดนั้นและใช้สีสำรองที่ประกาศไว้ก่อน)
   ============================================================================= */
:root {
    --border: #e6e9f0;
    --border-soft: #eef1f6;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
    --shadow-2: 0 4px 14px rgba(16, 24, 40, 0.08);
    --shadow-3: 0 16px 40px rgba(16, 24, 40, 0.16);
    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --ring: rgba(26, 43, 69, 0.16);
    --ring: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --primary-050: #eef2f8;
    --primary-050: color-mix(in srgb, var(--color-primary) 7%, #fff);
    --primary-100: #e4ebf4;
    --primary-100: color-mix(in srgb, var(--color-primary) 12%, #fff);
    --navbar-h: 58px;
}

body {
    background-color: #f5f7fb;
    background-image: linear-gradient(180deg, #f6f8fc 0%, #f2f5fa 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* ---------- แถบเมนูด้านบน (Navbar) ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 120;
    min-height: var(--navbar-h);
    gap: 0.75rem;
    flex-wrap: nowrap;
    padding: 0.55rem 1.25rem;
    background-color: var(--color-primary);
    background-image: linear-gradient(100deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, #33507e));
    box-shadow: var(--shadow-2);
}
.navbar-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1 1 auto; }
.navbar-user { flex: 0 0 auto; }
.navbar-account {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.15rem 0.15rem;
    transition: background-color var(--transition);
}
.navbar-account:hover { background: rgba(255, 255, 255, 0.12); }
.navbar-brand { min-width: 0; }
.navbar-brand a { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}
.brand-mark .svg-icon { width: 18px; height: 18px; }
.brand-name { font-weight: 600; letter-spacing: 0.01em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.navbar-user { gap: 0.6rem; }
.navbar-greet { font-size: 0.9rem; opacity: 0.95; }
.navbar-greet strong { font-weight: 600; }
.navbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 85%, #fff);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color var(--transition), transform var(--transition);
}
.btn-logout .svg-icon { width: 16px; height: 16px; }
.btn-logout:hover { background-color: rgba(255, 255, 255, 0.22); }
.btn-logout:active { transform: translateY(1px); }

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition);
}
.sidebar-toggle .svg-icon { width: 20px; height: 20px; }
.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- แถบเมนูด้านซ้าย (Sidebar) ---------- */
.layout { min-height: calc(100vh - var(--navbar-h) - 60px); }
.sidebar {
    width: 248px;
    padding: 1rem 0.6rem 1.5rem;
    border-right: 1px solid var(--border);
    background: #fff;
    position: sticky;
    top: var(--navbar-h);
    align-self: flex-start;
    height: calc(100vh - var(--navbar-h));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #dfe4ec; border-radius: 8px; }

.sidebar-group { margin-bottom: 1.1rem; }
.sidebar-group-title {
    padding: 0 0.9rem;
    margin-bottom: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9aa4b6;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    margin: 2px 0.3rem;
    border-left: none;
    border-radius: 9px;
    font-size: 0.9rem;
    color: #3a4658;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.sidebar-link .svg-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #98a2b3;
    transition: color var(--transition), transform var(--transition);
}
.sidebar-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-link:hover {
    background: var(--primary-050);
    color: var(--color-primary);
    transform: translateX(3px);
}
.sidebar-link:hover .svg-icon { color: var(--color-primary); transform: scale(1.08); }
.sidebar-link:active { transform: translateX(3px) scale(0.985); }
.sidebar-link.is-active {
    background: var(--primary-100);
    color: var(--color-primary);
    font-weight: 600;
}
.sidebar-link.is-active .svg-icon { color: var(--color-primary); }
.sidebar-link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-primary);
}
.sidebar-link.is-disabled { color: #b6bfce; cursor: not-allowed; }
.sidebar-link.is-disabled:hover { background: transparent; transform: none; }
.sidebar-link.is-disabled .svg-icon { color: #cdd4e0; }
.sidebar-link.is-disabled em {
    font-style: normal;
    font-size: 0.62rem;
    background: #eef0f3;
    color: #97a3b6;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.sidebar-backdrop {
    position: fixed;
    inset: var(--navbar-h) 0 0 0;
    background: rgba(16, 24, 40, 0.38);
    z-index: 110;
    opacity: 0;
    transition: opacity var(--transition);
}
body.sidebar-open .sidebar-backdrop { opacity: 1; }

/* ---------- เอฟเฟกต์คลื่นตอนคลิก (Ripple) ---------- */
.ripple-host { position: relative; overflow: hidden; }
.ripple-ink {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: 0.22;
    pointer-events: none;
    animation: ripple-spread 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ripple-spread {
    to { transform: scale(2.6); opacity: 0; }
}

/* ---------- ปุ่ม (Buttons) ---------- */
.btn {
    position: relative;
    overflow: hidden;
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 2px var(--ring); }
.btn-primary:hover { background: var(--color-primary-hover); filter: none; }
.btn-success:hover, .btn-danger:hover { filter: brightness(1.05); }
.btn-submit { transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: 0 2px 8px var(--ring); }
.btn-submit:active { transform: translateY(1px); }

/* ---------- ช่องกรอกฟอร์ม: โฟกัสแบบมี ring ---------- */
.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- การ์ด: เงานุ่ม + ยกตัวตอน hover ---------- */
.form-card, .data-table, .permission-table { border-radius: var(--radius); }
.form-card { box-shadow: var(--shadow-1); }
.data-table, .permission-table { box-shadow: var(--shadow-1); overflow: hidden; }

.shortcut-card, .master-card {
    border-radius: var(--radius);
    border-color: var(--border);
    box-shadow: var(--shadow-1);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.shortcut-card:hover, .master-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border));
}
.shortcut-card:active, .master-card:active { transform: translateY(-1px); }

.shortcut-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 0.65rem;
    background: var(--primary-100);
    color: var(--color-primary);
}
.shortcut-ico .svg-icon { width: 21px; height: 21px; }

/* ---------- หน้า Dashboard: แถบต้อนรับ ---------- */
.welcome-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.35rem;
    box-shadow: var(--shadow-1);
    margin-bottom: 1.5rem;
}
.welcome-hero h1 { font-size: 1.3rem; color: var(--color-primary); margin-bottom: 0.15rem; }
.welcome-hero p { font-size: 0.9rem; color: #64707f; }
.welcome-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-primary);
    background-image: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #4a6a9c));
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------- Footer ---------- */
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 1.35rem 1rem;
    border-top: 1px solid var(--border);
    background: #fff;
}
.footer-mark { display: inline-flex; color: var(--color-primary); opacity: 0.7; }
.footer-mark .svg-icon { width: 16px; height: 16px; }

/* ---------- หน้า Login: การ์ดเด่นขึ้น ---------- */
.login-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-3);
}

/* ---------- ไอคอน SVG พื้นฐาน ---------- */
.svg-icon { display: inline-block; vertical-align: -0.15em; width: 1em; height: 1em; }

/* =============================================================================
   Responsive — รองรับทุกอุปกรณ์ (แท็บเล็ต / มือถือ / จอเล็ก)
   -----------------------------------------------------------------------------
   จุดพับ (breakpoints):
     <= 1024px : Sidebar กลายเป็นเมนูสไลด์ (off-canvas) + ปุ่ม ☰
     <= 820px  : ซ่อนคำทักทายบน Navbar, ตารางเลื่อนแนวนอนได้, ฟอร์ม/ฟิลเตอร์เต็มความกว้าง
     <= 560px  : Navbar เหลือแค่โลโก้+อวาตาร์+ปุ่มออก (ไอคอน), การ์ด/ตารางกระชับ
   ============================================================================= */

/* ---------- <= 1024px : Sidebar เป็นเมนูสไลด์ ---------- */
@media (max-width: 1024px) {
    .sidebar-toggle { display: inline-flex; }
    .sidebar {
        position: fixed;
        left: 0;
        top: var(--navbar-h);
        z-index: 115;
        width: 260px;
        max-width: 82vw;
        height: calc(100vh - var(--navbar-h));
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: var(--shadow-3);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    /* กันเลื่อนพื้นหลังตอนเปิดเมนู */
    body.sidebar-open { overflow: hidden; }
}
@media (min-width: 1025px) {
    .sidebar-backdrop { display: none; }
}

/* ---------- <= 820px : แท็บเล็ต / มือถือแนวนอน ---------- */
@media (max-width: 820px) {
    .navbar { padding: 0.5rem 0.9rem; }
    .navbar-greet { display: none; }
    .navbar-user { gap: 0.5rem; }

    .layout .page-area .main-content,
    .layout .page-area .flash-container { padding: 0 0.85rem; margin: 1rem auto; }

    /* หัวข้อหน้า + ปุ่มหลัก: เรียงลงมาเต็มความกว้าง */
    .page-header { align-items: flex-start; }
    .page-header .btn,
    .page-header .header-actions { width: 100%; }
    .header-actions { justify-content: flex-start; }

    /* แถบตัวกรอง: ทุกช่องเต็มความกว้าง เรียงลงมา */
    .filter-bar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .filter-bar .form-input,
    .filter-bar select,
    .filter-bar .btn { width: 100%; flex: 1 1 auto; }
    .filter-inline { flex-wrap: wrap; }

    /* ตารางข้อมูล: เลื่อนแนวนอนภายในกรอบตัวเอง ไม่ดันทั้งหน้า */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .data-table, .permission-table { font-size: 0.84rem; }
    .data-table th, .data-table td,
    .permission-table th, .permission-table td { padding: 0.5rem 0.55rem; }

    /* ฟอร์ม 2 คอลัมน์ -> 1 คอลัมน์ */
    .form-grid, .form-grid-2 { grid-template-columns: 1fr; }
    .form-card { padding: 1.25rem; }
    .detail-grid { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .detail-grid dd { margin-bottom: 0.5rem; }

    /* การ์ดสรุป/ยอดรวม กว้างเต็ม */
    .totals-card { max-width: 100%; }

    /* แถบ workflow เรียงลงมา */
    .workflow-bar { flex-direction: column; align-items: stretch; }
    .workflow-actions { flex-wrap: wrap; }
}

/* ---------- <= 560px : มือถือแนวตั้ง ---------- */
@media (max-width: 560px) {
    .navbar { gap: 0.5rem; padding: 0.5rem 0.7rem; }
    .brand-name { display: none; }          /* เหลือแค่โลโก้รูปโล่ */
    .navbar-user .badge { display: none; }   /* ซ่อนป้ายบทบาท (ดูได้ในหน้าหลัก) */
    .btn-logout { padding: 0.4rem; gap: 0; }
    .btn-logout span { display: none; }       /* ปุ่มออกเหลือแค่ไอคอน */
    .btn-logout .svg-icon { width: 18px; height: 18px; }
    .navbar-avatar { width: 30px; height: 30px; font-size: 0.85rem; }

    .layout .page-area .main-content { padding: 0 0.7rem; }
    .page-header h1 { font-size: 1.2rem; }
    .welcome-hero { padding: 1rem; gap: 0.75rem; }
    .welcome-avatar { width: 44px; height: 44px; font-size: 1.25rem; }
    .welcome-hero h1 { font-size: 1.1rem; }

    .shortcut-row { gap: 0.75rem; }
    .shortcut-card, .master-card { flex-basis: 100%; }
    .master-hub { grid-template-columns: 1fr; }

    /* ปุ่มในตารางเรียงต่อกันได้ ไม่ล้นขวา */
    .data-table .col-actions { white-space: normal; }
    .btn-sm { padding: 0.3rem 0.55rem; }

    .tabs { flex-wrap: wrap; }
    .pagination { justify-content: center; }
}

/* ---------- แตะง่ายขึ้นบนจอสัมผัส (ทุกขนาด) ---------- */
@media (hover: none) and (pointer: coarse) {
    .sidebar-link { padding-top: 0.7rem; padding-bottom: 0.7rem; }
    .btn { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* ---------- แถบปุ่มส่งออก/นำเข้าไฟล์ (Export / Import bar) ---------- */
.export-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.4rem 0 1.1rem;
    font-size: 0.86rem;
}
.export-bar-label { color: #64707f; }
.export-bar .btn .svg-icon { width: 15px; height: 15px; vertical-align: -0.18em; margin-right: 0.15rem; }
.import-card { max-width: 640px; }
.import-card .field-hint { margin-top: 0.35rem; }
.import-result-table { margin-top: 1rem; }
.import-result-table td.err { color: #c0392b; }

/* ---------- ปุ่ม "+ เพิ่มใหม่" ข้าง dropdown + Modal เพิ่มข้อมูลหลักแบบเร็ว ---------- */
.quick-add-btn { padding: 0.1rem 0.3rem; font-size: 0.8rem; }

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 1rem;
    background: rgba(16, 24, 40, 0.45);
    overflow-y: auto;
}
/* สำคัญ: ต้องซ่อนเมื่อมี attribute hidden — ไม่งั้น display:flex ด้านบนจะทับ
   ค่า display:none ของ [hidden] ทำให้ Modal โผล่ค้างตั้งแต่โหลดหน้าและปิดไม่ได้ */
.modal-overlay[hidden] { display: none !important; }
.modal-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    padding: 1.25rem 1.4rem 1.4rem;
    animation: modal-pop 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modal-pop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}
.modal-head h3 { font-size: 1.05rem; color: var(--color-primary); }
.modal-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #97a3b6;
    cursor: pointer;
    padding: 0 0.25rem;
}
.modal-close:hover { color: #2c3e50; }
body.modal-open { overflow: hidden; }