/* โทนเดียวกับระบบสหกรณ์ (~/coop) — สีหลักเขียวหัวเป็ด เปลี่ยนได้ที่ --app-primary */

:root{
  --app-primary:#0f6e6e;
  --app-bg:#f3f5f8;
  --app-border:#e3e7ee;
  --app-muted:#6b7484;
  --app-font-body:'Sarabun';
  --app-font-heading:'Kanit';
  --bs-body-font-family:var(--app-font-body),system-ui,sans-serif;
  --bs-body-font-size:.95rem;
}
body{background:var(--app-bg);color:#1e2633}
h1,h2,h3,h4,h5,.page-title,.stat-value,.sidebar-brand,.section-title{font-family:var(--app-font-heading),var(--app-font-body),sans-serif;font-weight:500}
.fw-semibold{font-weight:600!important}
a{color:var(--app-primary)}

/* ---------- โครงหน้า: แถบเมนูซ้าย + เนื้อหา ---------- */
.app-shell{display:flex;min-height:100vh}
@media (min-width:992px){.app-shell{background:linear-gradient(to right,var(--app-primary) 248px,var(--app-bg) 248px)}}
.app-sidebar,.app-sidebar.offcanvas-lg{width:248px;background:var(--app-primary)!important;color:#fff;display:flex;flex-direction:column}
@media (min-width:992px){.app-sidebar{position:sticky;top:0;height:100vh;flex-shrink:0}}
@media (max-width:991.98px){.app-sidebar.offcanvas-lg{width:270px}}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem;font-size:1.02rem;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar-brand .bi{font-size:1.5rem}
.sidebar-brand .brand-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-brand small{display:block;font-family:var(--app-font-body),sans-serif;font-size:.75rem;color:rgba(255,255,255,.6)}
.sidebar-nav{flex:1;overflow-y:auto;padding:.5rem .6rem}
.sidebar-nav .nav-group{font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.55);padding:.9rem .7rem .3rem}
.sidebar-nav .nav-link{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.85);padding:.45rem .75rem;border-radius:.5rem;margin-bottom:2px}
.sidebar-nav .nav-link .bi{font-size:1.05rem;width:1.2rem;text-align:center}
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar-nav .nav-link.active{background:#fff;color:var(--app-primary);font-weight:600}
.sidebar-nav .nav-link.planned{color:rgba(255,255,255,.5)}
.sidebar-nav .nav-link.planned.active{color:var(--app-primary)}
.sidebar-nav .soon{margin-left:auto;flex-shrink:0;white-space:nowrap;font-size:.65rem;padding:.05rem .4rem;border-radius:1rem;background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.sidebar-nav .nav-link.active .soon{background:#e6f3f3;color:var(--app-primary)}
.sidebar-user{padding:1rem 1.1rem;border-top:1px solid rgba(255,255,255,.12)}
.app-main{flex:1;min-width:0}
.app-topbar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:#fff;border-bottom:1px solid var(--app-border);position:sticky;top:0;z-index:10}
.app-content{padding:1.5rem;max-width:1400px}
@media (max-width:575.98px){.app-content{padding:1rem}}
.app-content-guest{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}

/* ---------- ส่วนประกอบ ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.page-head .page-title{font-size:1.45rem;margin:0}
.page-head .page-sub{color:var(--app-muted);font-size:.88rem}
.page-head .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:.5rem}
.breadcrumb{font-size:.85rem;margin-bottom:.35rem}
.card{border:1px solid var(--app-border);border-radius:.75rem;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-header{background:#fff;border-bottom:1px solid var(--app-border);font-weight:600;padding:.8rem 1rem;border-radius:.75rem .75rem 0 0!important}
.card-header .bi{color:var(--app-primary);margin-right:.35rem}
.btn-primary{--bs-btn-bg:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:color-mix(in srgb,var(--app-primary) 85%,#000);--bs-btn-hover-border-color:color-mix(in srgb,var(--app-primary) 85%,#000);--bs-btn-active-bg:color-mix(in srgb,var(--app-primary) 75%,#000);--bs-btn-disabled-bg:var(--app-primary);--bs-btn-disabled-border-color:var(--app-primary)}
.btn-outline-primary{--bs-btn-color:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:var(--app-primary);--bs-btn-hover-border-color:var(--app-primary);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--app-primary);--bs-btn-active-color:#fff;--bs-btn-active-border-color:var(--app-primary)}
.text-primary-app{color:var(--app-primary)!important}
.bg-primary-soft{background:color-mix(in srgb,var(--app-primary) 10%,#fff)}

.stat-card{padding:1rem 1.1rem;height:100%}
.stat-card .stat-label{color:#5b6576;font-size:.88rem}
.stat-card .stat-value{font-size:1.65rem;line-height:1.2;margin-top:.15rem}
.stat-card .stat-icon{width:42px;height:42px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
a.stat-link{text-decoration:none;color:inherit;display:block;height:100%}
a.stat-link .card{transition:transform .12s,box-shadow .12s}
a.stat-link:hover .card{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.08)}

.table{--bs-table-bg:transparent;margin-bottom:0}
.table thead th{background:#f7f9fc;color:#4a5466;font-weight:600;font-size:.85rem;white-space:nowrap;border-bottom-width:1px}
.table td{vertical-align:middle}
.table-hover tbody tr:hover{--bs-table-hover-bg:#f4f7fb}
.table tfoot td{background:#f7f9fc;font-weight:600}
/* ตารางที่วางชิดขอบการ์ด เว้นระยะซ้าย-ขวาให้ตรงกับเนื้อหาการ์ด */
.card>.table-responsive .table :is(th,td):first-child{padding-left:1rem}
.card>.table-responsive .table :is(th,td):last-child{padding-right:1rem}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.neg{color:#b02a37}
.nowrap{white-space:nowrap}
.muted-sm{color:var(--app-muted);font-size:.84rem}
.form-label{font-weight:600;font-size:.88rem;margin-bottom:.3rem}
.req::after{content:" *";color:#dc3545}
.filter-bar{background:#fff;border:1px solid var(--app-border);border-radius:.75rem;padding:.8rem 1rem;margin-bottom:1rem}
.section-title{font-size:1.05rem;margin:0 0 .75rem;color:var(--app-primary)}
.kv dt{color:var(--app-muted);font-weight:400;font-size:.86rem}
.kv dd{margin-bottom:.6rem}
.totals-box{background:#f7f9fc;border:1px solid var(--app-border);border-radius:.6rem;padding:.9rem 1rem}
.totals-box .big{font-family:var(--app-font-heading),sans-serif;font-size:1.5rem}
.date-th{font-size:.78rem;color:var(--app-muted);margin-top:.15rem;min-height:1em}
.empty-state{text-align:center;color:var(--app-muted);padding:2.5rem 1rem}
.empty-state .bi{font-size:2.4rem;display:block;margin-bottom:.5rem;opacity:.5}
.login-card{width:100%;max-width:400px}
.brand-icon{background:var(--app-primary);color:#fff;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
details>summary{cursor:pointer}

/* หน้า "อยู่ระหว่างพัฒนา" */
.soon-hero{border-top:4px solid var(--app-primary)}
.soon-hero .soon-icon{width:64px;height:64px;border-radius:16px;font-size:2rem;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-primary) 10%,#fff);color:var(--app-primary)}
.soon-list li{padding:.35rem 0;border-bottom:1px dashed var(--app-border)}
.soon-list li:last-child{border-bottom:0}

/* ---------- พิมพ์ ---------- */
@media print{
  .app-sidebar,.app-topbar,.no-print,.btn,.alert,.filter-bar{display:none!important}
  .app-shell{background:none!important}
  .app-content{padding:0;max-width:none}
  body{background:#fff;font-size:12pt}
  .card{border:none;box-shadow:none}
  a{color:#000;text-decoration:none}
}
details>summary.btn{white-space:nowrap}

/* ---------- สำเนาบนคลาวด์ (ดูอย่างเดียว) ---------- */
.read-only-bar{position:sticky;top:0;z-index:1040;background:#fff4d6;color:#5c4400;border-bottom:1px solid #f0d58a;padding:.45rem 1rem;font-size:.88rem;text-align:center}
.read-only-bar .bi{margin-right:.3rem}

/* ---------- โลโก้สหกรณ์ ---------- */
.sidebar-brand .brand-logo{width:40px;height:40px;object-fit:contain;flex-shrink:0;background:#fff;border-radius:8px;padding:3px}
.topbar-logo{width:28px;height:28px;object-fit:contain}
.logo-preview{width:112px;height:112px;border:1px dashed var(--app-border);border-radius:.75rem;display:flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0}
.logo-preview img{max-width:96px;max-height:96px;object-fit:contain}
.logo-preview .bi{font-size:2.5rem;color:var(--app-muted)}

/* ---------- ข้อมูลสมาชิก ---------- */
.member-photo{width:132px;flex-shrink:0}
.member-photo img,.member-photo>.bi{width:132px;height:160px;object-fit:cover;border-radius:.6rem;border:1px solid var(--app-border);background:#f7f9fc;display:flex;align-items:center;justify-content:center}
.member-photo>.bi{font-size:3.5rem;color:var(--app-muted)}
.member-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem 1.5rem;margin:0}
.member-info dt{font-weight:400;font-size:.8rem;color:var(--app-muted)}
.member-info dd{margin:0;font-weight:500}
.member-info .wide{grid-column:1/-1}

/* ---------- ปุ่มกลับขึ้นบนสุด ---------- */
.to-top{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:max(1rem,env(safe-area-inset-bottom,0px));z-index:1030;
  width:44px;height:44px;border-radius:50%;border:0;background:var(--app-primary);color:#fff;font-size:1.2rem;
  box-shadow:0 4px 12px rgba(16,24,40,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.9}
.to-top:hover{opacity:1}
.to-top:focus-visible{outline:3px solid color-mix(in srgb,var(--app-primary) 40%,#fff);outline-offset:2px}
@media print{.to-top{display:none}}

/* ---------- ทะเบียนสมาชิก: ตัวเลขสรุป + ตัวกรอง ---------- */
.member-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media (min-width:768px){.member-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.member-stats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.member-stat{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem .85rem;background:#fff;border:1px solid var(--app-border);
  border-radius:.75rem;color:inherit;text-decoration:none;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.member-stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tone)}
.member-stat:hover{border-color:var(--tone);color:inherit;box-shadow:0 4px 14px rgba(16,24,40,.06)}
.member-stat.active{border-color:var(--tone);box-shadow:0 0 0 2px color-mix(in srgb,var(--tone) 30%,transparent);background:color-mix(in srgb,var(--tone) 4%,#fff)}
.member-stat:focus-visible{outline:3px solid color-mix(in srgb,var(--app-primary) 40%,#fff);outline-offset:2px}
.ms-icon{position:absolute;top:.8rem;right:.85rem;font-size:1.1rem;color:var(--tone);opacity:.85}
.ms-body{display:contents}
.ms-label{font-size:.82rem;color:var(--app-muted);padding-right:1.6rem}
.ms-value{font-family:var(--app-font-heading),var(--app-font-body),sans-serif;font-size:1.65rem;font-weight:500;line-height:1.15;font-variant-numeric:tabular-nums;color:#1e2633}
.ms-note{font-size:.74rem;color:var(--app-muted);line-height:1.35}
.tone-primary{--tone:var(--app-primary)}
.tone-ok{--tone:#1e7b4a}
.tone-muted{--tone:#8a94a6}
.tone-warn{--tone:#c27c0e}
.tone-info{--tone:#0b6aa2}

.member-filter{display:flex;flex-direction:column;gap:.75rem}
.mf-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.mf-search{flex:1 1 320px;width:auto}
.mf-check{display:flex;align-items:center;gap:.45rem;margin:0;padding:.375rem .8rem;border:1px solid var(--app-border);border-radius:.375rem;background:#fff;cursor:pointer;white-space:nowrap}
.mf-check .form-check-input{margin:0;float:none}
.mf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .75rem}
@media (min-width:768px){.mf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.mf-grid{grid-template-columns:1fr 1fr 2fr 1fr 1fr}}
.mf-grid label{display:flex;flex-direction:column;gap:.2rem;margin:0;min-width:0}
.mf-grid label>span{font-size:.76rem;color:var(--app-muted)}
@media (max-width:767.98px){.mf-grid .mf-wide{grid-column:1/-1}}

.member-table th{font-weight:500;color:var(--app-muted);font-size:.84rem;white-space:nowrap}
.member-table .member-no{font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none}
.member-table .member-name{color:inherit;text-decoration:none;font-weight:500}
.member-table .member-name:hover,.member-table .member-no:hover{text-decoration:underline}
.member-table .member-dept{max-width:340px}

/* ---------- นำเข้าข้อมูลระบบเดิม ---------- */
.import-steps{display:flex;flex-direction:column;gap:.75rem}
.import-step.planned{background:#fafbfc}
.import-step.planned h2{color:var(--app-muted)}
.step-no{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--app-primary) 12%,#fff);color:var(--app-primary);display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
.import-step.planned .step-no{background:#eef0f3;color:var(--app-muted)}
.step-status{display:flex;gap:1.25rem;margin:0}
.step-status dt{font-weight:400;font-size:.76rem;color:var(--app-muted)}
.step-status dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.step-form{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center}
.import-output{background:#1e2633;color:#e4e9f0;padding:1rem;font-size:.85rem;white-space:pre-wrap;border-radius:0 0 .75rem .75rem;max-height:420px;overflow:auto}

/* ---------- ผู้ใช้ อบจ. เข้าดู รพ.สต. ---------- */
.visitor-bar{background:#e6f3f3;color:#0b4f4f;border-bottom:1px solid #b8dede;padding:.45rem 1.5rem;font-size:.88rem}
.visitor-bar .bi{margin-right:.3rem}

/* ---------- ใบแจ้งรหัสผ่าน (สร้างบัญชีแบบชุด) ---------- */
.slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.75rem}
.slip{background:#fff;border:1px dashed #9aa4b2;border-radius:.5rem;padding:.8rem 1rem;break-inside:avoid}
.slip-title{font-size:.75rem;color:var(--app-muted);margin-bottom:.2rem}
.slip-kv{display:grid;grid-template-columns:auto 1fr;gap:.1rem .75rem;margin:.5rem 0}
.slip-kv dt{font-weight:400;font-size:.8rem;color:var(--app-muted)}
.slip-kv dd{margin:0;word-break:break-all}
.slip-kv code{font-size:1rem;color:#1e2633}
.slip-note{font-size:.75rem;color:var(--app-muted)}
@media print{.slips{grid-template-columns:1fr 1fr;gap:0}.slip{border-radius:0;page-break-inside:avoid}}
.print-only{display:none}
@media print{.print-only{display:grid}}

/* ---------- บันทึกการใช้งาน ---------- */
.audit-table>tbody>tr>td{vertical-align:top}
.audit-detail td{padding:.15rem .4rem;border-color:var(--app-border)}
.audit-detail td:first-child{white-space:nowrap;width:1%}

/* ---------- เอกสารคลังยา ---------- */
.lines-table td{padding:.35rem .4rem}
.lines-table .unit_drug-col,.lines-table .lot-col{min-width:320px}
.lines-table .qty-col,.lines-table .unit_cost-col{width:130px}
.lines-table .lot_no-col{width:150px}
.lines-table .expiry_date-col{width:170px}
.lines-table .form-control,.lines-table .form-select{font-size:.9rem}
.status-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.35rem}

/* ---------- รายงาน ---------- */
.report-table{font-size:.88rem}
.report-table thead th{position:sticky;top:0;z-index:1}
@media print{.report-table{font-size:9pt}.page-head .page-title{font-size:14pt}}