/* ═══════════════════════════════════════════════════════════════
   PNRU Borrow — Design System
   ต่อยอดจาก Bootstrap 5.3 โดยกำหนด token ของสี ความโค้ง และเงาเอง
   ใช้ธีมสว่างเพียงอย่างเดียว (ตั้ง data-bs-theme="light" ไว้ที่แท็ก <html>)

   พาเลตต์แบรนด์ 4 สี
     #5D1930  ไวน์แดงเข้ม   → แถบเมนูด้านข้าง ปุ่มหลัก หัวเรื่อง
     #A9224C  แดงราสเบอร์รี → เมนูที่เลือก ลิงก์ ข้อความเน้น เตือนภัย
     #CF4173  ชมพูสด        → ป้ายกำกับ ไอคอน กราฟ ไล่เฉด
     #F6D8BD  ครีมพีช       → พื้นหลังโทนอุ่น การ์ดสถิติ

   สีตามความหมาย (เพิ่มจากแบรนด์ ให้ป้ายสถานะแยกกันด้วยเนื้อสี ไม่ใช่แค่ความเข้ม)
     เขียว  → สำเร็จ พร้อมให้ยืม คืนครบแล้ว
     เหลือง → รออนุมัติ ใกล้ครบกำหนด
     แดง    → เกินกำหนด ไม่อนุมัติ ลบข้อมูล

   โครงหน้าอ้างอิงแบบร่าง dash.png — เมนูข้างพื้นไวน์แดงเต็มความสูง
   เนื้อหาเป็นแผ่นครีมมุมโค้ง แถบท้ายพื้นเข้มเชื่อมกับเมนูข้าง
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── พาเลตต์แบรนด์ ── */
    --bw-maroon:         #5D1930;
    --bw-crimson:        #A9224C;
    --bw-pink:           #CF4173;
    --bw-cream:          #F6D8BD;

    /* ── โทเคนที่ใช้งานจริง ── */
    --bw-primary:        #5D1930;
    --bw-primary-hover:  #4A1426;
    --bw-primary-soft:   #F9EAF0;
    --bw-primary-text:   #A9224C;

    --bw-bg:             #FAF2EF;
    --bw-surface:        #ffffff;
    --bw-surface-2:      #FCF6F4;
    --bw-border:         #F1E2E4;
    --bw-text:           #35202A;
    --bw-muted:          #8D707A;

    --bw-success:        #4E9E5F;
    --bw-success-soft:   #E7F3E9;
    --bw-success-text:   #2F7A43;
    --bw-info:           #CF4173;
    --bw-warning:        #E9A13B;
    --bw-warning-soft:   #FCEFDC;
    --bw-warning-text:   #8A5E17;
    --bw-danger:         #A9224C;
    --bw-danger-hover:   #8D1A3E;

    /* ── โครงหน้า ── */
    --bw-sidebar-bg:     #5D1930;
    --bw-sidebar-bg-2:   #45111F;
    --bw-sidebar-text:   #F5DFE6;
    --bw-sidebar-muted:  rgba(245, 223, 230, .55);
    --bw-sidebar-hover:  rgba(255, 255, 255, .09);
    --bw-sidebar-active: #A9224C;
    --bw-header-bg:      #F6EBE6;

    --bw-radius:         18px;
    --bw-radius-sm:      12px;
    --bw-panel-radius:   28px;
    --bw-shadow:         0 1px 2px rgba(93, 25, 48, .04), 0 8px 22px rgba(93, 25, 48, .06);
    --bw-shadow-hover:   0 2px 4px rgba(93, 25, 48, .06), 0 14px 32px rgba(93, 25, 48, .10);

    --bw-sidebar-w:      248px;

    /* ── ให้ utility และ component ของ Bootstrap เดินตามพาเลตต์เดียวกัน ── */
    --bs-primary:                 #5D1930;
    --bs-primary-rgb:             93, 25, 48;
    --bs-primary-bg-subtle:       #F9EAF0;
    --bs-primary-border-subtle:   #E7C2D0;
    --bs-primary-text-emphasis:   #48121F;

    --bs-success:                 #4E9E5F;
    --bs-success-rgb:             78, 158, 95;
    --bs-success-bg-subtle:       #E7F3E9;
    --bs-success-border-subtle:   #C3E2CA;
    --bs-success-text-emphasis:   #2F7A43;

    --bs-info:                    #CF4173;
    --bs-info-rgb:                207, 65, 115;
    --bs-info-bg-subtle:          #FCEAF0;
    --bs-info-border-subtle:      #F3C2D3;
    --bs-info-text-emphasis:      #A02B54;

    --bs-warning:                 #E9A13B;
    --bs-warning-rgb:             233, 161, 59;
    --bs-warning-bg-subtle:       #FCEFDC;
    --bs-warning-border-subtle:   #F6DCB4;
    --bs-warning-text-emphasis:   #8A5E17;

    --bs-danger:                  #A9224C;
    --bs-danger-rgb:              169, 34, 76;
    --bs-danger-bg-subtle:        #FBE8ED;
    --bs-danger-border-subtle:    #EEBAC9;
    --bs-danger-text-emphasis:    #85183A;

    --bs-body-bg:                 #FAF2EF;
    --bs-body-color:              #35202A;
    --bs-secondary-color:         #8D707A;
    --bs-border-color:            #F1E2E4;

    --bs-link-color:              #A9224C;
    --bs-link-color-rgb:          169, 34, 76;
    --bs-link-hover-color:        #5D1930;
    --bs-focus-ring-color:        rgba(93, 25, 48, .2);
}

