/* insurance-sidebar.css — เพิ่ม stitch left sidebar ให้หน้าแบบประกัน (product pages)
   ใช้คู่กับ <aside class="stitch-sidebar"></aside> + assets/sidebar.js
   เดสก์ท็อป (≥901px): โชว์ sidebar ซ้าย + ดันเนื้อหาขวา + ซ่อน global-nav เดิม
   มือถือ (<901px): sidebar ซ่อน, global-nav เดิมยังโชว์ (โหมดทดสอบใช้ hamburger จาก sidebar.js) */

/* Material Symbols (เผื่อหน้าที่ยังไม่ได้ตั้ง font-family ของคลาสนี้) */
.stitch-sidebar .material-symbols-outlined,
.stitch-sidebar-toggle .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}

.stitch-sidebar{position:fixed;left:0;top:0;bottom:0;width:256px;background:#f5f3ee;border-right:1px solid #c3c1b9;padding:24px 18px;display:none;flex-direction:column;z-index:200;font-family:'Sarabun','Noto Sans Thai',system-ui,sans-serif;overflow-y:auto;}
.stitch-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.stitch-brand-mark{width:40px;height:40px;border-radius:10px;background:#46607d;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stitch-brand-name{font-weight:900;color:#46607d;font-size:18px;line-height:1.2;}
.stitch-brand-tag{font-size:11px;color:#43474d;}
.stitch-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.stitch-nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;text-decoration:none;color:#43474d;font-weight:500;font-size:12px;transition:background .15s,color .15s;}
.stitch-nav a .material-symbols-outlined{font-size:20px;}
.stitch-nav a:hover{background:#e9e7e0;}
.stitch-nav a.active{background:#5f7997;color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(95,121,151,.25);}
.stitch-sidebar-foot{border-top:1px solid #c3c1b9;padding-top:14px;margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.stitch-sidebar-foot a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;text-decoration:none;color:#43474d;font-size:13px;cursor:pointer;}
.stitch-sidebar-foot a:hover{background:#e9e7e0;}

/* top bar (cream) — profile chip + settings เหมือนหน้าหลัก (โชว์ทุกขนาดจอ) */
.st-topbar{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:0 24px;height:50px;background:rgba(251,249,244,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:30;border-bottom:1px solid #e9e7e0;}
.st-topbar .st-icon-btn{background:transparent;border:none;cursor:pointer;color:#43474d;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;}
.st-topbar .st-icon-btn:hover{color:#46607d;background:#e9e7e0;}
.st-topbar .material-symbols-outlined{font-size:22px;}
/* เอา gnav (แถบแบรนด์มือถือ) ออกทุกขนาด — ใช้ topbar+hamburger เหมือนหน้าหลัก */
.global-nav,.gnav{display:none !important;}

@media(min-width:901px){
  body{padding-left:256px !important;}
  .stitch-sidebar{display:flex;}
  .st-topbar{display:flex;}
  .global-nav,.gnav{display:none !important;}
  body.sidebar-collapsed{padding-left:72px !important;}
  body.sidebar-collapsed .stitch-sidebar{width:72px;padding:24px 10px;overflow:visible;}
  body.sidebar-collapsed .stitch-sidebar .stitch-brand-name,
  body.sidebar-collapsed .stitch-sidebar .stitch-brand > div:last-child,
  body.sidebar-collapsed .stitch-sidebar .stitch-nav a > span:not(.material-symbols-outlined),
  body.sidebar-collapsed .stitch-sidebar .stitch-nav a + div,
  body.sidebar-collapsed .stitch-sidebar .stitch-sidebar-foot a > span:not(.material-symbols-outlined){display:none !important;}
  body.sidebar-collapsed .stitch-sidebar .stitch-brand{justify-content:center;}
  body.sidebar-collapsed .stitch-sidebar .stitch-nav a{justify-content:center;gap:0;padding:12px 0;position:relative;}
  body.sidebar-collapsed .stitch-sidebar .stitch-sidebar-foot a{justify-content:center;gap:0;padding:8px 0;position:relative;}
  .stitch-sidebar-toggle{position:fixed;top:22px;left:244px;width:26px;height:26px;border-radius:999px;
    background:#46607d;color:#fff;border:2px solid #fbf9f4;cursor:pointer;display:flex;align-items:center;
    justify-content:center;z-index:250;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:left .25s cubic-bezier(.2,.8,.2,1),background .15s;}
  .stitch-sidebar-toggle .material-symbols-outlined{font-size:16px;transition:transform .25s;}
  body.sidebar-collapsed .stitch-sidebar-toggle{left:60px;}
  body.sidebar-collapsed .stitch-sidebar-toggle .material-symbols-outlined{transform:rotate(180deg);}
  .stitch-sidebar-toggle:hover{background:#5f7997;}
}
@media(max-width:900px){ .stitch-sidebar-toggle{display:none !important;} }

/* ════════════════════════════════════════════════════════════
   THEME OVERRIDE → ตีมหลัก (Soft Sanctuary: slate + cream)
   โหลดทีหลัง <style> ของหน้า จึง remap ตัวแปร + ทับสี hardcode หลัก
   ════════════════════════════════════════════════════════════ */
:root{
  /* แดง AIA → slate */
  --ins-red:#46607d !important; --ins-red-dark:#34495f !important; --ins-red-mid:#5f7997 !important;
  --ins-red-light:#dce4ef !important; --ins-red-bg:#f3f6fa !important; --ins-coral:#7e96b3 !important; --ins-rose:#6f88a6 !important;
  --pink:#5f7997 !important; --pink-light:#e6ecf3 !important; --pink-mid:#8aa0bb !important;
  --purple:#46607d !important; --purple-light:#dce4ef !important; --purple-dark:#34495f !important;
  --cream:#fbf9f4 !important;
  /* semantic/accent → slate (คงเขียว/เหลืองไว้สำหรับ good/warn) */
  --accent:#46607d !important; --accent2:#34495f !important; --blue:#46607d !important;
  /* neutrals → ink/cream */
  --dark:#1b2a3a !important; --dark2:#2c3e50 !important; --dark3:#46607d !important;
  --mid:#8a8275 !important; --light:#faf8f3 !important; --border:#e0dccf !important;
  /* shadows → กลาง */
  --shadow:0 4px 24px rgba(70,96,125,0.12) !important; --shadow-lg:0 12px 48px rgba(70,96,125,0.18) !important; --shadow-red:0 8px 32px rgba(70,96,125,0.18) !important;
  /* gradients → slate/cream */
  --grad-main:linear-gradient(135deg,#3a4f66 0%,#2c3e50 100%) !important;
  --grad-soft:linear-gradient(135deg,#fbf9f4 0%,#f5f3ee 100%) !important;
  --grad-card:linear-gradient(160deg,#ffffff 0%,#faf8f3 100%) !important;
  --grad-red:linear-gradient(135deg,#5f7997 0%,#46607d 100%) !important;
  --grad-red-soft:linear-gradient(135deg,#eef2f7 0%,#fbf9f4 100%) !important;
  --grad-hero:linear-gradient(135deg,#46607d 0%,#5f7997 55%,#7e96b3 100%) !important;
  /* chart: เบี้ยแดง→slate */
  --chart-prem:#46607d !important; --chart-prem-fill:rgba(70,96,125,0.10) !important;
  --chart-bg:#fbf9f4 !important; --chart-grid:rgba(70,96,125,0.08) !important;
}
/* header gradient (hardcode แดง) → slate */
.header{
  background:linear-gradient(135deg,#5f7997 0%,#46607d 50%,#34495f 100%) !important;
  box-shadow:0 4px 24px rgba(70,96,125,0.28) !important;
  border-bottom-color:#7e96b3 !important;
}
/* header เป็น slate เข้มแล้ว → คงตัวอักษรขาวให้อ่านออก (ลบกฎเก่าที่แปลงขาว→เข้ม เช่น badge "15") */
.header [style*="color:white"], .header [style*="color: white"],
.header [style*="color:rgba(255,255,255"], .header [style*="color: rgba(255,255,255"]{
  color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:none !important;
}

/* ลบ breadcrumb หน้าแบบประกัน (ซ้ำกับ sidebar + topbar แล้ว) */
.breadcrumb{display:none !important;}