/* ── พื้นฐาน ─────────────────────────────────────────────── */

body {
    font-family: "Sarabun", "Leelawadee UI", "IBM Plex Sans Thai", Tahoma,
                 system-ui, -apple-system, sans-serif;
    font-size: 0.925rem;
    background-color: var(--bw-bg);
    color: var(--bw-text);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

.bw-page-title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.15rem;
    color: var(--bw-primary);
}

.bw-page-subtitle {
    color: var(--bw-muted);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.text-muted, .small.text-muted { color: var(--bw-muted) !important; }

/* ── การ์ด ───────────────────────────────────────────────── */

.card {
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow);
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--bw-border);
    font-weight: 700;
    color: var(--bw-primary);
    padding: 0.95rem 1.2rem;
}

.card-body   { padding: 1.2rem; }
.card-footer { background-color: transparent; border-top: 1px solid var(--bw-border); }

.bw-card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.bw-card-hover:hover { transform: translateY(-2px); box-shadow: var(--bw-shadow-hover); }

/* ── การ์ดสถิติแบบแผ่นสีอ่อน (ตามแบบร่าง dash.png) ────────── */

.bw-stat-card {
    height: 100%;
    border-radius: var(--bw-radius);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.bw-stat-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }

.bw-stat-icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: rgba(255, 255, 255, .72);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.bw-stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.bw-stat-value small { font-size: .7rem; font-weight: 500; opacity: .75; }

.bw-stat-label { font-size: .85rem; font-weight: 600; }
.bw-stat-delta { font-size: .76rem; opacity: .85; margin-top: .1rem; }

/* เฉดของแผ่นสถิติ — ไล่ให้ต่างเนื้อสีกันพอจะแยกการ์ดออกจากกันได้ในตาเดียว */
.bw-stat-rose  { background-color: #FBE3EB; color: #6E1B37; }
.bw-stat-rose  .bw-stat-icon { color: #A9224C; }

.bw-stat-mint  { background-color: #E9F3EA; color: #2F5A39; }
.bw-stat-mint  .bw-stat-icon { color: #4E9E5F; }

.bw-stat-blush { background-color: #F8DBE4; color: #6E1B37; }
.bw-stat-blush .bw-stat-icon { color: #CF4173; }

.bw-stat-sand  { background-color: #FBEEDC; color: #6B4A18; }
.bw-stat-sand  .bw-stat-icon { color: #C9821F; }

.bw-stat-dark  { background: linear-gradient(135deg, #5D1930 0%, #8D1A3E 100%); color: #fff; }
.bw-stat-dark  .bw-stat-icon { background-color: rgba(255, 255, 255, .16); color: #fff; }
.bw-stat-dark  .bw-stat-label,
.bw-stat-dark  .bw-stat-delta { color: rgba(255, 255, 255, .85); }

/* แบบเดิม — ยังใช้บนหน้าสาธารณะและหน้าแจ้งสถานะ */
.bw-stat { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bw-stat-delta.up   { color: var(--bw-success); }
.bw-stat-delta.down { color: var(--bw-danger); }

.bw-chip {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: #fff; flex: 0 0 auto;
}

.bw-chip-primary { background: linear-gradient(135deg, #A9224C, #5D1930); }
.bw-chip-success { background: linear-gradient(135deg, #6BB97A, #4E9E5F); }
.bw-chip-info    { background: linear-gradient(135deg, #E0648F, #CF4173); }
.bw-chip-warning { background: linear-gradient(135deg, #F2BE74, #E9A13B); color: #4A2F06; }
.bw-chip-danger  { background: linear-gradient(135deg, #C33A62, #A9224C); }
.bw-chip-cream   { background: var(--bw-cream); color: #7A4A1E; }
.bw-chip-soft {
    background: var(--bw-primary-soft);
    color: var(--bw-primary-text);
}

/* ── โครงหน้าโซนภายใน ─────────────────────────────────────── */

/* พื้นของทั้งหน้าใช้สีเดียวกับเมนูข้าง แผ่นเนื้อหาจึงดูลอยอยู่บนพื้นเข้ม
   และมุมโค้งด้านซ้ายทำงานได้โดยไม่ต้องซ้อน element เพิ่ม */
.bw-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--bw-sidebar-bg);
}

.bw-sidebar {
    width: var(--bw-sidebar-w);
    flex: 0 0 var(--bw-sidebar-w);
    background: linear-gradient(180deg, var(--bw-sidebar-bg) 0%, var(--bw-sidebar-bg-2) 100%);
    color: var(--bw-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.bw-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.15rem 1.15rem;
    font-weight: 700; font-size: 1.02rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.bw-brand:hover { color: #fff; }

.bw-brand-name { display: block; line-height: 1.25; }

.bw-brand-sub {
    display: block;
    font-size: .68rem; font-weight: 500; letter-spacing: .12em;
    color: var(--bw-sidebar-muted);
    text-transform: uppercase;
}

.bw-brand-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, #CF4173, #5D1930);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
}

/* โลโก้ของระบบ — ไฟล์เป็นพื้นโปร่งใส วางบนพื้นเข้มได้เลยไม่ต้องใส่กรอบ */
.bw-brand-logo {
    width: 40px; height: 40px;
    object-fit: contain;
    flex: 0 0 auto;
}

.bw-nav { padding: .75rem .6rem; flex: 1 1 auto; overflow-y: auto; }

.bw-nav-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    color: var(--bw-sidebar-muted); text-transform: uppercase;
    padding: .75rem .65rem .35rem;
}

.bw-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem .7rem;
    border-radius: var(--bw-radius-sm);
    color: var(--bw-sidebar-text);
    font-size: .9rem;
    margin-bottom: .15rem;
    transition: background-color .15s ease, color .15s ease;
}

.bw-nav-link i { font-size: 1.05rem; color: rgba(255, 255, 255, .62); width: 1.25rem; text-align: center; }
.bw-nav-link:hover { background-color: var(--bw-sidebar-hover); color: #fff; }
.bw-nav-link:hover i { color: #fff; }

.bw-nav-link.active {
    background-color: var(--bw-sidebar-active);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(169, 34, 76, .38);
}
.bw-nav-link.active i { color: #fff; }

.bw-sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .10); padding: .75rem .8rem; }

/* ข้อความประจำหน่วยงานท้ายเมนู */
.bw-sidebar-tagline {
    padding: .9rem 1.2rem .35rem;
    color: var(--bw-sidebar-muted);
    font-size: .76rem;
    line-height: 1.5;
}

/* ตัวอักษรและปุ่มทุกชิ้นในเมนูข้างต้องอ่านออกบนพื้นเข้ม */
.bw-sidebar .text-muted,
.bw-sidebar .small.text-muted { color: var(--bw-sidebar-muted) !important; }

.bw-sidebar .bw-avatar { background-color: rgba(255, 255, 255, .15); color: #fff; }
.bw-sidebar .btn-link.text-danger { color: #F3A9BE !important; }
.bw-sidebar .btn-link.text-danger:hover { color: #fff !important; }

.bw-userbox { display: flex; align-items: center; gap: .65rem; }

.bw-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bw-primary-soft); color: var(--bw-primary-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem; flex: 0 0 auto;
}

.bw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.bw-topbar {
    min-height: 72px;
    background-color: var(--bw-header-bg);
    border-top-left-radius: var(--bw-panel-radius);
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1.5rem;
    position: sticky; top: 0; z-index: 1020;
}

.bw-content {
    padding: 1.5rem;
    flex: 1 1 auto;
    background-color: var(--bw-bg);
    border-bottom-left-radius: var(--bw-panel-radius);
}

.bw-footer {
    background-color: var(--bw-sidebar-bg);
    color: rgba(245, 223, 230, .72);
    padding: 1rem 1.5rem;
    font-size: .8rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}

.bw-icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid transparent;
    background-color: var(--bw-surface);
    color: var(--bw-primary-text);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(93, 25, 48, .06);
}
.bw-icon-btn:hover {
    background-color: var(--bw-primary);
    color: #fff;
    border-color: var(--bw-primary);
}

/* ช่องค้นหาบนแถบหัวเรื่อง — ทรงแคปซูลพื้นขาวตามแบบร่าง */
.bw-search {
    box-shadow: 0 1px 3px rgba(93, 25, 48, .07);
    border-radius: 999px;
}
.bw-search .input-group-text,
.bw-search .form-control {
    background-color: var(--bw-surface);
    border-color: transparent;
}
.bw-search .input-group-text { border-radius: 999px 0 0 999px; padding-left: 1rem; }
.bw-search .form-control     { border-radius: 0 999px 999px 0; padding-right: 1rem; }
.bw-search .form-control:focus { border-color: transparent; box-shadow: none; }

@media (max-width: 991.98px) {
    .bw-sidebar {
        position: fixed; z-index: 1045; left: 0; top: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--bw-shadow-hover);
    }
    .bw-sidebar.show { transform: translateX(0); }
    .bw-backdrop {
        position: fixed; inset: 0; background: rgba(40, 8, 18, .45);
        z-index: 1040; display: none;
    }
    .bw-backdrop.show { display: block; }

    /* ไม่มีเมนูข้างค้างอยู่ทางซ้ายแล้ว มุมโค้งจึงไม่มีความหมาย */
    .bw-topbar  { border-top-left-radius: 0; }
    .bw-content { border-bottom-left-radius: 0; }
}

@media (min-width: 992px) {
    .bw-sidebar-toggle { display: none; }
}

/* ── ตาราง ───────────────────────────────────────────────── */

.table { --bs-table-bg: transparent; color: var(--bw-text); }

.table > thead th {
    background-color: var(--bw-surface-2);
    color: var(--bw-muted);
    font-size: .78rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bw-border);
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding: .7rem .75rem;
    border-bottom-color: var(--bw-border);
}

.table-hover > tbody > tr:hover > * { background-color: var(--bw-surface-2); }

/* แถวที่เน้น (เช่น คู่มือฉบับปัจจุบัน) ให้เป็นโทนเขียวอ่อน */
.table-success {
    --bs-table-color: var(--bw-text);
    --bs-table-bg: #E7F3E9;
    --bs-table-border-color: #C3E2CA;
    --bs-table-hover-bg: #DCEDDF;
    --bs-table-hover-color: var(--bw-text);
}

/* ── ป้าย ────────────────────────────────────────────────── */

.badge { font-weight: 600; border-radius: 999px; padding: .34em .75em; }

/* ป้ายสถานะเป็นแคปซูลโทนอ่อนตามแบบร่าง อ่านสบายตาเมื่ออยู่ในตารางยาว ๆ
   ยกเว้นสีแดงที่คงพื้นทึบไว้ เพราะเรื่องเกินกำหนด/ไม่อนุมัติต้องสะดุดตาก่อนเพื่อน */
.badge.bg-primary   { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; }
.badge.bg-success   { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.badge.bg-info      { background-color: var(--bs-info-bg-subtle) !important;    color: var(--bs-info-text-emphasis) !important; }
.badge.bg-warning   { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.badge.bg-secondary { background-color: #EFE4E8 !important;                     color: #6B545C !important; }
.badge.bg-danger    { background-color: var(--bw-danger) !important;            color: #fff !important; }

.badge-public { background-color: var(--bw-success); color: #fff; }

.badge-soft {
    background-color: var(--bw-primary-soft);
    color: var(--bw-primary-text);
}

/* ── ปุ่ม ────────────────────────────────────────────────── */

.btn { border-radius: 999px; font-weight: 500; padding-inline: 1.05rem; }
.btn-sm { padding-inline: .85rem; }

.btn-primary {
    --bs-btn-bg: #5D1930;
    --bs-btn-border-color: #5D1930;
    --bs-btn-hover-bg: #4A1426;
    --bs-btn-hover-border-color: #4A1426;
    --bs-btn-active-bg: #3B101E;
    --bs-btn-active-border-color: #3B101E;
    --bs-btn-disabled-bg: #AE8C97;
    --bs-btn-disabled-border-color: #AE8C97;
}

.btn-success {
    --bs-btn-bg: #4E9E5F;
    --bs-btn-border-color: #4E9E5F;
    --bs-btn-hover-bg: #428A51;
    --bs-btn-hover-border-color: #428A51;
    --bs-btn-active-bg: #397646;
    --bs-btn-active-border-color: #397646;
    --bs-btn-disabled-bg: #A6CFAF;
    --bs-btn-disabled-border-color: #A6CFAF;
}

.btn-danger {
    --bs-btn-bg: #A9224C;
    --bs-btn-border-color: #A9224C;
    --bs-btn-hover-bg: #8D1A3E;
    --bs-btn-hover-border-color: #8D1A3E;
    --bs-btn-active-bg: #761532;
    --bs-btn-active-border-color: #761532;
}

.btn-warning {
    --bs-btn-color: #4A2F06;
    --bs-btn-bg: #E9A13B;
    --bs-btn-border-color: #E9A13B;
    --bs-btn-hover-color: #3B2504;
    --bs-btn-hover-bg: #D8912E;
    --bs-btn-hover-border-color: #D8912E;
    --bs-btn-active-bg: #C58226;
}

.btn-outline-primary {
    --bs-btn-color: #5D1930;
    --bs-btn-border-color: #DCB4C2;
    --bs-btn-hover-bg: #5D1930;
    --bs-btn-hover-border-color: #5D1930;
    --bs-btn-active-bg: #4A1426;
    --bs-btn-active-border-color: #4A1426;
}

.btn-outline-success {
    --bs-btn-color: #2F7A43;
    --bs-btn-border-color: #B7DCBF;
    --bs-btn-hover-bg: #4E9E5F;
    --bs-btn-hover-border-color: #4E9E5F;
    --bs-btn-active-bg: #428A51;
    --bs-btn-active-border-color: #428A51;
}

.btn-outline-danger {
    --bs-btn-color: #8D1A3E;
    --bs-btn-border-color: #E8B6C4;
    --bs-btn-hover-bg: #A9224C;
    --bs-btn-hover-border-color: #A9224C;
    --bs-btn-active-bg: #8D1A3E;
    --bs-btn-active-border-color: #8D1A3E;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bw-text);
    --bs-btn-border-color: var(--bw-border);
    --bs-btn-hover-color: var(--bw-primary-text);
    --bs-btn-hover-bg: var(--bw-primary-soft);
    --bs-btn-hover-border-color: var(--bw-primary-soft);
    --bs-btn-active-color: var(--bw-primary-text);
    --bs-btn-active-bg: var(--bw-primary-soft);
    --bs-btn-active-border-color: var(--bw-primary-soft);
}

/* ── ฟอร์ม ───────────────────────────────────────────────── */

.form-control, .form-select {
    border-radius: var(--bw-radius-sm);
    border-color: var(--bw-border);
    background-color: var(--bw-surface);
    color: var(--bw-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(93, 25, 48, .14);
}

.form-check-input:checked {
    background-color: var(--bw-primary);
    border-color: var(--bw-primary);
}
.form-check-input:focus {
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(93, 25, 48, .14);
}

.form-range::-webkit-slider-thumb { background-color: var(--bw-primary); }
.form-range::-moz-range-thumb     { background-color: var(--bw-primary); }

/* ── แท็บ ────────────────────────────────────────────────── */

.nav-tabs { border-bottom-color: var(--bw-border); }
.nav-tabs .nav-link { color: var(--bw-muted); border: 0; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--bw-primary-text); }
.nav-tabs .nav-link.active {
    color: var(--bw-primary-text);
    background-color: transparent;
    border-bottom: 2px solid var(--bw-primary-text);
}

/* ── แถบความก้าวหน้า ─────────────────────────────────────── */

.progress {
    background-color: var(--bw-border);
    border-radius: 999px;
}

.progress-bar { background-color: var(--bw-primary); }

/* ── กล่องลอย ────────────────────────────────────────────── */

.modal-content, .dropdown-menu, .alert {
    border-radius: var(--bw-radius);
    border-color: var(--bw-border);
}
.dropdown-menu { box-shadow: var(--bw-shadow); background-color: var(--bw-surface); }
.dropdown-item:active { background-color: var(--bw-primary); }

.pagination {
    --bs-pagination-color: var(--bw-text);
    --bs-pagination-bg: var(--bw-surface);
    --bs-pagination-border-color: var(--bw-border);
    --bs-pagination-hover-color: var(--bw-primary-text);
    --bs-pagination-hover-bg: var(--bw-primary-soft);
    --bs-pagination-hover-border-color: var(--bw-border);
    --bs-pagination-active-bg: var(--bw-primary);
    --bs-pagination-active-border-color: var(--bw-primary);
    --bs-pagination-focus-bg: var(--bw-primary-soft);
}

/* ── แผ่นเมนูด่วนและแถบทางลัด (ตามแบบร่าง dash.png) ───────── */

/* วางเป็นแผ่นเต็มความกว้างใต้การ์ดสถิติ — ห้ามใส่ height:100% เพราะ .bw-content
   เป็น flex item ที่มีความสูงแน่นอน แผ่นนี้จะยืดตามจนดันเนื้อหาที่เหลือหลุดจอ */
.bw-quick {
    background-color: #FAE3EA;
    border-radius: var(--bw-radius);
    padding: 1.15rem;
}

.bw-quick-title { font-weight: 700; color: var(--bw-primary); margin-bottom: .85rem; }

.bw-tile {
    display: flex; align-items: center; gap: .7rem;
    background-color: var(--bw-surface);
    border: 1px solid var(--bw-border);
    border-radius: 14px;
    padding: .75rem .85rem;
    height: 100%;
    color: var(--bw-text);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bw-tile:hover {
    color: var(--bw-text);
    transform: translateY(-2px);
    box-shadow: var(--bw-shadow-hover);
}

.bw-tile-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #FBE3EB;
    color: var(--bw-primary-text);
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.bw-tile-name { font-weight: 600; font-size: .88rem; line-height: 1.3; }
.bw-tile-desc { font-size: .74rem; color: var(--bw-muted); }

/* ── รายการแบบแท่งเปรียบเทียบ (เช่น แหล่งที่มา) ──────────── */

.bw-barlist-item { display: flex; align-items: center; gap: .75rem; padding: .42rem 0; }
.bw-barlist-name { width: 33%; font-size: .85rem; }
.bw-barlist-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background-color: var(--bw-border); }
/* ตัวแท่งเป็น <span> ต้องบังคับ display ให้เป็นบล็อก มิฉะนั้นความกว้าง/สูงไม่มีผลและแท่งจะไม่ขึ้นเลย */
.bw-barlist-fill  { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #CF4173, #A9224C); }
.bw-barlist-value { font-size: .82rem; color: var(--bw-muted); white-space: nowrap; }

/* ── ไทม์ไลน์ความเคลื่อนไหวของใบคำขอ ──────────────────────── */

.bw-timeline {
    position: relative;
    padding-left: 1.35rem;
    border-left: 2px solid var(--bw-border);
    list-style: none;
}

.bw-timeline > li { position: relative; padding-bottom: .9rem; }

.bw-timeline > li::before {
    content: "";
    position: absolute;
    left: -1.68rem;
    top: .5rem;
    width: .65rem; height: .65rem;
    border-radius: 50%;
    background-color: var(--bw-primary-text);
    box-shadow: 0 0 0 3px var(--bw-primary-soft);
}

/* ── กล่องเตือนเรื่องการเปิดเผยสาธารณะ ────────────────────── */

.public-warning {
    border-left: 4px solid var(--bw-info);
    background-color: rgba(207, 65, 115, .08);
}

/* ── โซนสาธารณะ ──────────────────────────────────────────── */

.bw-public-nav {
    background-color: var(--bw-surface);
    border-bottom: 1px solid var(--bw-border);
}

.bw-public-nav .nav-link { color: var(--bw-text); font-size: .9rem; padding: .5rem .85rem; }
.bw-public-nav .nav-link:hover { color: var(--bw-primary-text); }
.bw-public-nav .nav-link.active { color: var(--bw-primary-text); font-weight: 600; }
.bw-public-nav .navbar-brand { color: var(--bw-text); }
.bw-public-nav .navbar-brand img { object-fit: contain; }

.bw-hero {
    background: linear-gradient(135deg, #FBEADA 0%, #ffffff 45%, #FBE4EC 100%);
    border-bottom: 1px solid var(--bw-border);
}

.bw-hero-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* หัวหน้ารายละเอียดระบบบนโซนสาธารณะ */
.bw-detail-hero {
    background: linear-gradient(120deg, #5D1930 0%, #A9224C 55%, #CF4173 100%);
}

.bw-detail-hero .breadcrumb-item.active { color: rgba(255, 255, 255, .7) !important; }

.bw-feature-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--bw-primary-soft); color: var(--bw-primary-text);
    font-size: 1.1rem;
}

.system-card { transition: transform .15s ease, box-shadow .15s ease; }
.system-card:hover { transform: translateY(-3px); box-shadow: var(--bw-shadow-hover); }

.bw-public-footer {
    background-color: var(--bw-sidebar-bg);
    border-top: 0;
    color: rgba(245, 223, 230, .72);
    font-size: .82rem;
}

/* ── หน้าแจ้งสถานะ (ไม่มีสิทธิ์ / ออกจากระบบ) ─────────────── */

.bw-notice-card { max-width: 480px; margin: 0 auto; }

.bw-notice-icon {
    width: 64px; height: 64px; border-radius: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}

/* ── อื่น ๆ ──────────────────────────────────────────────── */

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px;
    border: 1px solid var(--bw-border);
    background-color: var(--bw-surface);
    color: var(--bw-text);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--bw-primary) !important;
    border-color: var(--bw-primary) !important;
    color: #fff !important;
}

/* ── ป้ายคิวอาร์ติดครุภัณฑ์ ────────────────────────────────── */

/* กระดาษป้าย — เรียงเป็นตารางยืดหยุ่น พิมพ์ลงสติกเกอร์ A4 ได้ตามจำนวนที่วางได้จริง */
.bw-label-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}

.bw-label {
    border: 1px dashed var(--bw-border);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* กันไม่ให้ป้ายหนึ่งดวงถูกตัดครึ่งคาบสองหน้ากระดาษ */
    break-inside: avoid;
    page-break-inside: avoid;
    background-color: #fff;
    color: #000;
}

.bw-label img {
    width: 84px; height: 84px;
    flex: 0 0 auto;
    /* คิวอาร์ต้องคมเสมอ ห้ามให้เบราว์เซอร์เกลี่ยสีตอนย่อ มิฉะนั้นเครื่องอ่านจะจับไม่ติด */
    image-rendering: pixelated;
}

.bw-label-body  { min-width: 0; line-height: 1.3; }
.bw-label-no    { font-family: "Consolas", "Courier New", monospace;
                  font-size: .8rem; font-weight: 700; word-break: break-all; }
.bw-label-name  { font-size: .72rem; }
.bw-label-org   { font-size: .62rem; color: #555; }

@media print {
    .bw-sidebar, .bw-topbar, .bw-footer, .bw-public-footer,
    .btn, .alert, .bw-no-print { display: none !important; }
    .bw-shell   { background: #fff; }
    .bw-content { padding: 0; border-radius: 0; background: #fff; }

    /* หน้าพิมพ์ป้ายต้องเป็นขาวดำล้วนเสมอ */
    .bw-label-sheet { gap: 4px; }
    .bw-label { border-color: #bbb; }
}

/* ── รูปประกอบของรายการในทะเบียน ──────────────────────────── */

/* ขนาดคงที่ + object-fit: cover เพื่อให้แถบรูปเรียงเป็นแนวเดียวกัน
   ไม่ว่ารูปต้นฉบับจะเป็นแนวตั้งหรือแนวนอน */
.bw-thumb {
    width: 96px; height: 96px;
    object-fit: cover;
    border-radius: var(--bw-radius-sm);
    border: 1px solid var(--bw-border);
    background-color: var(--bw-surface-2);
}
.bw-thumb-lg { width: 150px; height: 150px; }
.bw-thumb:hover { border-color: var(--bw-primary-text); }

.bw-thumb-box { width: 96px; }