/*
  =====================================================================
  Daily Rollout - Main Styles (Consolidated)
  File: public/css/main.css
  Purpose: Single CSS entry - all variables and base rules in one file.

  QUICK COLOR REFERENCE:
    --bg        : สีพื้นหลังทั้งหน้า
    --card      : สีพื้นหลัง tab bar, panel, card
    --primary   : สีปุ่ม/ลิงก์หลัก
    --border    : สีเส้นขอบทั่วไป
    --font-color-base  : สีตัวอักษรหลักทั้งเว็บ
    --font-weight-base : ความหนาตัวอักษรหลักทั้งเว็บ
    --sub       : สีตัวอักษรรอง (label)
    tab active  : .tab-btn.active (background/color/border-bottom-color ด้านล่าง)
    header      : background:linear-gradient(135deg,#059669 0%,#2563eb 100%)

  COLOR GROUPS
  - Background surfaces: --bg, --bg-alt, --card, --border
  - Text colors: --font-color-base, --text, --sub
  - Semantic colors: --primary, --success, --warning, --danger
  - KPI colors: --kpi-k1-a/b ... --kpi-k6-a/b
  =====================================================================
*/

/* Module + component imports (main.css is the only CSS entrypoint) */

/* Components loaded last so they can override module-level defaults. */

:root{
  /* Fonts */
  --font-family-base:'IBM Plex Sans Thai','IBM Plex Sans','Segoe UI',Tahoma,sans-serif;
  --font-family-heading:'IBM Plex Sans Thai','IBM Plex Sans','Segoe UI',Tahoma,sans-serif;

  /* Light surfaces (from reference design) */
  --surface:#ffffff;
  --surface-2:#f8f9fb;
  --surface-3:#eef0f4;

  /* Semantic colors */
  --primary:#1a4a8a; /* ปรับสีหลัก (ปุ่ม, ลิงก์, accent) ได้จากบรรทัดนี้ */
  --success:#0ea86e; /* ปรับสีสถานะสำเร็จ (เขียว) ได้จากบรรทัดนี้ */
  --warning:#f59e0b; /* ปรับสีสถานะเตือน (เหลือง) ได้จากบรรทัดนี้ */
  --danger:#ef4444; /* ปรับสีสถานะผิดพลาด/อันตราย (แดง) ได้จากบรรทัดนี้ */

  /* Background colors */
  --bg:#f0f6ff; /* ปรับสีพื้นหลังทั้งหน้าเว็บ (body) ได้จากบรรทัดนี้ */
  --bg-alt:#ffffff; /* ปรับสีพื้นหลังของ modal/popup ได้จากบรรทัดนี้ */
  --card:#ffffff; /* ปรับสีพื้นหลัง card, panel, tab bar ได้จากบรรทัดนี้ */
  --border:#c8dff7; /* ปรับสีเส้นขอบทั่วไปได้จากบรรทัดนี้ */

  /* Text colors */
  --font-color-base:#0a1e3d; /* ปรับสีตัวอักษรหลัก (body text) ได้จากบรรทัดนี้ */
  --font-weight-base:400; /* ปรับความหนาตัวอักษรหลักทั้งเว็บได้จากบรรทัดนี้ */
  --text:#0a1e3d; /* ปรับสีตัวอักษรหลักทั่วไปได้จากบรรทัดนี้ */
  --sub:#4a6fa5; /* ปรับสีตัวอักษรรอง (label, hint) ได้จากบรรทัดนี้ */

  /* Layout */
  --radius:12px; /* ปรับความโค้งมุมมาตรฐานของการ์ดและกล่องได้จากบรรทัดนี้ */
  --app-header-height:60px; /* ปรับความสูง header หลักได้จากบรรทัดนี้ */

  /* Header color tokens */
  --header-bg-start:#0a1628;
  --header-bg-end:#1e6bb5;
  --header-text:#e8f4ff;
  --header-divider:rgba(232,244,255,.25);
  --header-date:#b8d9f8;
  --header-time:#e8f4ff;
  --header-user-name:#f3fbff;
  --header-user-sub:#bfe7ff;
  --header-session:#d9f1ff;
  --header-session-warn-bg:rgba(251,188,4,.35);
  --header-session-warn-text:#ffffff;
  --header-icon-btn-text:#ffffff;
  --header-icon-filter:brightness(0) invert(1);
  --header-search-border:rgba(255,255,255,.25);
  --header-search-border-hover:rgba(255,255,255,.48);
  --header-search-border-focus:rgba(255,255,255,.65);
  --header-search-bg:transparent;
  --header-search-bg-hover:rgba(255,255,255,.12);
  --header-search-bg-focus:rgba(255,255,255,.22);
  --header-search-text:#ffffff;
  --header-search-placeholder:rgba(255,255,255,.5);
  --header-search-clear:rgba(255,255,255,.65);
  --header-search-clear-hover:#ffffff;

  /* Shadows */
  --surface-shadow:0 1px 3px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.04); /* ปรับเงาอ่อนสำหรับกล่องทั่วไปได้จากบรรทัดนี้ */
  --surface-shadow-strong:0 12px 40px rgba(0,0,0,.25); /* ปรับเงาเข้มสำหรับโมดัลได้จากบรรทัดนี้ */

  /* Dashboard KPI gradients */
  --kpi-k1-a:#0a1628; /* ปรับสีต้น gradient KPI card 1 (deep navy) */ --kpi-k1-b:#0d2d5e; /* ปรับสีปลาย gradient KPI card 1 */
  --kpi-k2-a:#1a4a8a; /* ปรับสีต้น gradient KPI card 2 (ocean navy) */ --kpi-k2-b:#0a2952; /* ปรับสีปลาย gradient KPI card 2 */
  --kpi-k3-a:#0d7aa8; /* ปรับสีต้น gradient KPI card 3 (ocean teal) */ --kpi-k3-b:#064e72; /* ปรับสีปลาย gradient KPI card 3 */
  --kpi-k4-a:#0099cc; /* ปรับสีต้น gradient KPI card 4 (sky ocean) */ --kpi-k4-b:#006b94; /* ปรับสีปลาย gradient KPI card 4 */
  --kpi-k5-a:#0ea5e9; /* ปรับสีต้น gradient KPI card 5 (bright ocean) */ --kpi-k5-b:#0369a1; /* ปรับสีปลาย gradient KPI card 5 */
  --kpi-k6-a:#00b4d8; /* ปรับสีต้น gradient KPI card 6 (cyan ocean) */ --kpi-k6-b:#0077b6; /* ปรับสีปลาย gradient KPI card 6 */

  /* Table tokens */
  --table-radius:12px;
  --table-border:#e2e6ed;
  --table-border-strong:#cdd3dc;
  --table-head-bg:#e0edf8;
  --table-head-color:#2a4a7a;
  --table-row-odd:#ffffff;
  --table-row-even:#f4f9ff;
  --table-row-hover:#dbeafe;
  --table-cell-py:1px;
  --table-cell-px:10px;
  --table-head-py:2px;
  --table-head-px:10px;
  --table-line-height:1.02;
  --table-compact-line-height:1;
  --table-font-size:.74rem;
  --table-col-rn:35px;
  --table-col-region:60px;
  --table-col-subcon:80px;
  --table-col-center:50px;
  --table-col-compact:50px;
  --table-col-upd-date:128px;
  --table-col-upd-by:100px;
  --table-col-remark:200px;
  --table-col-wide:160px;
  --table-col-actions:50px;
  --table-col-default:124px;

  /* Dropdown tokens */
  --ddl-height:6px;
  --ddl-px:6px;
  --ddl-radius:6px;
  --ddl-border:var(--border,#e0e0e0);

  /* TI table tokens */
  --ti-head-bg:#3a5a89; /* ปรับสีพื้นหลังหัวตาราง TI (Navy เข้ม) */
  --ti-head-fg:#ffffff; /* ปรับสีตัวอักษรหัวตาราง TI (ขาวสะอาด) */
  --ti-grid-border:#aed0f3;
  --ti-row-odd:#ffffff;
  --ti-row-even:#f0f6ff;
  --ti-row-hover:#dbeafe;
  --ti-sticky-shadow:rgba(11,58,110,.18);
  --ti-total-bg:#e9f9ee;
  --ti-total-fg:#0f6a3f;
  --ti-grand-bg:#fff4d6;
  --ti-grand-fg:#7a4700;
  --ti-table-font-size:.60rem;
  --ti-table-cell-py:1px;
  --ti-table-cell-px:5px;
  --ti-table-cell-height:12px;
  --ti-table-cell-line-height:1.2;
  --ti-table-head-font-size:.56rem; /* ปรับขนาดตัวอักษรหัวตาราง TI - เพิ่มขึ้นเพื่อให้อ่านง่าย */
  --ti-table-head-py:5px;
  --ti-table-head-px:6px;
  --ti-table-head-height:50px;
  --ti-table-head-line-height:1; /* ปรับความสูงบรรทัดหัวตาราง TI - เพิ่มขึ้นเพื่อให้อ่านง่าย */
  --ti-table-font-size-mobile:.58rem;
  --ti-table-cell-height-mobile:20px;
}

*{box-sizing:border-box;margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
input,select,textarea,button{font-family:var(--font-family-base,'Segoe UI',Tahoma,sans-serif);font-weight:inherit;color:inherit;}
input[type="date"],select{font-family:var(--font-family-base,'Segoe UI',Tahoma,sans-serif)!important;}
body{font-family:var(--font-family-base,'Segoe UI',Tahoma,sans-serif);background:var(--bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--font-color-base,var(--text)); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-weight:var(--font-weight-base); /* ปรับความหนาตัวอักษรหลักทั้งเว็บได้จากบรรทัดนี้ */
  height:100vh; /* ปรับความสูงได้จากบรรทัดนี้ */height:100dvh; /* ปรับความสูงได้จากบรรทัดนี้ */overflow:hidden;display:flex;flex-direction:column;}

/* ==================== 01) CORE SHELL + LAYOUT ==================== */
/* Mini index:
  - [PUBLIC SURFACE] header, .main, .tab-bar-sticky, .tabs, .tab-btn, .tab-actions
  - [INTERNAL OVERRIDE] .tab-mobile-toggle, .tab-content(.active)
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/
/* Header */
header{
  background:linear-gradient(to right,var(--header-bg-start),var(--header-bg-end)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:var(--header-text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */padding:0 24px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */display:flex;align-items:center;gap:16px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  height:60px; /* ปรับความสูงได้จากบรรทัดนี้ */box-shadow:var(--surface-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */border-bottom:1px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-bottomได้จากบรรทัดนี้ */flex-shrink:0;z-index:100;
}
.hdr-brand{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-shrink:0;cursor:pointer;}
.hdr-brand:hover{opacity:.92;}
.hdr-brand:focus-visible{outline:2px solid rgba(255,255,255,.7); /* ปรับสีเส้นโฟกัส/เส้นขอบนอกได้จากบรรทัดนี้ */outline-offset:3px; /* ปรับระยะห่างเส้นโฟกัสได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */}
.hdr-logo-box{width:40px;height:40px;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s;padding:0;overflow:hidden;}
.hdr-logo-box.loading{animation:spin .8s linear infinite;}
.hdr-brand-text{display:flex;flex-direction:column;gap:1px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
header h1{font-size:1.4rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:400;letter-spacing:.3px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */white-space:nowrap;line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.hdr-tagline{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:1;color:var(--header-user-sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;font-weight:400;}
.badge{background:var(--surface-2); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid var(--border); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:4px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.main{max-width:1440px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */margin:0 auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */
  display:flex;flex-direction:column;flex:1;overflow:hidden;}

/* Tab bar + top navigation */
.tab-bar-sticky{
  background:var(--surface-2); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */
  box-shadow:var(--surface-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */
  display:flex;align-items:stretch;
  flex-shrink:0;
  border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */overflow:hidden;
  margin:8px 12px 0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
}
.tabs{display:flex;gap:0; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex:1;overflow-x:auto;margin-bottom:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{
  padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:none;border-bottom:3px solid transparent; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */margin-bottom:-2px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */cursor:pointer;
  font-size:.79rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  transition:color .18s,border-color .18s,background .18s;
  white-space:nowrap;flex-shrink:0;box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */border-radius:0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
.tab-btn.active{color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-bottom-color:var(--primary); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */font-weight:700;border-radius:0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */}
.tab-btn:hover:not(.active){color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--surface-3); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-bottom-color:var(--border); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.tab-actions{display:flex;align-items:center;gap:3px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */flex-shrink:0;border-left:1px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-leftได้จากบรรทัดนี้ */}
.tab-actions .btn{padding:6px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */}
.tab-actions .btn-sm{padding:5px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.tab-mobile-toggle{display:none;}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* ==================== GLOBAL HEADER RIGHT SIDE ==================== */
/* ใช้ร่วมกันทุกหน้าเพื่อควบคุมส่วนผู้ใช้ ค้นหา และสถานะระบบ */
/* เลย์เอาต์หลัก: ดันบล็อกทั้งหมดไปทางขวา */
.header-right{margin-left:auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */display:flex;gap:12px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */align-items:center;}
/* เส้นคั่นแนวตั้ง: แยกแต่ละบล็อกข้อมูล */
.header-divider{width:1px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:32px; /* ปรับความสูงได้จากบรรทัดนี้ */background:var(--header-divider); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */flex-shrink:0;}
/* กล่องวันเวลา: วางวันที่กับเวลาแบบซ้อนกัน */
.header-clock{display:flex;flex-direction:column;align-items:flex-end;gap:1px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-shrink:0;}
/* บรรทัดวันที่: ขนาดกลางและไม่ตัดบรรทัด */
.hc-date{font-size:1.0rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:1;color:var(--header-date); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;font-weight:400;}
/* บรรทัดเวลา: ตัวใหญ่และอ่านเลขง่าย */
.hc-time{font-size:1.5rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;color:var(--header-time); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */letter-spacing:.8px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */font-variant-numeric:tabular-nums;}
/* กล่องผู้ใช้: ชื่อและคำอธิบายเรียงลงล่าง */
.header-user{display:flex;flex-direction:column;align-items:flex-end;gap:1px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-shrink:0;}
/* ชื่อผู้ใช้: ตัวหนาและไม่ตัดบรรทัด */
.usr-name{font-size:.84rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;color:var(--header-user-name); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.3; /* ปรับ ความสูง ได้จากบรรทัดนี้ */white-space:nowrap;}
/* ข้อความรองผู้ใช้: เล็กและจางกว่า */
.usr-sub{font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:1;color:var(--header-user-sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
/* session countdown: ข้อความสถานะอายุเซสชัน */
#sessionCountdown{font-size:.6rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:1;color:var(--header-session); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;}
/* ถ้าไม่มีค่าให้ซ่อนบล็อกนี้ */
#sessionCountdown:empty{display:none;}
/* โหมดเตือน: ทำให้เด่นขึ้นเมื่อใกล้หมดเวลา */
#sessionCountdown.warn{background:var(--header-session-warn-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--header-session-warn-text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */opacity:1;font-weight:700;}
.header-update{display:flex;align-items:center;gap:5px;flex-shrink:0;}
/* New: professional update badge — frosted glass pill */
.hdr-upd-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px 5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);
  font-size:.73rem;font-weight:500;
  white-space:nowrap;letter-spacing:.01em;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.hdr-upd-badge::before{
  content:'';
  display:inline-block;width:7px;height:7px;
  border-radius:50%;background:#5af086;
  box-shadow:0 0 6px #5af08699;
  flex-shrink:0;
}
/* ปุ่ม refresh + logout: โหมดไอคอนล้วน สีขาว ไม่มีขอบและพื้นหลัง */
.btn-refresh,.btn-logout{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:32px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:none;background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--header-icon-btn-text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  cursor:pointer;transition:opacity .15s;flex-shrink:0;
  appearance:none;
}
/* ไอคอนในปุ่ม header: ขยายให้เห็นชัดและบังคับเป็นสีขาว */
.btn-refresh .ui-ico,.btn-logout .ui-ico{width:20px;height:20px;background-color:#fff;}
/* hover ของปุ่มไอคอน: ลดความทึบเล็กน้อยแทนการลงพื้นหลัง */
.btn-refresh:hover,.btn-logout:hover{opacity:.82;}
/* กล่องค้นหา: ครอบ input, ไอคอน และปุ่มล้าง */
.header-search-wrap{position:relative;display:flex;align-items:center;flex-shrink:0;}
.header-search-wrap .header-search-input{
  /* พื้นและขอบของช่องค้นหา */
  background:var(--header-search-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1.5px solid var(--header-search-border); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  /* มุมโค้ง สีตัวอักษร และพื้นที่สำหรับไอคอน */
  border-radius:22px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */color:var(--header-search-text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */padding:7px 14px 7px 48px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  /* ขนาดเริ่มต้นและเอฟเฟกต์ตอนโฟกัส */
  width:210px; /* ปรับความกว้างได้จากบรรทัดนี้ */outline:none;transition:background .2s,border .2s,width .2s;
  /* ใช้ฟอนต์เดียวกับส่วนแม่ */
  font-family:inherit;
}
/* ข้อความตัวอย่างในช่องค้นหา */
.header-search-wrap .header-search-input::placeholder{color:var(--header-search-placeholder); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* hover: คงธีมโปร่งใส ไม่ใช้พื้นขาวจาก global input */
.header-search-wrap .header-search-input:hover{background:var(--header-search-bg-hover); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--header-search-border-hover); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--header-search-text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* ตอนโฟกัส: สว่างขึ้นและกว้างขึ้น */
.header-search-wrap .header-search-input:focus,
.header-search-wrap .header-search-input:focus-visible{background:var(--header-search-bg-focus); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--header-search-border-focus); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--header-search-text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */width:260px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
/* กันสีพื้นขาวจาก autofill ของ browser */
.header-search-wrap .header-search-input:-webkit-autofill,
.header-search-wrap .header-search-input:-webkit-autofill:hover,
.header-search-wrap .header-search-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--header-search-text); /* ปรับค่าสีของ webkit-text-fill-colorได้จากบรรทัดนี้ */
  -webkit-box-shadow:0 0 0 1000px transparent inset; /* ปรับค่าสีของ webkit-box-shadowได้จากบรรทัดนี้ */
  transition:background-color 9999s ease-in-out 0s;
}
/* ไอคอนค้นหา: วางด้านซ้ายและไม่รับคลิก */
.header-search-icon{position:absolute;left:12px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */display:inline-flex;align-items:center;justify-content:center;width:16px; /* ปรับความกว้างได้จากบรรทัดนี้ */font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */pointer-events:none;opacity:.65;}
.header-search-clear{
  /* ปุ่มล้างข้อความอยู่ด้านขวา */
  position:absolute;right:10px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */background:none; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:none;color:var(--header-search-clear); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  /* ซ่อนก่อนและกำหนดขนาดให้พอดี */
  cursor:pointer;font-size:.88rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:0 2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */display:none;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
/* hover ของปุ่มล้างข้อความ: ให้สว่างขึ้น */
.header-search-clear:hover{color:var(--header-search-clear-hover); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* กล่องผลค้นหา: แสดงเป็น overlay การ์ดลอยใต้ช่องค้นหา */
.search-popup{
  position:fixed;
  top:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  width:3640px; /* ปรับความกว้างได้จากบรรทัดนี้ */
  z-index:1200;
  display:none;
  background:#f5f9ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  border:1px solid #c8dff7; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  box-shadow:0 16px 48px rgba(10,22,64,.22); /* ปรับสีเงาได้จากบรรทัดนี้ */
  overflow:hidden;
}
.search-popup.open{display:block;}
/* หัวของ popup ค้นหา: จัดชื่อกับปุ่มคนละฝั่ง */
.search-popup-header{display:flex;align-items:center;justify-content:space-between;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-bottom:1px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-bottomได้จากบรรทัดนี้ */background:#e8f2fd; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.search-popup-title{font-size:.86rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;color:#0a1628; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.search-popup-count{font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:400;color:#4a6fa5; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.search-results-list{
  max-height:340px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  overflow:auto;
  background:#f5f9ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
.search-result-item{
  display:flex;
  align-items:flex-start;
  gap:9px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border-bottom:1px solid #d8ebfa; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  cursor:pointer;
}
.search-result-item:hover{background:#e0eef9; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.search-result-item.active{background:#cce2f7; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sri-icon{font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */opacity:.92;}
.sri-body{min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */flex:1;}
.sri-site{font-size:.84rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:#0a1628; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.3; /* ปรับ ความสูง ได้จากบรรทัดนี้ */word-break:break-word;}
.sri-meta{display:flex;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-top:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.search-no-results{padding:14px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.search-popup-footer{
  display:flex;
  align-items:center;
  gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  padding:8px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border-top:1px solid #c8dff7; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  background:#e8f2fd; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:#4a6fa5; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}
.search-popup-footer kbd{
  border:1px solid #90bbeb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-bottom-width:2px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#f0f6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:#1a4a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:700;
  padding:1px 5px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
}

/* ==================== GLOBAL FEEDBACK UTILS ==================== */
/* ใช้ร่วมกันทุกหน้า สำหรับสถานะกำลังโหลดและกล่องแจ้งเตือน */
.spinner{width:34px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:34px; /* ปรับความสูงได้จากบรรทัดนี้ */border:3px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-top-color:var(--primary);border-radius:50%; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */animation:spin .65s linear infinite;margin:40px auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.alert{padding:14px 18px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */margin-bottom:18px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.88rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.alert-error{background:#fce8e6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1px solid #f5c6c4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.alert-success{background:#e6f4ea; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#188038; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1px solid #b7dfbc; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
@keyframes spin{to{transform:rotate(360deg)}}

/* Back to Top button */
#btnBackToTop{
  position:fixed;bottom:28px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */right:24px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:99990;
  width:32px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:32px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:50%; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:none;cursor:pointer;
  background:linear-gradient(135deg,#0a1628,#1a4a8a); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:#e8f4ff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:1.5rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,212,255,.35); /* ปรับสีเงาได้จากบรรทัดนี้ */
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
  transform:translateY(14px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */
}
#btnBackToTop.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
#btnBackToTop:hover{background:linear-gradient(135deg,#1a4a8a,#00d4ff); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */box-shadow:0 6px 22px rgba(0,212,255,.55); /* ปรับสีเงาได้จากบรรทัดนี้ */transform:translateY(-2px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */}
#btnBackToTop:active{opacity:.85;}

@media (max-width: 640px) {
  #btnBackToTop{bottom:16px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */right:14px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */width:42px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:42px; /* ปรับความสูงได้จากบรรทัดนี้ */font-size:1.2rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
}

@media (max-width: 900px) {
  /* จอเล็ก: ลดระยะและใช้พื้นที่ให้คุ้มที่สุด */
  .header-right{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:nowrap;justify-content:flex-end;}
  /* วันเวลาเปลี่ยนเป็นแนวนอนเพื่อประหยัดพื้นที่ */
  .header-clock{flex-direction:row;align-items:center;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  /* เส้นคั่นเตี้ยลงให้รับกับ header ที่ย่อลง */
  .header-divider{height:22px; /* ปรับความสูงได้จากบรรทัดนี้ */}
  /* ซ่อน label ของเวลาอัปเดตเพื่อไม่ให้แน่นเกินไป */
  .header-update .upd-label{display:none;}
  /* ช่องค้นหาถูกดันมาไว้หน้าสุดและยืดได้มากขึ้น */
  .header-search-wrap{order:-1;flex:1;max-width:200px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
  /* ช่องค้นหาเล็กลงให้พอดีกับมือถือ */
  .header-search-wrap .header-search-input{width:100px; /* ปรับความกว้างได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:5px 28px 5px 38px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
  /* ตอนโฟกัสยังขยายได้เล็กน้อย */
  .header-search-wrap .header-search-input:focus,
  .header-search-wrap .header-search-input:focus-visible{width:130px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
}

@media (max-width: 520px) {
  /* จอแคบมาก: จำกัดความกว้างของกล่องค้นหา */
  .header-search-wrap{max-width:150px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
}



/* === modules/ti-milestone.css === */
/* ==================== 02) TI + MILESTONE SYSTEM ==================== */
/* Mini index:
  - [PUBLIC SURFACE] .ti-*, .milestone-* (main tab blocks, cards, toolbars)
  - [INTERNAL OVERRIDE] #tab-ti.*, .milestone-capture-mode*, responsive @media for TI/Milestone
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/
.ti-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:14px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ti-toolbar-left{display:flex;align-items:center;gap:12px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.ti-toolbar-right{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.ti-subnote{font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.cache-note{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;}
.ti-toolbar-right .ms-btn{height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.ti-filter-row{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ti-filter-row .ms-wrap{position:relative;}
.ti-filter-row .ms-dropdown{min-width:130px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:220px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.ti-filter-row .ms-opt{padding:5px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.ti-filter-row input{padding:5px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */min-width:170px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.ti-meta{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-left:auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ti-summary-bar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:60px; /* ปรับค่าขนาด/ระยะของ grid-auto-rowsได้จากบรรทัดนี้ */align-items:stretch;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin:6px 0 8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:6px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1px solid #e8edf5; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#f1f5f9; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */}
.ti-summary-card{position:relative;width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */height:60px; /* ปรับความสูงได้จากบรรทัดนี้ */min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */box-sizing:border-box;background:#dff9fa9d; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #0766e3; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:7px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.04); /* ปรับสีเงาได้จากบรรทัดนี้ */transition:box-shadow .15s;}
.ti-summary-card:hover{background-color:#ccf3ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color: #0862e9; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */box-shadow:0 3px 10px rgba(15,23,42,.10); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.ti-summary-card.risk{background:#fffdf5; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#c5a00a; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ti-summary-card.gap{font-style: var(--danger);background:#fce6e6e0; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#e90b0b; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ti-summary-label{position:absolute;top:6px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */left:6px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */right:6px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.08; /* ปรับ ความสูง ได้จากบรรทัดนี้ */font-weight:500;color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:center;text-transform:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:22px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:.01em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.ti-summary-value{position:absolute;top:27px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */left:4px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */right:4px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */text-align:center;font-size:1.05rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.04; /* ปรับ ความสูง ได้จากบรรทัดนี้ */font-weight:700;color:#0f172a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */letter-spacing:-.3px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.ti-summary-pct{position:absolute;top:45px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */left:4px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */right:4px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */text-align:center;font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.02; /* ปรับ ความสูง ได้จากบรรทัดนี้ */font-weight:500;color:#94a3b8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ti-summary-card.gap .ti-summary-value,.ti-summary-card.risk .ti-summary-value{color:#dc2626; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.ti-summary-bar .ti-summary-clear{grid-column:1/-1;justify-self:end;align-self:center;}
.ti-chart-group{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-bottom:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */flex-wrap:wrap;}
.ti-chart-group .ms-btn{height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.ti-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ti-chart-grid .chart-card{padding:12px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.ti-chart-grid .chart-card h3{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */margin-bottom:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.ti-chart-box{position:relative;height:200px; /* ปรับความสูงได้จากบรรทัดนี้ */min-height:200px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-height:200px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */overflow:hidden;}
.ti-chart-box canvas{display:block!important;width:100%!important; /* ปรับความกว้างได้จากบรรทัดนี้ */height:100%!important; /* ปรับความสูงได้จากบรรทัดนี้ */}
.ti-chart-box.ti-donut-box{display:flex;align-items:center;justify-content:center;}
.ti-chart-box.ti-donut-box canvas{width:auto!important; /* ปรับความกว้างได้จากบรรทัดนี้ */height:100%!important; /* ปรับความสูงได้จากบรรทัดนี้ */max-width:100%!important; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */aspect-ratio:1/1;}
.ti-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ti-kpi-grid.ti-kpi-hidden{display:none;}
.ti-kpi-card{border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 2px 8px rgba(0,0,0,.09); /* ปรับสีเงาได้จากบรรทัดนี้ */position:relative;overflow:hidden;color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */min-height:92px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;}
.ti-kpi-card:hover{transform:translateY(-2px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */box-shadow:0 8px 18px rgba(0,0,0,.2); /* ปรับสีเงาได้จากบรรทัดนี้ */filter:saturate(1.04);}
.ti-kpi-card.ti-kpi-active{outline:2px solid rgba(255,255,255,.92); /* ปรับสีเส้นโฟกัส/เส้นขอบนอกได้จากบรรทัดนี้ */outline-offset:-2px; /* ปรับระยะห่างเส้นโฟกัสได้จากบรรทัดนี้ */box-shadow:0 0 0 3px rgba(15,23,42,.24),0 8px 18px rgba(0,0,0,.22); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.ti-kpi-card::after{content:'';position:absolute;right:-12px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */bottom:-12px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */width:56px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:56px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:50%; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:rgba(255,255,255,.12); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-kpi-label{font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.88;text-transform:none;letter-spacing:.2px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */font-weight:700;line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */min-height:28px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */position:relative;z-index:1;}
.ti-kpi-value-row{display:flex;align-items:flex-end;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */position:relative;z-index:1;}
.ti-kpi-value{font-size:1.45rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:-.5px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.ti-kpi-pct{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;opacity:.95;}
.ti-kpi-sub{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.82;margin-top:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */position:relative;z-index:1;}
.ti-kpi-bar{margin-top:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */height:5px; /* ปรับความสูงได้จากบรรทัดนี้ */background:rgba(255,255,255,.24); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */overflow:hidden;position:relative;z-index:1;}
.ti-kpi-fill{height:5px; /* ปรับความสูงได้จากบรรทัดนี้ */background:rgba(255,255,255,.92); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */transition:width .3s ease;}
.ti-kpi-card.k1{background:linear-gradient(135deg,#1a73e8,#0d47a1); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-kpi-card.k2{background:linear-gradient(135deg,#0ea5e9,#0369a1); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-kpi-card.k3{background:linear-gradient(135deg,#14b8a6,#0f766e); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-kpi-card.k4{background:linear-gradient(135deg,#f59e0b,#c2410c); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-kpi-card.k5{background:linear-gradient(135deg,#8b5cf6,#6d28d9); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-kpi-card.k6{background:linear-gradient(135deg,#22c55e,#15803d); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-table-wrap{background:#ffffff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 1px 4px rgba(15,23,42,.08),0 0 0 1px #e2e8f0; /* ปรับสีเงาได้จากบรรทัดนี้ */overflow:auto;max-height:none; /* ปรับ ความสูง ได้จากบรรทัดนี้ */border:none;}
.ti-table-wrap.ti-freeze-wrap{max-height:calc(100vh - 280px); /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.ti-table{width:max-content; /* ปรับความกว้างได้จากบรรทัดนี้ */min-width:100%; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */border-collapse:collapse;font-size:var(--ti-table-font-size); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */background:#f8fafb; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ - เปลี่ยนเป็นสีเทาอ่อนเข้ากับ Navy theme */table-layout:auto;}
.ti-table th,.ti-table td{border:none;border-right:1px solid var(--ti-grid-border); /* ปรับค่าขนาด/ระยะของ border-rightได้จากบรรทัดนี้ */border-bottom:1px solid var(--ti-grid-border); /* ปรับค่าขนาด/ระยะของ border-bottomได้จากบรรทัดนี้ */padding:var(--ti-table-cell-py) var(--ti-table-cell-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */text-align:center;vertical-align:middle;line-height:var(--ti-table-cell-line-height); /* ปรับ ความสูง ได้จากบรรทัดนี้ */height:var(--ti-table-cell-height); /* ปรับความสูงได้จากบรรทัดนี้ */box-sizing:border-box;}
.ti-table th{white-space:normal;word-break:break-word;min-width:40px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:50px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */background:var(--ti-head-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--ti-head-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-transform:none;padding:var(--ti-table-head-py) var(--ti-table-head-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */height:var(--ti-table-head-height); /* ปรับความสูงได้จากบรรทัดนี้ */font-size:.56rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ - เพิ่มขึ้นเพื่อให้อ่านง่าย */line-height:1.15; /* ปรับ ความสูง ได้จากบรรทัดนี้ - เพิ่มเพื่อให้อ่านง่าย */border-right:1px solid rgba(255,255,255,0.15); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ - เปลี่ยนเป็นสีขาวจาง */border-bottom:2px solid #38bdf8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */letter-spacing:.02em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ - เพิ่มเพื่อให้อ่านชัด */}
.ti-table td{white-space:nowrap;min-width:26px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:50px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */overflow:hidden;text-overflow:ellipsis;background:var(--ti-row-odd); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ti-table tbody tr:nth-child(even) td{background:var(--ti-row-even); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-table tbody tr:hover td{background:var(--ti-row-hover); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */transition:background .12s ease;}
.ti-table td.ti-col-region{min-width:74px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:74px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */font-weight:600;color:#0f172a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ - เปลี่ยนเป็นสีเข้มเพื่อให้อ่านง่าย */}
.ti-table td.ti-col-subcon{min-width:58px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:86px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */font-weight:600;text-align:center;overflow:visible;color:#0f172a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ - เปลี่ยนเป็นสีเข้มเพื่อให้อ่านง่าย */}
.ti-table td.ti-col-text{min-width:40px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:50px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;}
.ti-zero{color:#cbd5e1; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:400;}
.ti-table th.ti-col-region,
.ti-table td.ti-col-region{position:sticky;left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:4;background:var(--ti-row-odd); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-table th.ti-col-subcon,
.ti-table td.ti-col-subcon{position:sticky;left:74px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:5;background:var(--ti-row-odd); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-table th.ti-col-region,
.ti-table th.ti-col-subcon{z-index:7;background:var(--ti-head-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--ti-head-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ti-table tbody tr:nth-child(even) td.ti-col-region,
.ti-table tbody tr:nth-child(even) td.ti-col-subcon{background:var(--ti-row-even); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-table tbody tr:hover td.ti-col-region,
.ti-table tbody tr:hover td.ti-col-subcon{background:var(--ti-row-hover); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}

/* Region color coding - แต่ละ region มีสีเด่นต่างกันเพื่อให้อ่านง่าย */
.ti-table tbody tr.ti-region-bkk td{background:#e0f2fe;border-left:3px solid #0284c7;} /* BKK: ฟ้าอ่อน */
.ti-table tbody tr.ti-region-bkk:nth-child(even) td{background:#bae6fd;} /* BKK แถวคู่: ฟ้าเข้มขึ้น */
.ti-table tbody tr.ti-region-bkk:hover td{background:#7dd3fc !important;} /* BKK hover: ฟ้าสด */

.ti-table tbody tr.ti-region-cr td{background:#dcfce7;border-left:3px solid #16a34a;} /* CR: เขียวอ่อน */
.ti-table tbody tr.ti-region-cr:nth-child(even) td{background:#bbf7d0;} /* CR แถวคู่: เขียวเข้มขึ้น */
.ti-table tbody tr.ti-region-cr:hover td{background:#86efac !important;} /* CR hover: เขียวสด */

.ti-table tbody tr.ti-region-er td{background:#fef3c7;border-left:3px solid #d97706;} /* ER: เหลืองอ่อน */
.ti-table tbody tr.ti-region-er:nth-child(even) td{background:#fde68a;} /* ER แถวคู่: เหลืองเข้มขึ้น */
.ti-table tbody tr.ti-region-er:hover td{background:#fcd34d !important;} /* ER hover: เหลืองสด */

.ti-table tbody tr.ti-region-ner td{background:#fce7f3;border-left:3px solid #db2777;} /* NER: ชมพูอ่อน */
.ti-table tbody tr.ti-region-ner:nth-child(even) td{background:#fbcfe8;} /* NER แถวคู่: ชมพูเข้มขึ้น */
.ti-table tbody tr.ti-region-ner:hover td{background:#f9a8d4 !important;} /* NER hover: ชมพูสด */

.ti-table tbody tr.ti-region-sr td{background:#ede9fe;border-left:3px solid #7c3aed;} /* SR: ม่วงอ่อน */
.ti-table tbody tr.ti-region-sr:nth-child(even) td{background:#ddd6fe;} /* SR แถวคู่: ม่วงเข้มขึ้น */
.ti-table tbody tr.ti-region-sr:hover td{background:#c4b5fd !important;} /* SR hover: ม่วงสด */

/* Region-specific sticky column backgrounds - sticky columns ต้องมีสีตาม region */
.ti-table tbody tr.ti-region-bkk td.ti-col-region,
.ti-table tbody tr.ti-region-bkk td.ti-col-subcon{background:#e0f2fe;} /* BKK sticky: ฟ้าอ่อน */
.ti-table tbody tr.ti-region-bkk:nth-child(even) td.ti-col-region,
.ti-table tbody tr.ti-region-bkk:nth-child(even) td.ti-col-subcon{background:#bae6fd;} /* BKK sticky แถวคู่ */
.ti-table tbody tr.ti-region-bkk:hover td.ti-col-region,
.ti-table tbody tr.ti-region-bkk:hover td.ti-col-subcon{background:#7dd3fc !important;} /* BKK sticky hover */

.ti-table tbody tr.ti-region-cr td.ti-col-region,
.ti-table tbody tr.ti-region-cr td.ti-col-subcon{background:#dcfce7;} /* CR sticky: เขียวอ่อน */
.ti-table tbody tr.ti-region-cr:nth-child(even) td.ti-col-region,
.ti-table tbody tr.ti-region-cr:nth-child(even) td.ti-col-subcon{background:#bbf7d0;} /* CR sticky แถวคู่ */
.ti-table tbody tr.ti-region-cr:hover td.ti-col-region,
.ti-table tbody tr.ti-region-cr:hover td.ti-col-subcon{background:#86efac !important;} /* CR sticky hover */

.ti-table tbody tr.ti-region-er td.ti-col-region,
.ti-table tbody tr.ti-region-er td.ti-col-subcon{background:#fef3c7;} /* ER sticky: เหลืองอ่อน */
.ti-table tbody tr.ti-region-er:nth-child(even) td.ti-col-region,
.ti-table tbody tr.ti-region-er:nth-child(even) td.ti-col-subcon{background:#fde68a;} /* ER sticky แถวคู่ */
.ti-table tbody tr.ti-region-er:hover td.ti-col-region,
.ti-table tbody tr.ti-region-er:hover td.ti-col-subcon{background:#fcd34d !important;} /* ER sticky hover */

.ti-table tbody tr.ti-region-ner td.ti-col-region,
.ti-table tbody tr.ti-region-ner td.ti-col-subcon{background:#fce7f3;} /* NER sticky: ชมพูอ่อน */
.ti-table tbody tr.ti-region-ner:nth-child(even) td.ti-col-region,
.ti-table tbody tr.ti-region-ner:nth-child(even) td.ti-col-subcon{background:#fbcfe8;} /* NER sticky แถวคู่ */
.ti-table tbody tr.ti-region-ner:hover td.ti-col-region,
.ti-table tbody tr.ti-region-ner:hover td.ti-col-subcon{background:#f9a8d4 !important;} /* NER sticky hover */

.ti-table tbody tr.ti-region-sr td.ti-col-region,
.ti-table tbody tr.ti-region-sr td.ti-col-subcon{background:#ede9fe;} /* SR sticky: ม่วงอ่อน */
.ti-table tbody tr.ti-region-sr:nth-child(even) td.ti-col-region,
.ti-table tbody tr.ti-region-sr:nth-child(even) td.ti-col-subcon{background:#ddd6fe;} /* SR sticky แถวคู่ */
.ti-table tbody tr.ti-region-sr:hover td.ti-col-region,
.ti-table tbody tr.ti-region-sr:hover td.ti-col-subcon{background:#c4b5fd !important;} /* SR sticky hover */

/* Region total rows - สีเข้มขึ้นกว่าแถวธรรมดา */
.ti-table tbody tr.ti-row-total.ti-region-bkk td{background:#7dd3fc !important;border-left:3px solid #0284c7;font-weight:600;} /* BKK total: ฟ้าเข้ม */
.ti-table tbody tr.ti-row-total.ti-region-cr td{background:#86efac !important;border-left:3px solid #16a34a;font-weight:600;} /* CR total: เขียวเข้ม */
.ti-table tbody tr.ti-row-total.ti-region-er td{background:#fcd34d !important;border-left:3px solid #d97706;font-weight:600;} /* ER total: เหลืองเข้ม */
.ti-table tbody tr.ti-row-total.ti-region-ner td{background:#f9a8d4 !important;border-left:3px solid #db2777;font-weight:600;} /* NER total: ชมพูเข้ม */
.ti-table tbody tr.ti-row-total.ti-region-sr td{background:#c4b5fd !important;border-left:3px solid #7c3aed;font-weight:600;} /* SR total: ม่วงเข้ม */

.ti-table td.ti-col-subcon{box-shadow:2px 0 4px -1px var(--ti-sticky-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.ti-filter-link{font-weight:700;color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;display:inline-flex;align-items:center;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */white-space:nowrap;}
.ti-filter-link:hover{text-decoration:underline;}
.ti-filter-link.team-link{font-weight:700;}
.ti-subcon-link-active{font-weight:800;text-decoration:underline;}
#tab-ti .team-link{font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;}
#tab-ti.ti-freeze .ti-table thead th{position:sticky;top:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:10;}
#tab-ti.ti-freeze .ti-table thead th.ti-col-region{left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:12;}
#tab-ti.ti-freeze .ti-table thead th.ti-col-subcon{left:74px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:13;}
#tab-ti.ti-capture-mode .ti-summary-bar{grid-auto-rows:90px; /* ปรับค่าขนาด/ระยะของ grid-auto-rowsได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-summary-card{height:90px; /* ปรับความสูงได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-summary-label{top:9px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */max-height:30px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-summary-value{top:41px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */font-size:1.28rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-summary-pct{top:70px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-kpi-card{min-height:148px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */padding:14px 15px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-kpi-label{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */min-height:36px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-kpi-value{font-size:1.9rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-chart-grid .chart-card{padding:16px 16px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-chart-box{height:300px; /* ปรับความสูงได้จากบรรทัดนี้ */min-height:300px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-height:300px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-chart-box.ti-donut-box canvas{height:100%!important; /* ปรับความสูงได้จากบรรทัดนี้ */width:auto!important; /* ปรับความกว้างได้จากบรรทัดนี้ */aspect-ratio:1/1;}
#tab-ti.ti-capture-mode .ti-table th{height:86px; /* ปรับความสูงได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */padding:9px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-table td{height:34px; /* ปรับความสูงได้จากบรรทัดนี้ */font-size:.92rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.12; /* ปรับ ความสูง ได้จากบรรทัดนี้ */padding:3px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */max-width:72px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-table td.ti-col-region{min-width:96px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:96px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#tab-ti.ti-capture-mode .ti-table td.ti-col-subcon{min-width:78px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:110px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#tab-ti.ti-charts-hidden .ti-chart-grid{display:none;}
#tab-ti.ti-charts-hidden .ti-chart-group{display:none;}
#tab-teamEff.te-charts-hidden .te-chart-grid{display:none;}
#tab-teamEff.te-charts-hidden .te-chart-slicers{display:none;}
.ti-row-total td{background:var(--ti-total-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-weight:600;color:var(--ti-total-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-top:1px solid #8bd9ad!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-bottom:1px solid #8bd9ad!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.ti-row-grand td{background:var(--ti-grand-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-weight:700;color:var(--ti-grand-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-top:1px solid #f7d977!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-bottom:1px solid #f7d977!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.ti-row-total td.ti-col-region,
.ti-row-total td.ti-col-subcon{background:var(--ti-total-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-row-grand td.ti-col-region,
.ti-row-grand td.ti-col-subcon{background:var(--ti-grand-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ti-row-total td.ti-col-region,
.ti-row-total td.ti-col-subcon,
.ti-row-grand td.ti-col-region,
.ti-row-grand td.ti-col-subcon{font-weight:600!important;}
.ti-empty{padding:28px 16px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */text-align:center;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.milestone-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.milestone-toolbar-left{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.milestone-subnote{font-size:.96rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:900;color:#0f172a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #cfe0fb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:4px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 1px 4px rgba(15,23,42,.06); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.milestone-report-head{margin:2px 0 12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */text-align:center;}
.milestone-report-title{font-size:1.45rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:900;color:#111827; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.15; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:-.02em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.milestone-report-subtitle{font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#4b5563; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-top:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */line-height:1.35; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.milestone-wrap{background:linear-gradient(180deg,#f4f9ff 0%, #edf5ff 100%); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #cfe0fb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:14px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */overflow:visible;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.milestone-flow{display:flex;flex-direction:column;gap:18px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.milestone-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */max-width:100%; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */align-items:start;}
.milestone-node{min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:none; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */display:flex;flex-direction:column;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */position:relative;}.milestone-arrow-right{position:absolute;right:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */top:88px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */transform:translate(calc(50% + 5px),-50%); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */z-index:2;pointer-events:none;width:20px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:20px; /* ปรับความสูงได้จากบรรทัดนี้ */display:flex;align-items:center;justify-content:center;}.milestone-arrow-right img{width:18px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:18px; /* ปรับความสูงได้จากบรรทัดนี้ */object-fit:contain;opacity:.65;}.milestone-row>.milestone-node:last-child .milestone-arrow-right{display:none!important;}
.milestone-card{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:none; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */height:176px; /* ปรับความสูงได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #d7e3f7; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:16px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 10px 18px rgba(15,23,42,.10),0 1px 0 rgba(255,255,255,.8) inset; /* ปรับสีเงาได้จากบรรทัดนี้ */overflow:hidden;position:relative;}
.milestone-card.is-ok{border-color:#8fd7ad; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f5fff8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.is-mid{border-color:#f6d184; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#fffaf1; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.is-low{border-color:#efb0b0; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#fff6f6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.is-na{border-color:#cbd5e1; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.theme-etss{border-color:#79d5a1; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f2fcf6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.theme-iepms{border-color:#f2c06f; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#fff8ef; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.theme-ais{border-color:#f0a869; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#fff5ed; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.theme-field{border-color:#e58888; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#fff3f3; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-card.theme-closeout{border-color:#b97dd0; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#faf4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band{height:56px; /* ปรับความสูงได้จากบรรทัดนี้ */display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */padding:6px 8px 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-bottom:1px solid rgba(255,255,255,.25); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.milestone-band.ok{background:linear-gradient(180deg,#31c26a,#16a34a); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.mid{background:linear-gradient(180deg,#ffcb69,#f59e0b); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.low{background:linear-gradient(180deg,#fb7f63,#ef4444); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.na{background:linear-gradient(180deg,#a3a3a3,#737373); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.theme-etss{background:linear-gradient(180deg,#43c776,#1faa59); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.theme-iepms{background:linear-gradient(180deg,#ffc56c,#f29a1f); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.theme-ais{background:linear-gradient(180deg,#ffab70,#ef7d2d); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.theme-field{background:linear-gradient(180deg,#ef6f74,#c92d34); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-band.theme-closeout{background:linear-gradient(180deg,#bf8ce3,#8b55c4); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-pct{font-size:1.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:900;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:-.03em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */color:#111827; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-shadow:0 1px 0 rgba(255,255,255,.3); /* ปรับสีเงาได้จากบรรทัดนี้ */text-align:center;}
.milestone-mini{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:900;opacity:.98;margin-top:1px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */letter-spacing:.02em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */text-align:center;text-transform:none;}
.milestone-body{height:120px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:8px 10px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.milestone-ratio{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#111827; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;min-height:14px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */line-height:1.3; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:.01em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.milestone-ratio .ms-ratio-a{color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.milestone-ratio .ms-ratio-b{color:#111827; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.milestone-ratio .ms-ratio-c{color:#c0392b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.milestone-icon{height:42px; /* ปรับความสูงได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */display:flex;align-items:center;justify-content:center;font-size:2rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */color:#10243e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */filter:drop-shadow(0 2px 1px rgba(0,0,0,.08)); /* ปรับค่าสีของ filterได้จากบรรทัดนี้ */margin-top:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}.milestone-icon-img{width:34px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:34px; /* ปรับความสูงได้จากบรรทัดนี้ */object-fit:contain;display:block;}
.milestone-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.milestone-main{display:flex;justify-content:space-between;align-items:flex-end;width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-top:auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.milestone-sites{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#334155; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:right;font-weight:700;white-space:nowrap;line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.milestone-gap{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:800;margin-top:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */align-self:flex-start;}
.milestone-extra{display:flex;flex-direction:column;gap:2px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.milestone-extra-line{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#4b5563; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.25; /* ปรับ ความสูง ได้จากบรรทัดนี้ */display:flex;align-items:baseline;justify-content:space-between;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */white-space:nowrap;}
.milestone-extra-label{min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */overflow:hidden;text-overflow:ellipsis;}
.milestone-extra-value{flex:0 0 auto;font-weight:700;color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.milestone-extra-line b{color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.milestone-note{min-height:54px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */height:auto; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0 2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#4b5563; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.25; /* ปรับ ความสูง ได้จากบรรทัดนี้ */overflow:hidden;}
.milestone-arrow,.milestone-turn{display:none;}
.milestone-footnote{margin-top:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card{height:194px; /* ปรับความสูงได้จากบรรทัดนี้ */overflow:hidden;display:flex;flex-direction:column;}
.milestone-capture-mode .milestone-band{height:60px; /* ปรับความสูงได้จากบรรทัดนี้ */flex:0 0 60px; /* ปรับค่าขนาด/ระยะของ flexได้จากบรรทัดนี้ */border-radius:16px 16px 0 0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-body{flex:1 1 auto;min-height:0; /* ปรับ ความสูง ได้จากบรรทัดนี้ */height:auto; /* ปรับความสูงได้จากบรรทัดนี้ */padding:10px 12px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:0 0 16px 16px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:inherit; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.theme-etss .milestone-body{background:#f2fcf6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.theme-iepms .milestone-body{background:#fff8ef; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.theme-ais .milestone-body{background:#fff5ed; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.theme-field .milestone-body{background:#fff3f3; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.theme-closeout .milestone-body{background:#faf4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.is-ok .milestone-body{background:#f5fff8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.is-mid .milestone-body{background:#fffaf1; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.is-low .milestone-body{background:#fff6f6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-card.is-na .milestone-body{background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-pct{font-size:1.92rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-ratio{font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-icon{font-size:2.2rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */height:54px; /* ปรับความสูงได้จากบรรทัดนี้ */}.milestone-capture-mode .milestone-icon-img{width:42px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:42px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.milestone-capture-mode .ti-toolbar-right{display:flex!important;align-items:center;justify-content:flex-end;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.milestone-capture-mode .ti-toolbar-right .ms-btn{display:none!important;}
.milestone-capture-mode #milestoneCacheInfo{display:inline-block!important;white-space:nowrap;font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-footnote{display:none!important;}
.milestone-capture-mode .milestone-toolbar-left{white-space:nowrap;}
.milestone-capture-mode .milestone-subnote{white-space:nowrap;}
.milestone-capture-mode .milestone-sites{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-gap{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-note{min-height:74px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */height:auto; /* ปรับความสูงได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-note,.milestone-capture-mode .milestone-extra-line{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-logic-open{display:none!important;}
.milestone-capture-mode .milestone-arrow{min-width:78px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:78px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */height:38px; /* ปรับความสูงได้จากบรรทัดนี้ */margin-top:88px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-turn{height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.milestone-capture-mode .milestone-turn.turn-right::before,.milestone-capture-mode .milestone-turn.turn-left::before{top:2px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */width:30px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */}
@media(max-width:1200px){.ti-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:900px){.ti-chart-grid{grid-template-columns:1fr;}.ti-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ti-summary-bar{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media(max-width:700px){.ti-summary-bar{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:520px){.ti-summary-bar{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.ti-chart-box{height:160px; /* ปรับความสูงได้จากบรรทัดนี้ */min-height:160px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-height:160px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}.ti-table{font-size:var(--ti-table-font-size-mobile); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.ti-table th,.ti-table td{height:var(--ti-table-cell-height-mobile); /* ปรับความสูงได้จากบรรทัดนี้ */}}
@media(max-width:700px){.milestone-arrow-right{display:none!important;}.milestone-report-title{font-size:1.05rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.milestone-report-subtitle{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.milestone-toolbar{align-items:flex-start;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}.milestone-toolbar-left,.milestone-toolbar .ti-toolbar-right{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */}.milestone-toolbar .ti-toolbar-right{gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */justify-content:flex-start;}.milestone-toolbar .ti-toolbar-right .ms-btn{flex:0 0 auto;}.milestone-toolbar #milestoneCacheInfo{white-space:normal;line-height:1.25; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-width:100%; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}.milestone-wrap{padding:10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}.milestone-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}.milestone-card{height:172px; /* ปรับความสูงได้จากบรรทัดนี้ */}.milestone-band{height:50px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:6px 6px 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}.milestone-pct{font-size:1.3rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.milestone-mini{font-size:.64rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.milestone-body{height:122px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:8px 8px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}.milestone-sites{font-size:.59rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */white-space:normal;}.milestone-gap{font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.milestone-icon{font-size:1.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */height:34px; /* ปรับความสูงได้จากบรรทัดนี้ */}.milestone-icon-img{width:26px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:26px; /* ปรับความสูงได้จากบรรทัดนี้ */}.milestone-center{min-height:44px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}.milestone-note{height:auto; /* ปรับความสูงได้จากบรรทัดนี้ */min-height:46px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}}
@media(max-width:480px){.milestone-wrap{padding:8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}.milestone-row{grid-template-columns:minmax(0,1fr);}.milestone-card{height:180px; /* ปรับความสูงได้จากบรรทัดนี้ */}.milestone-body{height:128px; /* ปรับความสูงได้จากบรรทัดนี้ */}.milestone-mini{font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.milestone-pct{font-size:1.45rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}.milestone-note{min-height:40px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}}


/* === modules/dashboard.css === */
/* ==================== 03) DASHBOARD SYSTEM ==================== */
/* Mini index:
  - [PUBLIC SURFACE] .main-scroll, .kpi-*, .activity-*, .filter-bar, .charts-*, .table-wrap
  - [INTERNAL OVERRIDE] #dashSnapshot *, .dash-pager*, sticky columns and dashboard-specific cells
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/
/* Main scrollable area — sits below tab-bar and filter-bar */
.main-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 20px 24px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */scroll-behavior:smooth;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Global filter bar on Dashboard tab */
.dash-control-bar{
  background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  border-radius:0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  padding:8px 14px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  display:flex;
  flex-wrap:nowrap;
  gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  align-items:flex-end;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.12); /* ปรับสีเงาได้จากบรรทัดนี้ */
  overflow-x:auto;
  border-bottom:2px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-bottomได้จากบรรทัดนี้ */
}
.dcb-group{display:flex;flex-direction:column;gap:2px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-shrink:0;}
.dcb-group label{
  font-size:.6rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */
  white-space:nowrap;
  line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
.dcb-group input[type="date"]{width:118px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.dcb-group input[type="text"]{width:110px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.dcb-group select{width:100px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.dcb-sep{width:1px; /* ปรับความกว้างได้จากบรรทัดนี้ */background:var(--border); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */align-self:stretch;margin:0 4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */flex-shrink:0;}
.dcb-actions{display:flex;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */align-items:flex-end;flex-shrink:0;}

@media (max-width: 900px) {
  .dash-control-bar{padding:6px 8px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .dcb-sep{margin:0 2px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
  .dcb-group input[type="date"]{width:95px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
  .dcb-group input[type="text"]{width:90px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
}

@media (max-width: 480px) {
  .hot-btns{gap:3px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .hot-btn{padding:0 7px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .dcb-group label{font-size:.55rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .ms-btn{min-width:70px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:16px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.kpi-grid{grid-template-columns:1fr 1fr;}}
.kpi-card{
  border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:14px 16px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  box-shadow:0 3px 10px rgba(0,0,0,.10); /* ปรับสีเงาได้จากบรรทัดนี้ */
  transition:transform .18s,box-shadow .18s;
  position:relative;overflow:hidden;color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}
.kpi-card:hover{transform:translateY(-2px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */box-shadow:0 6px 18px rgba(0,0,0,.16); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.kpi-card[onclick]{cursor:pointer;}
.kpi-card[onclick]:active{opacity:.9;}
.kpi-card.kpi-active{outline:none;box-shadow:0 0 0 3px #00d4ff,0 0 0 6px rgba(0,212,255,.25),0 8px 22px rgba(0,0,0,.22)!important; /* ปรับสีเงาได้จากบรรทัดนี้ */}
.kpi-card::after{
  content:'';position:absolute;right:-14px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */bottom:-14px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  width:70px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:70px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:50%; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:rgba(255,255,255,.12); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
.kpi-card.k1{background:linear-gradient(135deg,#0a1628,#0d2d5e); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.kpi-card.k2{background:linear-gradient(135deg,#1a4a8a,#0a2952); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.kpi-card.k3{background:linear-gradient(135deg,#0d7aa8,#064e72); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.kpi-card.k4{background:linear-gradient(135deg,#0099cc,#006b94); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.kpi-card.k5{background:linear-gradient(135deg,#0ea5e9,#0369a1); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.kpi-card.k6{background:linear-gradient(135deg,#00b4d8,#0077b6); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.kpi-label{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.85;margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */text-transform:uppercase;letter-spacing:.5px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */font-weight:500;}
.kpi-value{font-size:2.4rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:-1px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */text-align: left}
.kpi-sub{font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.75;margin-top:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.kpi-onsite-num{font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;opacity:1;}
.kpi-onsite-lbl{font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.72;}
.kpi-done{
  margin-top:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
}
.kpi-done-bar{
  background:rgba(255,255,255,.22); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */height:8px; /* ปรับความสูงได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */overflow:hidden;
}
.kpi-done-fill{
  background:rgba(255, 255, 255, 0.9); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */height:8px; /* ปรับความสูงได้จากบรรทัดนี้ */transition:width .5s;
}
.kpi-done-text{
  font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.9;font-weight:500;letter-spacing:.3px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */
}
.kpi-region-breakdown{font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.65;margin-top:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */letter-spacing:.01em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */line-height:1.4; /* ปรับ ความสูง ได้จากบรรทัดนี้ */white-space:normal;word-break:break-word;}

/* Activity summary cards row */
.activity-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:18px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
@media(max-width:1200px){.activity-row{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.activity-row{grid-template-columns:1fr 1fr;}}
.act-card{
  background:linear-gradient(90deg,#ffffff,#ffffff); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:12px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  box-shadow:0 2px 8px rgba(0,0,0,.07); /* ปรับสีเงาได้จากบรรทัดนี้ */cursor:pointer;
  display:flex;flex-direction:column;gap:0; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  border-top:3px solid transparent; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */transition:transform .15s;
}
.act-card-top{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.act-card:hover{transform:translateY(-2px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */}
.act-card.act-active{border-top-width:4px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */box-shadow:0 0 0 2px rgba(26,74,138,.2),0 8px 18px rgba(0,0,0,.12); /* ปรับสีเงาได้จากบรรทัดนี้ */background:#e8f2fd; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.act-card.ac1{border-top-color:#0a1628; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.act-card.ac2{border-top-color:#0099cc; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.act-card.ac3{border-top-color:#0ea5e9; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.act-card.ac4{border-top-color:#00b4d8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.act-card.ac5{border-top-color:#ef4444; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.act-card.ac6{border-top-color:#f59e0b; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.act-icon{width:38px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:38px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */display:flex;align-items:center;justify-content:center;font-size:1.1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */flex-shrink:0;}
.ac1 .act-icon{background:#dbeafe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ac2 .act-icon{background:#cff4fd; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ac3 .act-icon{background:#e0f2fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ac4 .act-icon{background:#ccf2fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ac5 .act-icon{background:#fee2e2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ac6 .act-icon{background:#fef3c7; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.act-body{min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */flex:1;}
.today-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.today-table-header h3{font-size:.95rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;}
.act-label{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.act-plan{font-size:1.5rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.act-onsite{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;margin-top:2px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.act-done{color:var(--success)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.act-reg-breakdown{font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.6;margin-top:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */letter-spacing:.01em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */line-height:1.4; /* ปรับ ความสูง ได้จากบรรทัดนี้ */white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */}
/* Subcon duplicate styles */
.subcon-dup-row td{background:rgba(255,152,0,.06)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.subcon-dup-banner{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */background:#fff3e0; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #ffcc80; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:8px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#7c4200; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.subcon-dup-banner span{flex:1;font-weight:600;}
.subcon-dup-banner-btn{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:3px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1px solid #e65100; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#e65100; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;font-weight:600;white-space:nowrap;}
.subcon-dup-banner-btn:hover,.subcon-dup-banner-btn.active{background:#e65100; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.subcon-dup-banner-close{font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */background:none; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:none;cursor:pointer;color:#999; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */padding:0 2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}

/* Subcon toolbar controls */
.subcon-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */flex-wrap:wrap;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.subcon-title{font-size:.95rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.subcon-controls{display:flex;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */align-items:center;flex-wrap:wrap;}
.subcon-control-field{
  padding:6px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */
  border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  min-height:36px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}
.subcon-control-search{width:180px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#subconNameFilter.subcon-control-field{min-width:130px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.subcon-controls .btn-sm{min-height:36px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */padding:6px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.subcon-table-count{font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-bottom:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.subcon-mobile-hint{display:none;font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin:-2px 0 8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}

@media (max-width: 768px) {
  .subcon-toolbar{align-items:stretch;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .subcon-title{font-size:.9rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .subcon-controls{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */display:grid;grid-template-columns:1fr 1fr;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .subcon-control-search{grid-column:1 / -1;width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */}
  #subconNameFilter.subcon-control-field{min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
  .subcon-controls .btn{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */justify-content:center;}
}

@media (max-width: 480px) {
  .subcon-controls{grid-template-columns:1fr;}
}

/* Subcon KPI cards */
.sc-kpi-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:14px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sc-kpi-card{background:linear-gradient(90deg,#ffffff,#fcfcfc); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 1px 5px rgba(0,0,0,.06); /* ปรับสีเงาได้จากบรรทัดนี้ */border-top:3px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-topได้จากบรรทัดนี้ */cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease;}
.sc-kpi-card:hover{transform:translateY(-1px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */box-shadow:0 6px 14px rgba(15,23,42,.14); /* ปรับสีเงาได้จากบรรทัดนี้ */background:#f9fcff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-kpi-active{box-shadow:0 0 0 2px rgba(26,74,138,.35),0 6px 14px rgba(15,23,42,.14); /* ปรับสีเงาได้จากบรรทัดนี้ */background:#f0f6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-total{border-top-color:#0a1628; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-bkk{border-top-color:#0ea5e9; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-cr{border-top-color:#10b981; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-er{border-top-color:#f59e0b; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-ner{border-top-color:#8b5cf6; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-sr{border-top-color:#ef4444; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sc-kpi-card.sc-nr{border-top-color:#ec4899; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sc-kpi-title{font-size:.6rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;text-transform:uppercase;letter-spacing:.5px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */opacity:.7;margin-bottom:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sc-kpi-num{font-size:1.5rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sc-kpi-subcon-break{margin-top:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.54rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */color:#4b5563; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-kpi-breakdown{margin-top:5px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */display:flex;flex-direction:column;gap:2px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.sc-kpi-type-row{display:flex;justify-content:space-between;font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.75;}
.sc-kpi-type-row.is-active{opacity:1;}
.sc-type-btn{border:none;background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:inherit; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:inherit; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */line-height:1.15; /* ปรับ ความสูง ได้จากบรรทัดนี้ */cursor:pointer;text-align:left;}
.sc-type-btn:hover{text-decoration:underline;opacity:1;}
.sc-type-btn.is-active{font-weight:800;color:#0a2952; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-decoration:underline;}
.sc-kpi-type-row .sc-type-val{font-weight:700;}
.sc-zone-row{display:flex;align-items:center;gap:7px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:nowrap;overflow-x:auto;margin:-6px 0 10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:4px 0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */white-space:nowrap;}
.sc-zone-label{font-size:.63rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:#334155; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */flex:0 0 auto;}

@media (max-width: 1200px) {
  .sc-kpi-row{grid-template-columns:repeat(4,1fr);}
}

@media (max-width: 900px) {
  .sc-kpi-row{grid-template-columns:repeat(3,1fr);}
}

@media (max-width: 768px) {
  .sc-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .sc-kpi-card{padding:10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
  .sc-kpi-title{font-size:.64rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .sc-kpi-num{font-size:1.25rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .sc-kpi-subcon-break{font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .sc-kpi-type-row{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .sc-zone-row{flex-wrap:wrap;overflow-x:visible;white-space:normal;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin:-2px 0 10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}

  #tab-subcon .table-wrap{
    border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
    box-shadow:0 4px 12px rgba(15,23,42,.09); /* ปรับสีเงาได้จากบรรทัดนี้ */
  }
  #tab-subcon .table-wrap table{min-width:980px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
  #tab-subcon .btn-edit-row{width:26px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:26px; /* ปรับความสูงได้จากบรรทัดนี้ */}
  #tab-subcon .table-wrap th:first-child,
  #tab-subcon .table-wrap td:first-child{width:38px; /* ปรับความกว้างได้จากบรรทัดนี้ */min-width:38px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:38px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
  #tab-subcon .table-wrap th:last-child,
  #tab-subcon .table-wrap td:last-child{min-width:72px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}

  .subcon-mobile-hint{display:block;}
}

@media (max-width: 480px) {
  .sc-kpi-row{grid-template-columns:1fr;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .sc-kpi-num{font-size:1.2rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .sc-kpi-breakdown{gap:3px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  #tab-subcon .table-wrap table{min-width:920px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
}

/* Subcon table: professional style + compact rows + horizontal scroll */
#tab-subcon .table-wrap{
  border:1px solid #d7e3f3; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  box-shadow:0 6px 18px rgba(15,23,42,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 22%); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  overflow:auto;
}
#tab-subcon .table-wrap table{
  min-width:1220px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  border-collapse:separate;
  border-spacing:0;
}
#tab-subcon .table-wrap thead th{
  position:sticky;
  top:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  z-index:12;
  white-space:nowrap;
}
#tab-subcon .table-wrap tbody td{
  white-space:nowrap;
}

/* Keep row index visible while horizontal scrolling */
#tab-subcon .table-wrap th:first-child,
#tab-subcon .table-wrap td:first-child{
  position:sticky;
  left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  width:34px; /* ปรับความกว้างได้จากบรรทัดนี้ */
  min-width:34px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  max-width:34px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  text-align:center;
  z-index:11;
}
#tab-subcon .table-wrap thead th:first-child{z-index:13;background:var(--table-head-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody tr:nth-child(odd) td:first-child{background:var(--table-row-odd); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody tr:nth-child(even) td:first-child{background:var(--table-row-even); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody tr:hover td:first-child{background:var(--table-row-hover)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}

/* Action column fixed on right for quick edit/delete */
#tab-subcon .table-wrap th:last-child,
#tab-subcon .table-wrap td:last-child{
  position:sticky;
  right:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  min-width:64px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  z-index:11;
  text-align:center;
}
#tab-subcon .table-wrap thead th:last-child{z-index:13;background:var(--table-head-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody tr:nth-child(odd) td:last-child{background:var(--table-row-odd); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody tr:nth-child(even) td:last-child{background:var(--table-row-even); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody tr:hover td:last-child{background:var(--table-row-hover)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}

#tab-subcon .btn-edit-row{
  width:22px; /* ปรับความกว้างได้จากบรรทัดนี้ */
  height:22px; /* ปรับความสูงได้จากบรรทัดนี้ */
  border:1px solid #d0dbe9; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
#tab-subcon .btn-edit-row:hover{background:#eef3ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#aabdd8; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

/* Red text only for Remark column (smaller font) */
#tab-subcon .table-wrap tbody td.sc-remark-cell{
  color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  max-width:260px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Region color highlight by cell (no badge) */
#tab-subcon .table-wrap tbody td.sc-region-cell{font-weight:700;text-align:center;}
#tab-subcon .table-wrap tbody td.sc-region-bkk{color:#1e40af; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody td.sc-region-cr{color:#b42318; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody td.sc-region-er{color:#166534; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody td.sc-region-ner{color:#b45309; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody td.sc-region-sr{color:#6d28d9; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody td.sc-region-nr{color:#0f766e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-subcon .table-wrap tbody td.sc-region-default{color:#374151; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* Filter bar */
.filter-bar{
  background:linear-gradient(90deg,#ffffff,#fcfcfc); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:14px 18px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  display:grid;
  grid-template-columns: 130px 130px 140px 160px 130px 1fr auto auto auto; /* ปรับค่าขนาด/ระยะของ grid-template-columnsได้จากบรรทัดนี้ */
  gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */align-items:end;
  margin-bottom:18px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */box-shadow:0 1px 5px rgba(0,0,0,.07); /* ปรับสีเงาได้จากบรรทัดนี้ */
}
.filter-bar label{font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */display:block;margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-weight:600;white-space:nowrap;}
.filter-bar select,.filter-bar input[type="date"],.filter-bar input[type="text"]{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */}
@media(max-width:900px){
  .filter-bar{grid-template-columns:1fr 1fr;flex-wrap:wrap;}
}

/* Buttons */
.btn{padding:9px 20px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:none;border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */cursor:pointer;font-size:.87rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;transition:all .2s;}
.btn-primary{background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.btn-primary:hover{background:#1557b0; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */box-shadow:0 2px 8px rgba(26,115,232,.4); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.btn-success{background:var(--success); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.btn-success:hover{background:#2d9248; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.btn-warn{background:var(--warning); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#333; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.btn-danger{background:var(--danger); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.btn-outline{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.btn-outline:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.btn-sm{padding:5px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.btn:disabled{opacity:.55;cursor:not-allowed;}

/* Charts */
.charts-section{margin-bottom:22px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.charts-slicer{
  background:linear-gradient(90deg,#ffffff,#fcfcfc); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:12px 18px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  display:flex;gap:12px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;align-items:flex-end;
  margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */box-shadow:0 1px 4px rgba(0,0,0,.07); /* ปรับสีเงาได้จากบรรทัดนี้ */
}
.slicer-group{display:flex;flex-direction:column;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.slicer-group label{font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.slicer-group select{min-width:130px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.multi-slicer{display:flex;flex-wrap:wrap;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */max-width:340px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.charts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:22px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
@media(max-width:1000px){.charts-row{grid-template-columns:1fr;}}
.chart-card{background:linear-gradient(90deg,#ffffff,#fcfcfc); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:18px 20px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.chart-card h3{font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-weight:600;text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}

/* Dashboard chart groups: keep collapse icon inside each chart box (no extra header bar) */
#tab-dashboard .dash-chart-group{
  position:relative;
  margin:0 0 8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  padding:6px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  background:linear-gradient(90deg,#ffffff,#fcfcfc); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  border:1px solid #d0dcf0; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  box-shadow:0 1px 4px rgba(0,0,0,.06); /* ปรับสีเงาได้จากบรรทัดนี้ */
}
#tab-dashboard .dash-chart-title{
  margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-weight:600;
  line-height:1.35; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
#tab-dashboard .dash-chart-head{
  display:flex;
  align-items:center;
  min-height:22px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  padding-right:18px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
#tab-dashboard .dash-chart-note{
  margin-top:2px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}
#tab-dashboard .dash-chart-collapse{
  position:absolute;
  top:6px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  right:8px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  border:none;
  background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  cursor:pointer;
  padding:2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
#tab-dashboard .sec-toggle-icon{
  display:inline-block;
  transition:transform .2s;
}
#tab-dashboard .sec-toggle-icon.collapsed{
  transform:rotate(-90deg);
}
#tab-dashboard .dash-chart-group .sec-body{margin-top:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
#tab-dashboard .dash-chart-group .charts-row,
#tab-dashboard .dash-chart-group .charts-row-2{margin-bottom:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
#tab-dashboard .dash-chart-group .pivot-wrap{margin-bottom:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}

/* Site Visits: merge title/action row and filter row into one visual container */
#tab-dashboard #secVisitsHeader{
  margin-bottom:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  border-bottom:none;
  border-radius:12px 12px 0 0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
}
#tab-dashboard #secVisits{
  margin-bottom:22px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  padding:10px 10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:1px solid #d0dcf0; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-top:none;
  border-radius:0 0 12px 12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#f6f9ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
#tab-dashboard #secVisits #dashSnapshot .dash-table-controls{
  margin:0 0 8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:none;
  border-radius:0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}

/* Table */
.table-wrap{overflow-x:auto;background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
/* Dashboard detail table — horizontal scroll enabled */
#dashSnapshot .table-wrap{overflow-x:auto;}
#dashSnapshot table{table-layout:fixed;width:max-content; /* ปรับความกว้างได้จากบรรทัดนี้ */min-width:100%; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#dashSnapshot table th,#dashSnapshot table td{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.64rem;
  padding-left:4px !important;
  padding-right:4px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1.6;
}
#dashSnapshot table th{padding-top:2px !important;padding-bottom:2px !important;}
/* action cell: must show both buttons without clipping */
#dashSnapshot table td:last-child{overflow:visible;text-overflow:unset;white-space:nowrap;}
/* fixed col widths — all in px for predictable layout */
#dashSnapshot table col.c-no    {width:32px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-date  {width:92px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-code  {width:88px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-reg   {width:78px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-zone  {width:64px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-name  {width:175px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-subcon{width:104px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-team  {width:138px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-act   {width:96px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-tos   {width:56px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-iepms {width:64px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-prog  {width:74px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-cact  {width:96px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-cprog {width:74px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-ehs   {width:112px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-rem   {width:180px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-rem2  {width:180px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-uptime{width:120px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table col.c-upby  {width:128px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#dashSnapshot table th{text-align:center;white-space:normal;vertical-align:middle;}
#dashSnapshot table td{text-align:center;}
#dashSnapshot table th:nth-child(2),
#dashSnapshot table td:nth-child(2),
#dashSnapshot table th:nth-child(3),
#dashSnapshot table td:nth-child(3){position:sticky;}
#dashSnapshot table th:nth-child(2),
#dashSnapshot table td:nth-child(2){left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */}
#dashSnapshot table th:nth-child(3),
#dashSnapshot table td:nth-child(3){left:70px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */}
#dashSnapshot table th:nth-child(2){z-index:17;}
#dashSnapshot table th:nth-child(3){z-index:16;}
#dashSnapshot table td:nth-child(2),
#dashSnapshot table td:nth-child(3){z-index:6;background:var(--table-row-even,#fff); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#dashSnapshot table td:nth-child(3){box-shadow:2px 0 0 #d9e3f2; /* ปรับสีเงาได้จากบรรทัดนี้ */}
#dashSnapshot table td:nth-child(15){overflow:visible;text-overflow:clip;white-space:nowrap;}
#dashSnapshot table tbody tr:nth-child(odd) td:nth-child(2),
#dashSnapshot table tbody tr:nth-child(odd) td:nth-child(3){background:var(--table-row-odd,#f8fafc); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#dashSnapshot table tbody tr:nth-child(even) td:nth-child(2),
#dashSnapshot table tbody tr:nth-child(even) td:nth-child(3){background:var(--table-row-even,#fff); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#dashSnapshot table tbody tr:hover > td{background:var(--table-row-hover)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#dashSnapshot table tbody tr:hover td:nth-child(2),
#dashSnapshot table tbody tr:hover td:nth-child(3){background:var(--table-row-hover)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#dashSnapshot .dash-table-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  align-items:flex-end;
  margin:0 0 8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  padding:6px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:1px solid #d7e3f4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#f6f9ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  overflow:visible !important;
}
#dashSnapshot .dash-table-control-item{
  display:flex;
  flex-direction:column;
  gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  min-width:90px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
}
#dashSnapshot .dash-table-control-item label{
  font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:600;
  color:#4b5c76; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
#dashSnapshot .dash-head-filter{
  width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */
  max-width:88px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
}
#dashSnapshot .dash-table-controls .ms-wrap{
  min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  overflow:visible !important;
  position:relative;
  z-index:100;
}
#dashSnapshot .dash-table-controls .ms-btn{
  min-width:94px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  max-width:170px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
}
#dashSnapshot .dash-table-controls-actions{
  margin-left:auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  display:flex;
  align-items:flex-end;
  gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  flex-wrap:wrap;
}
#dashSnapshot .dash-table-controls-actions .btn,
#dashSnapshot .dash-table-controls-actions .btn-export{height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */}
#dashSnapshot .dash-collapse-inline{
  height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */
  min-width:30px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  padding:0 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:none;
  background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  cursor:pointer;
}

@media (max-width: 900px){
  #dashSnapshot .dash-table-controls-actions{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */margin-left:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */justify-content:flex-start;}
}
#dashSnapshot table td:nth-child(6),
#dashSnapshot table td:nth-child(8),
#dashSnapshot table td:nth-child(16){text-align:left;}
#dashSnapshot table td:nth-child(17),
#dashSnapshot table td:nth-child(18){
  font-size:.50rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}
#dashSnapshot table{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */border-collapse:collapse;font-size:.69rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
#dashSnapshot table td{padding:var(--table-cell-py) var(--table-cell-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */vertical-align:middle;white-space:nowrap;line-height:var(--table-line-height); /* ปรับ ความสูง ได้จากบรรทัดนี้ */}

/* Pivot summary table */
.pivot-wrap{overflow-x:hidden;background:linear-gradient(90deg,#ffffff,#fcfcfc); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */margin-bottom:22px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.pivot-wrap table{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */table-layout:fixed;border-collapse:collapse;}
.pivot-wrap th{background:#1a73e8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */padding:var(--table-head-py) var(--table-head-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */text-align:center;border:1px solid rgba(255,255,255,.3); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */font-size:.48rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--table-compact-line-height); /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.pivot-wrap th.region-head{background:#0d47a1; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.55rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.pivot-wrap th.subcon-col{background:#e8edf5; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:left;font-size:.55rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.pivot-wrap td{padding:var(--table-cell-py) var(--table-cell-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1px solid #e0e8f0; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;overflow:hidden;line-height:var(--table-compact-line-height); /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.pivot-wrap td.subcon-col{text-align:left;font-weight:700;overflow:hidden;text-overflow:ellipsis;font-size:.6rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.pivot-wrap tr:nth-child(odd) td{background:#f7f9ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.pivot-wrap tr:nth-child(even) td{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.pivot-wrap .total-row td{background:#e8f0fe!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-weight:800;color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.pivot-wrap .total-row td.subcon-col{color:var(--danger); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.pivot-value{font-weight:700;color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.pivot-zero{color:#ccc; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* Progress */
.progress-bar{background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */height:7px; /* ปรับความสูงได้จากบรรทัดนี้ */min-width:70px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
/* Pagination bar */
.dash-pager{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:10px 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */flex-wrap:wrap;}
.dash-pager-info{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */flex:1;min-width:120px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.dash-pager button{padding:4px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:7px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */cursor:pointer;transition:background .15s,border-color .15s;min-width:32px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.dash-pager button:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.dash-pager button.active{background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */font-weight:700;pointer-events:none;}
.dash-pager button:disabled{opacity:.4;cursor:not-allowed;}
.dash-pager-goto{display:flex;align-items:center;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.dash-pager-goto input{width:48px; /* ปรับความกว้างได้จากบรรทัดนี้ */padding:3px 6px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */text-align:center;}
.dash-pager-goto input:focus{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */outline:none;}
.progress-fill{background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */height:7px; /* ปรับความสูงได้จากบรรทัดนี้ */transition:width .5s;}
.progress-fill.g{background:var(--success); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.progress-fill.y{background:var(--warning); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.progress-fill.r{background:var(--danger); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}

/* Dashboard table cell helpers (moved out of app.js inline styles) */
.dash-cell-sub{color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.dash-cell-strong{font-weight:600;}
.dash-cell-primary-strong{font-weight:700;color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.dash-text-success{color:var(--success); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.dash-text-cyan{color:#0ea5e9; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.dash-text-muted{color:#9ca3af; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.dash-cell-nowrap{white-space:nowrap;}
.dash-cell-datetime-sm{font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.0; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.dash-cell-updatedby-sm{font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.0; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.dash-progress-inline{display:flex;align-items:center;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.dash-progress-bar-compact{min-width:40px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.dash-onsite-remark-cell{
  white-space:normal;
  max-width:300px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  word-wrap:break-word;
  color:var(--danger); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-size:.70rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  text-align:left;
  line-height:1.3; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
.btn-edit-row-danger{color:var(--danger); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* Status */
/* Modal */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  z-index:1000;justify-content:center;align-items:center;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:16px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:30px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  width:min(640px,96vw); /* ปรับความกว้างได้จากบรรทัดนี้ */max-height:92vh; /* ปรับ ความสูง ได้จากบรรทัดนี้ */overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.25); /* ปรับสีเงาได้จากบรรทัดนี้ */
  animation:popIn .2s ease;
}
@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
/* ── Confirm Dialog ── */
.confirm-modal{max-width:400px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */padding:28px 28px 22px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */text-align:center;}
.confirm-modal .confirm-icon{font-size:2.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.confirm-modal .confirm-msg{font-size:.88rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.55; /* ปรับ ความสูง ได้จากบรรทัดนี้ */margin-bottom:18px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */white-space:pre-wrap;}
.confirm-modal .confirm-btns{display:flex;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */justify-content:center;}
.confirm-modal .confirm-btns .btn{min-width:100px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.modal h2{font-size:1.1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */margin-bottom:22px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.form-group{display:flex;flex-direction:column;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.form-group.full{grid-column:1/-1;}
.form-group label{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.form-group input,.form-group select,.form-group textarea{
  padding:9px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  font-size:.88rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */outline:none;
}
.form-group textarea{resize:vertical;min-height:64px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.modal-actions{display:flex;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */justify-content:flex-end;margin-top:22px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding-top:16px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-top:1px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-topได้จากบรรทัดนี้ */}

/* Plan popups (Add/Edit): compact, aligned fields, distinct color themes */
.plan-modal{padding:18px 20px 16px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-top:4px solid #3b82f6; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.plan-modal .form-grid{gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.plan-modal .form-group{gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.plan-modal .form-group label{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;text-transform:none;letter-spacing:.15px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */color:#4b5563; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.plan-modal .form-group input,
.plan-modal .form-group select,
.plan-modal .form-group textarea{padding:6px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:7px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.25; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.plan-modal .form-group textarea{min-height:44px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-height:90px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */resize:vertical;}
.plan-modal .form-group input[readonly],
.plan-modal .form-group textarea[readonly]{background:#f7f9fc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#6b7280; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:#dbe4ef; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.plan-modal .modal-actions{margin-top:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding-top:10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.plan-modal-add{border-top-color:#16a34a; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:linear-gradient(180deg,#f6fff8 0%,#ffffff 22%); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.plan-modal-add h2{color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.plan-modal-edit{border-top-color:#f59e0b; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:linear-gradient(180deg,#fffaf0 0%,#ffffff 22%); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.plan-modal-edit h2{color:#b45309; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* Snapshot modal used by dashboard exports and previews */
#snapshotModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */z-index:2000;justify-content:center;align-items:center;}
#snapshotModal.open{display:flex;}
#snapshotModal .snap-box{
  background:#fff;border-radius:14px;padding:0;
  width:min(96vw,1100px);max-height:92vh;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,.3);
}
/* ── Header bar ── */
.snap-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.snap-zoom-ctrl{display:flex;align-items:center;gap:4px;}
.snap-zoom-ctrl .btn{min-width:28px;height:26px;padding:0 6px;font-size:.85rem;font-weight:700;}
.snap-zoom-lbl{min-width:38px;text-align:center;font-size:.78rem;color:var(--sub);}
/* ── Scrollable image area ── */
.snap-img-wrap{flex:1;min-height:0;overflow:auto;background:#f0f4f8;padding:12px;display:flex;justify-content:flex-start;align-items:flex-start;}
#snapshotImg{display:block;height:auto;border-radius:6px;cursor:zoom-in;-webkit-user-select:none;user-select:none;transition:width .12s ease;}
/* ── Always-visible bottom bar ── */
#snapshotModal .snap-actions{flex-shrink:0;padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:#fff;}
#snapshotModal .snap-actions{display:flex;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */justify-content:flex-end;margin-top:14px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}

/* Team Status edit modal: cleaner grouped form layout */
#modalTeamStatusEdit .modal{max-width:860px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#tsStatusDynamicFields{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
#tsStatusDynamicFields .form-group{
  gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  padding:8px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:1px solid #e6edf8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#fbfdff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
#tsStatusDynamicFields .form-group label{text-transform:none;letter-spacing:.15px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
#tsStatusDynamicFields .form-group input,
#tsStatusDynamicFields .form-group textarea{padding:7px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
#tsStatusDynamicFields .form-group.full textarea{min-height:120px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-height:240px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */resize:vertical;font-family:var(--font-family-base);font-size:.84rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;line-height:1.5; /* ปรับ ความสูง ได้จากบรรทัดนี้ */color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tsStatusDynamicFields .form-group.full{grid-column:1/-1;}
#tsStatusDynamicFields .ts-form-section{
  grid-column:1/-1;
  font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:800;
  color:#1e3a5f; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  letter-spacing:.2px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */
  text-transform:none;
  padding:6px 2px 2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border-bottom:1px dashed #cdd9ee; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
}
.ts-hint-panel{
  margin-top:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border:1px solid #cfe0ff; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#f7faff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
.ts-hint-head{display:flex;align-items:center;justify-content:space-between;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-hint-title{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ts-hint-meta{font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ts-hint-text{
  width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */
  min-height:140px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  max-height:260px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  resize:vertical;
  border:1px solid #d5e3ff; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  padding:8px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  font-size:.84rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  line-height:1.5; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-family:var(--font-family-base);
  font-weight:600;
}
.ts-hint-actions{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-top:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-hint-note{font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tsRemarkInput{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */min-height:140px!important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-height:260px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */resize:vertical;border:1px solid #d5e3ff; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */padding:8px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.84rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.5; /* ปรับ ความสูง ได้จากบรรทัดนี้ */color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-family:var(--font-family-base);font-weight:600;}
@media(max-width:900px){
  #tsStatusDynamicFields{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  #tsStatusDynamicFields{grid-template-columns:1fr;}
}

/* Dashboard section headers: single row, compact, arrow always right */
#tab-dashboard .sec-header{align-items:center;flex-wrap:nowrap;gap:8px;padding:5px 12px;}
#tab-dashboard .sec-header h3{flex:1;min-width:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#tab-dashboard .sec-header-right{width:auto;flex-shrink:0;flex-wrap:nowrap;justify-content:flex-end;}

/* Row edit button */
.btn-edit-row{
  background:none; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:none;cursor:pointer;font-size:.85rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  padding:4px 6px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */opacity:.55;transition:opacity .15s,background .15s;
  line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */min-width:28px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */min-height:28px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-edit-row:hover{opacity:1;background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
@media(max-width:900px){
  .btn-edit-row{min-width:36px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */min-height:36px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:5px 7px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */opacity:.75;}
}



/* === modules/team-summary.css === */
/* ==================== TEAM SUMMARY SYSTEM ==================== */
/* Mini index:
  - [PUBLIC SURFACE] .ts-kpi-*, .ts-region-*, .ts-table*, .ts-sc-*, .btn-ts-*, .ts-site-*
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/

.ts-kpi-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:14px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
}
@media(max-width:1200px){.ts-kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px) {.ts-kpi-grid{grid-template-columns:1fr 1fr;}}
.ts-kpi-card{
  background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:14px 14px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  box-shadow:0 2px 10px rgba(0,0,0,.09); /* ปรับสีเงาได้จากบรรทัดนี้ */
  display:flex;align-items:flex-start;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  border-top:4px solid transparent; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;
}
.ts-kpi-card:hover{transform:translateY(-2px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */box-shadow:0 6px 18px rgba(0,0,0,.14); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.ts-kpi-card::after{
  content:'';position:absolute;right:-12px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */bottom:-12px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
  width:56px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:50px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:50%; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:rgba(0,0,0,.04); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
.tsk1{border-top-color:#1a73e8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */} .tsk2{border-top-color:#00b8d4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.tsk3{border-top-color:#34a853; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */} .tsk4{border-top-color:#ea4335; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.tsk5{border-top-color:#fbbc04; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */} .tsk6{border-top-color:#ab47bc; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.ts-kpi-icon{font-size:1.5rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */flex-shrink:0;margin-top:2px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.ts-kpi-body{min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */flex:1;}
.ts-kpi-label{font-size:.64rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */margin-bottom:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-kpi-value{font-size:1.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:-1px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.ts-kpi-sub{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-top:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-kpi-dual-row{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-top:5px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-kpi-bar{background:#f0f4f8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */height:5px; /* ปรับความสูงได้จากบรรทัดนี้ */margin-top:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */overflow:hidden;}
.ts-kpi-fill{background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */height:5px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */transition:width .6s ease;}
.ts-kpi-fill-g{background:var(--success); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ts-kpi-fill-r{background:var(--danger); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ts-kpi-fill-y{background:var(--warning); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}

.ts-region-kpi{display:flex;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:16px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}

/* Team Summary: clickable "team count mismatch" warning banner */
.ts-count-mismatch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;
  margin:0 0 14px;padding:9px 14px;border-radius:10px;font-size:.82rem;font-weight:600;
  color:#92400e;background:#fff7ed;border:1px solid #fdba74;
  box-shadow:0 1px 4px rgba(234,88,12,.12);transition:background .15s,box-shadow .15s;}
.ts-count-mismatch:hover{background:#ffedd5;box-shadow:0 2px 8px rgba(234,88,12,.20);}
.ts-count-mismatch .ts-mismatch-ico{font-size:1rem;line-height:1;}
.ts-count-mismatch .ts-mismatch-text{flex:1;min-width:180px;}
.ts-count-mismatch .ts-mismatch-text b{color:#b45309;}
.ts-count-mismatch .ts-mismatch-cta{font-weight:800;color:#c2410c;white-space:nowrap;}

.ts-toolbar{display:flex;align-items:center;gap:16px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:8px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 2px 8px rgba(0,0,0,.12); /* ปรับสีเงาได้จากบรรทัดนี้ */
  position:sticky;top:108px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:90;border-bottom:2px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-bottomได้จากบรรทัดนี้ */}
.ts-toolbar label{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */margin-right:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-hint{font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-left:auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-date-wrap{display:flex;align-items:center;}
.ts-region-block{margin-bottom:12px;}
.ts-region-header{
  display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:4px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:linear-gradient(135deg,#1a73e8,#0d47a1); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}
.ts-region-header h3{font-size:.9rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;letter-spacing:.3px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.ts-region-header{flex-wrap:wrap;}
.ts-region-header .ts-region-meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:3px;flex:1;min-width:0;}
.ts-region-header .ts-region-count{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */background:rgba(255,255,255,.2); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:2px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.ts-region-header .ts-region-types,
.ts-region-header .ts-region-subplan{font-size:.7rem;color:rgba(255,255,255,.92);line-height:1.35;word-break:break-word;}
.ts-region-header .ts-region-types{font-weight:600;}
.ts-team-type{display:inline-block;font-size:.68rem;font-weight:700;color:#374151;background:#eef2f7;border:1px solid #d7dee8;border-radius:6px;padding:1px 7px;white-space:nowrap;}
.ts-noplan-chip{display:inline-block;font-size:.74rem;font-weight:600;color:#7c2d12;background:#fff1e6;border:1px solid #fcd9b6;border-radius:6px;padding:2px 8px;white-space:nowrap;}
.ts-mismatch-site{display:inline-block;font-size:.72rem;font-weight:600;color:#1e3a8a;background:#eef2ff;border:1px solid #c7d2fe;border-radius:5px;padding:1px 6px;margin:1px 2px;white-space:nowrap;}
@keyframes ts-row-flash{0%,100%{background:transparent}25%{background:#fef08a}75%{background:#fef9c3}}
.ts-row-highlight td{animation:ts-row-flash 2s ease-in-out;}
.ts-jump-chip{display:inline-block;background:#fef3c7;color:#92400e;padding:1px 6px;border-radius:4px;font-size:.8rem;cursor:pointer;font-weight:600;}
.ts-jump-chip:hover{text-decoration:underline;background:#fde68a;}

/* Dashboard: duplicate-plan warning chip in the Site Visits header */
.dash-dup-warn{display:inline-block;margin-left:8px;cursor:pointer;font-size:.74rem;font-weight:700;
  color:#92400e;background:#fff7ed;border:1px solid #fdba74;border-radius:20px;padding:2px 11px;
  vertical-align:middle;transition:background .15s,box-shadow .15s;}
.dash-dup-warn:hover{background:#ffedd5;box-shadow:0 2px 8px rgba(234,88,12,.2);}
.ts-table-wrap{background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */overflow-x:auto;overflow-y:visible;}
.ts-table{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */border-collapse:collapse;table-layout:fixed;font-size:.72rem;line-height:1.0;}
.ts-table thead th{text-align:left;white-space:nowrap;padding:4px 6px !important;}
.ts-table td{vertical-align:top;white-space:normal;word-break:break-word;padding:3px 4px;}
/* Keep jump-highlight clearly visible above default/hover table cell styles */
/* Exclude colspan (merged) cells from highlight */
.ts-table tbody tr.ts-highlight-row td:not([colspan]),
.ts-table tbody tr.ts-highlight-row:hover td:not([colspan]){
  background:#ffd54f!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:#1f2937!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-weight:700;
  box-shadow:none!important; /* ปรับสีเงาได้จากบรรทัดนี้ */
}
.ts-table tbody tr.ts-highlight-row td.ts-sc-num,
.ts-table tbody tr.ts-highlight-row td.ts-sc-cell,
.ts-table tbody tr.ts-highlight-row:hover td.ts-sc-num,
.ts-table tbody tr.ts-highlight-row:hover td.ts-sc-cell{
  background:#fff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:var(--sub)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-weight:400!important;
  box-shadow:none!important; /* ปรับสีเงาได้จากบรรทัดนี้ */
}
.ts-table tbody tr.ts-highlight-fade td:not([colspan]):not(.ts-sc-num):not(.ts-sc-cell),
.ts-table tbody tr.ts-highlight-fade:hover td:not([colspan]):not(.ts-sc-num):not(.ts-sc-cell){background:#fff3c4!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */transition:background .85s ease;}
/* Running number cell: always single-line, fixed width */
.ts-table td.ts-rn,.ts-table th.ts-rn{width:36px; /* ปรับความกว้างได้จากบรรทัดนี้ */min-width:36px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:36px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;overflow:hidden;}

.ts-sc-group > tr:first-child > td{border-top:2px solid #4a8cd4!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.ts-sc-group > tr:last-child  > td{border-bottom:2px solid #4a8cd4!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.ts-sc-group > tr > td.ts-sc-num{border-left:3px solid #4a8cd4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.ts-sc-cell{vertical-align:top;border-right:1px solid #dde5f0!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */padding:3px 4px;}
.ts-sc-cell-blank{border-right:1px solid #dde5f0!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-top:none!important;}
.btn-ts-edit{background:none; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:none;cursor:pointer;font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:4px 6px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */color:#bbb; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:color .15s,background .15s;border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */min-width:28px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */min-height:28px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */display:inline-flex;align-items:center;justify-content:center;}
.btn-ts-edit:hover{color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.btn-ts-del{background:none; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:none;cursor:pointer;font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:4px 6px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */color:#bbb; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:color .15s,background .15s;border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */min-width:28px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */min-height:28px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */display:inline-flex;align-items:center;justify-content:center;}
.btn-ts-del:hover{color:var(--danger); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#fce8e6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ts-site-row{padding:2px 0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-bottom:1px dashed #eee; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */line-height:1.6; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.ts-site-row:last-child{border-bottom:none;}
.ts-site-list{display:flex;flex-wrap:wrap;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.ts-site-tag{display:inline-flex;align-items:center;gap:3px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:2px 7px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;white-space:nowrap;}
.ts-onsite{background:#e6f4ea; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#188038; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ts-pending{background:#f0f0f0; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#666; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ts-no-plan{color:#ccc; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-style:italic;font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.ts-team-count{display:inline-block;background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1a73e8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:1px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;}

/* === modules/team-status.css === */
/* ==================== TEAM STATUS SYSTEM ==================== */
/* Mini index:
  - [PUBLIC SURFACE] .team-status-table, .ts-subcon-summary-bar, .ts-region-chip
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/

#tab-teamStatus .team-status-table{
  --ts-col-rn:30px; /* ปรับ ขนาด/ระยะจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ts-col-region:60px; /* ปรับ ขนาด/ระยะจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ts-col-subcon:75px; /* ปรับ ขนาด/ระยะจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ts-col-center:58px; /* ปรับ ขนาด/ระยะจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ts-col-compact:58px; /* ปรับ ขนาด/ระยะจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ts-col-default:100px; /* ปรับ ขนาด/ระยะจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ts-col-actions:42px; /* ปรับ ขนาด/ระยะจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --table-cell-py:2px; /* ปรับ ระยะห่างจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --table-head-py:7px; /* ปรับ ระยะห่างจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --table-line-height:1.1;

  width:max-content; /* ปรับความกว้างได้จากบรรทัดนี้ */
  min-width:100%; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  border-collapse:collapse;
  table-layout:fixed;
  box-shadow:var(--surface-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */
}

/* Team Status: keep only horizontal scrolling in table container */
#tab-teamStatus .table-wrap{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  max-height:none !important;
}
#tab-teamStatus .team-status-table col.ts-rn{width:var(--ts-col-rn); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-region{width:var(--ts-col-region); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-subcon{width:var(--ts-col-subcon); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-center{width:var(--ts-col-center); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-gap{width:var(--ts-col-center); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-compact{width:var(--ts-col-compact); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-upd-date{width:var(--table-col-upd-date); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-upd-by{width:var(--table-col-upd-by); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-recruit-update{width:var(--table-col-wide); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-remark{width:var(--table-col-remark); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-default{width:var(--ts-col-default); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table col.ts-actions{width:var(--ts-col-actions); /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table th{
  text-align:center;
  position:sticky;top:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:3;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  vertical-align:middle;
}
#tab-teamStatus .team-status-table th.ts-rn,
#tab-teamStatus .team-status-table td.ts-rn{min-width:var(--ts-col-rn); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--ts-col-rn); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;}
#tab-teamStatus .team-status-table th.ts-region,
#tab-teamStatus .team-status-table td.ts-region{min-width:var(--ts-col-region); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;font-weight:400;border-right:2px solid #b8cce8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */white-space:nowrap;}
#tab-teamStatus .team-status-table th.ts-subcon,
#tab-teamStatus .team-status-table td.ts-subcon{min-width:var(--ts-col-subcon); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;font-weight:600;color:#1e3a5f; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table th.ts-center,
#tab-teamStatus .team-status-table td.ts-center{min-width:var(--ts-col-center); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--ts-col-center); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;font-weight:600;}
#tab-teamStatus .team-status-table th.ts-gap,
#tab-teamStatus .team-status-table td.ts-gap{min-width:var(--ts-col-center); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--ts-col-center); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;font-weight:700;color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table th.ts-compact,
#tab-teamStatus .team-status-table td.ts-compact{min-width:var(--ts-col-compact); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--ts-col-compact); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;}
#tab-teamStatus .team-status-table th.ts-upd-date,
#tab-teamStatus .team-status-table td.ts-upd-date{min-width:var(--table-col-upd-date); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#5f6368; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;}
#tab-teamStatus .team-status-table th.ts-upd-by,
#tab-teamStatus .team-status-table td.ts-upd-by{min-width:var(--table-col-upd-by); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--table-col-upd-by); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#5f6368; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table th.ts-recruit-update,
#tab-teamStatus .team-status-table td.ts-recruit-update{min-width:var(--table-col-wide); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--table-col-wide); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */white-space:pre-wrap;word-break:break-word;text-align:left;color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */padding:var(--table-cell-py) var(--table-cell-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-style:italic;line-height:1.25 !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table th.ts-remark,
#tab-teamStatus .team-status-table td.ts-remark{min-width:var(--table-col-remark); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--table-col-remark); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */white-space:pre-wrap;word-break:break-word;text-align:left;color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */padding:var(--table-cell-py) var(--table-cell-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-style:italic;line-height:1.25 !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table th.ts-default,
#tab-teamStatus .team-status-table td.ts-default{min-width:var(--ts-col-default); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-table th.ts-actions,
#tab-teamStatus .team-status-table td.ts-actions{min-width:var(--ts-col-actions); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:var(--ts-col-actions); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}

/* Header-only wrap: allow at most 2 lines for readability */
#tab-teamStatus .team-status-table thead th{white-space:normal !important;}
#tab-teamStatus .team-status-table .ts-head-label{
  display:block;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  line-height:.92; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  max-height:none; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  margin:0 auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  text-align:center;
}
/* Total row: yellow-gold + dark text — maximum contrast, always readable */
#tab-teamStatus .team-status-total-row td{font-weight:700;font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */background:#f1eccc!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1e3a5f!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1px solid #b8cce8!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */padding:var(--table-cell-py) var(--table-cell-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */line-height:var(--table-line-height) !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */letter-spacing:.02em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
#tab-teamStatus .team-status-total-row td.ts-gap{color:#c62828!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* Subcon summary bar (inline below header) */
.ts-subcon-summary-bar{
  background:linear-gradient(90deg,#e8f0fe,#f0f6ff); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  border:0.25px solid #90b8f8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:7px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */display:flex;flex-wrap:wrap;gap:8px 18px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  align-items:center;font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}
.ts-subcon-summary-bar .ts-ssb-label{font-weight:700;color:var(--subcon-c1,#1a56db); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-right:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ts-subcon-summary-bar .ts-ssb-item{display:flex;flex-direction:column;align-items:center;}
.ts-subcon-summary-bar .ts-ssb-item b{font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:var(--subcon-c1,#1a56db); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.ts-subcon-summary-bar .ts-ssb-item span{font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#5f6368; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* === modules/team-efficiency-subcon-plan.css === */
/* ==================== 05) TEAM EFFICIENCY + SUBCON PLAN SYSTEM ==================== */
/* Mini index:
  - [PUBLIC SURFACE] .te-*, .sp-* (filters, kpis, views, tables, charts)
  - [INTERNAL OVERRIDE] #teView* overrides, frozen-header patches, summary-table force styles
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/
/* ── Team Efficiency Tab ──────────────────────────────────── */
.te-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-head-title{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.te-filters{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.te-sticky-header{flex-shrink:0;background:var(--bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */padding:10px 0 6px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-bottom:2px solid var(--border); /* ปรับค่าขนาด/ระยะของ border-bottomได้จากบรรทัดนี้ */margin-bottom:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
/* #tab-teamEff becomes a flex column when active; .te-body-scroll is the inner scroll area */
#tab-teamEff.active{display:block!important;height:auto; /* ปรับความสูงได้จากบรรทัดนี้ */overflow:visible;}
.te-body-scroll{overflow:visible;padding:12px 0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
/* Let normal main scroll handle efficiency tab as usual */
.main-scroll.te-active{overflow-y:auto;padding-bottom:8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.te-filters label{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */display:flex;align-items:center;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */font-family:var(--font-family-base);}
.te-vtabs{display:flex;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */background:#f0f4f8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.te-vtabs::-webkit-scrollbar{display:none;}
.te-vtab{flex-shrink:0;white-space:nowrap;padding:7px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:none;border-radius:7px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.83rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;cursor:pointer;background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:all .15s;}
/* .te-vtab base already defined above */
.te-vtab.active{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.12); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-vtab:hover:not(.active){background:rgba(255,255,255,.6); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-vtab-action{background:transparent; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */padding:6px 13px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-vtab-action:hover{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.te-vtab-action.active-on{background:#eef4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */font-weight:700;}
.te-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:16px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
@media(max-width:900px){
  .te-kpis{grid-template-columns:repeat(3,1fr);}
  .te-sticky-header{padding:8px 0 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
  .te-header{gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
  .te-header h3{font-size:.85rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .te-filters{flex-wrap:wrap;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .te-filters input[type="date"]{width:110px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
  .te-vtabs{padding:3px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
  .te-vtab{padding:6px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .te-vtab-action{padding:5px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
}
@media(max-width:520px){
  .te-kpis{grid-template-columns:1fr 1fr;}
  .te-header{flex-direction:column;align-items:flex-start;}
  .te-head-title{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */justify-content:space-between;}
  .te-filters{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */justify-content:flex-start;}
  .te-filters input[type="date"]{width:105px; /* ปรับความกว้างได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
}
.sp-header{display:flex;align-items:center;justify-content:space-between;gap:12px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-head-title{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.sp-filters{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.sp-filters label{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */display:flex;align-items:center;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */font-family:var(--font-family-base);}
.sp-filters select{min-width:108px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.sp-quick-nav{display:inline-flex;align-items:center;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.sp-quick-btn{height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */min-width:28px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */padding:0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.sp-quick-btn:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#eef4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-logic-open{height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */white-space:nowrap;}
.sp-summary-bar{padding:10px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:linear-gradient(135deg,#eef6ff 0%,#f4f8ff 100%); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1.5px solid #b6d4f7; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-summary-meta{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#5a7a9e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;margin-bottom:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */letter-spacing:.01em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.sp-kpi-grid{display:flex;flex-wrap:wrap;gap:7px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.sp-kpi-card{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #d5e6f7; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:9px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:7px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */min-width:82px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:center;flex:1 1 80px; /* ปรับค่าขนาด/ระยะของ flexได้จากบรรทัดนี้ */box-shadow:0 1px 4px rgba(60,100,200,.07); /* ปรับสีเงาได้จากบรรทัดนี้ */transition:box-shadow .15s;}
.sp-kpi-card:hover{box-shadow:0 3px 10px rgba(30,80,180,.13); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.sp-kpi-card .kpi-v{font-size:1.22rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:#1e3a6e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.15; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.sp-kpi-card .kpi-l{font-size:.64rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#6b7280; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-top:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-weight:600;text-transform:uppercase;letter-spacing:.04em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-hi{border-color:#3b82f6; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#eff6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-hi .kpi-v{color:#1d4ed8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-survey .kpi-v{color:#047857; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-survey{border-color:#a7f3d0; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f0fdf9; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-ti .kpi-v{color:#b45309; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-ti{border-color:#fde68a; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#fffbeb; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-ih .kpi-v{color:#6d28d9; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-ih{border-color:#ddd6fe; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f5f3ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-os .kpi-v{color:#0369a1; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-kpi-card.kpi-os{border-color:#bae6fd; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f0f9ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-kpi-idle{padding:4px 0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-insight-box{margin:-2px 0 10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:#fffdf5; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #f2df9e; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */color:#6a5b20; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.5; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.sp-insight-head{display:flex;align-items:center;justify-content:space-between;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-insight-title{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:#8a6f16; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-transform:uppercase;letter-spacing:.04em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-insight-line + .sp-insight-line{margin-top:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-insight-line strong{color:#614f12; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-subtabs{display:flex;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin:0 0 10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-subtab-btn{appearance:none;border:1.5px solid #cfe0ff; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:#f8fbff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#3763a8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:6px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;cursor:pointer;transition:.15s;}
.sp-subtab-btn:hover{background:#eef4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#9bc2ff; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.sp-subtab-btn.active{background:#1d4ed8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#1d4ed8; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */box-shadow:0 4px 12px rgba(29,78,216,.18); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.sp-pane{display:none;}
.sp-pane.active{display:block;}
.sp-filter-strip{display:none;align-items:center;justify-content:space-between;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;background:#eef4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #cfe0ff; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:6px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */margin-bottom:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-filter-strip-text{font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#1d4ed8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;}
.sp-cell-filter{background:none; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:none;cursor:pointer;color:inherit; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font:inherit;padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */text-decoration:none;line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.sp-cell-filter:hover{text-decoration:underline;color:#1a56db; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-cell-filter.active{color:#0d47a1; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-decoration:underline;font-weight:700;}
.sp-zero{color:#9ca3af; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:500;}
.sp-nonzero{font-weight:700;color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-avg{font-weight:700;color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-table-note{margin-top:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-table-wrap{overflow-x:auto;border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 2px 10px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table{table-layout:fixed;min-width:1080px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-period{width:170px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-region{width:72px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-subcon{width:140px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-days{width:80px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-planned{width:102px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-teamdays{width:92px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-avg{width:96px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-stableteam{width:124px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-stablepct{width:96px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-team{width:138px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-type{width:84px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-load{width:96px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-cover{width:92px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
/* By Team table – narrower column overrides */
#tab-subconPlan .sp-team-table col.c-period{width:130px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .sp-team-table col.c-region{width:68px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .sp-team-table col.c-subcon{width:108px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .sp-team-table col.c-type{width:74px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .sp-team-table col.c-days{width:72px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .sp-team-table col.c-teamdays{width:78px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .sp-team-table col.c-load{width:84px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .sp-team-table col.c-cover{width:84px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
/* Freeze / Hide-top control buttons */
.sp-team-ctrl{display:flex;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */align-items:center;flex-wrap:wrap;}
.sp-team-ctrl-btn{padding:3px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border,#d1d5db); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub,#6b7280); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;cursor:pointer;transition:.15s;line-height:1.5; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.sp-team-ctrl-btn:hover{border-color:var(--primary,#1976d2); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary,#1976d2); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-team-ctrl-btn.active{background:#1976d2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#1976d2; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* Freeze: sticky header – wrap needs bounded height */
#spTeamTableWrap.sp-frozen{max-height:480px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */overflow-y:auto;}
.sp-team-table.sp-frozen thead th{position:sticky;top:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:4;background:transparent!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
/* Freeze: sticky left cols – Period (col1), Region (col2), Subcon (col3) */
.sp-team-table.sp-frozen th:nth-child(1),
.sp-team-table.sp-frozen td:nth-child(1){position:sticky;left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:3;}
.sp-team-table.sp-frozen th:nth-child(2),
.sp-team-table.sp-frozen td:nth-child(2){position:sticky;left:130px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:3;}
.sp-team-table.sp-frozen th:nth-child(3),
.sp-team-table.sp-frozen td:nth-child(3){position:sticky;left:198px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:3;box-shadow:2px 0 5px rgba(0,0,0,.09); /* ปรับสีเงาได้จากบรรทัดนี้ */}
/* Corner: frozen header + frozen col needs highest z-index */
.sp-team-table.sp-frozen thead th:nth-child(1),
.sp-team-table.sp-frozen thead th:nth-child(2),
.sp-team-table.sp-frozen thead th:nth-child(3){z-index:5;}
/* Sticky cell backgrounds matching even/odd/hover/selected */
.sp-team-table.sp-frozen td:nth-child(1),
.sp-team-table.sp-frozen td:nth-child(2),
.sp-team-table.sp-frozen td:nth-child(3){background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-team-table.sp-frozen tbody tr:nth-child(odd) td:nth-child(1),
.sp-team-table.sp-frozen tbody tr:nth-child(odd) td:nth-child(2),
.sp-team-table.sp-frozen tbody tr:nth-child(odd) td:nth-child(3){background:#f9fbff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-team-table.sp-frozen tbody tr:hover td:nth-child(1),
.sp-team-table.sp-frozen tbody tr:hover td:nth-child(2),
.sp-team-table.sp-frozen tbody tr:hover td:nth-child(3){background:#edf4ff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-team-table.sp-frozen tbody tr.sp-row-selected td:nth-child(1),
.sp-team-table.sp-frozen tbody tr.sp-row-selected td:nth-child(2),
.sp-team-table.sp-frozen tbody tr.sp-row-selected td:nth-child(3){background:#dbeafe!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table col.c-survey,
#tab-subconPlan .te-table col.c-ti,
#tab-subconPlan .te-table col.c-inhouse{width:80px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
#tab-subconPlan .te-table th{text-align:center;white-space:normal;}
#tab-subconPlan .te-table th:first-child,
#tab-subconPlan .te-table th:nth-child(3),
#tab-subconPlan .te-table th:nth-child(8){text-align:left;}
#tab-teamEff .te-table thead tr:first-child th{
  font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}
#tab-teamEff .te-table thead tr:nth-child(2) th{
  font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}
#tab-teamEff .te-table thead .te-th-sub span{
  display:block;
  margin-top:2px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
#tab-subconPlan .te-table td{vertical-align:middle;text-align:center;white-space:nowrap;}
#tab-subconPlan .te-table td:first-child,
#tab-subconPlan .te-table td:nth-child(3),
#tab-subconPlan .te-table td:nth-child(8){text-align:left;}
#tab-subconPlan .sp-team-table th:nth-child(4),
#tab-subconPlan .sp-team-table th:nth-child(5),
#tab-subconPlan .sp-team-table td:nth-child(4),
#tab-subconPlan .sp-team-table td:nth-child(5){text-align:left;}
#tab-subconPlan .te-table tbody tr:hover td{cursor:default;}
#tab-subconPlan .te-table tbody tr.sp-row-clickable td{cursor:pointer;}
#tab-subconPlan .te-table tbody tr.sp-row-selected td{background:#dbeafe!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */box-shadow:inset 0 0 0 1px #60a5fa; /* ปรับสีเงาได้จากบรรทัดนี้ */}
.sp-note{margin-top:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-pager{display:flex;align-items:center;justify-content:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-top:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:4px 0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.sp-pager-btn{padding:4px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */cursor:pointer;font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;}
.sp-pager-btn:disabled{color:#bbb; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:default;border-color:#e5e7eb; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f9fafb; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sp-pager-info{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-logic-modal{width:min(860px,96vw); /* ปรับความกว้างได้จากบรรทัดนี้ */max-height:90vh; /* ปรับ ความสูง ได้จากบรรทัดนี้ */overflow:auto;padding:18px 20px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-top:4px solid #1d4ed8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.sp-logic-head{display:flex;align-items:center;justify-content:space-between;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-logic-title{margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */color:#1d4ed8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;}
.sp-logic-lang{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.sp-logic-lang-btn{padding:4px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1px solid #c7d2fe; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#f8faff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;}
.sp-logic-lang-btn.active{background:#1d4ed8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#1d4ed8; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-logic-content{font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#1f2937; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.5; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.sp-logic-content h4{margin:10px 0 6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.86rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#0f3b77; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sp-logic-content ul{margin:0 0 8px 18px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.sp-logic-content li{margin:3px 0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sp-logic-warn{background:#fff7ed; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #fed7aa; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:8px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */color:#9a3412; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
@media(max-width:900px){
  .sp-header{gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
  .sp-header h3{font-size:.85rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
  .sp-filters{gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
  .sp-filters input[type="date"],
  .sp-filters select{width:110px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
}
@media(max-width:520px){
  .sp-header{flex-direction:column;align-items:flex-start;}
  .sp-head-title{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */justify-content:space-between;}
  .sp-filters{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */justify-content:flex-start;}
  .sp-filters input[type="date"],
  .sp-filters select{width:105px; /* ปรับความกว้างได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
}
/* Summary section headers */
.te-section-hdr{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin:16px 0 8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:8px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:linear-gradient(90deg,#f0f4f8,transparent); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-left:4px solid var(--primary); /* ปรับค่าขนาด/ระยะของ border-leftได้จากบรรทัดนี้ */border-radius:0 8px 8px 0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */flex-wrap:wrap;}
.te-section-hdr h4{font-size:.84rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-section-hdr .te-sec-note{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* Aging cells */
.te-aging-ok{background:#dcfce7!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
.te-aging-warn{background:#fef9c3!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#92400e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
.te-aging-bad{background:#fed7aa!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c2410c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
.te-aging-over{background:#fee2e2!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
/* Clearing aging cells - match Install Aging theme (neutral base, green/yellow/orange/red for aged) */
.te-clear-cell{font-weight:700;text-align:center;}
.te-clear-cell-ok{background:#dcfce7!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
.te-clear-cell-warn{background:#fef9c3!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#92400e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
.te-clear-cell-bad{background:#fed7aa!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c2410c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
.te-clear-cell-over{background:#fee2e2!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-align:center;}
/* Chart grid */
.te-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin:8px 0 16px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-chart-card{background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:16px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 2px 8px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-chart-card h4{font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */text-align:center;}
.te-chart-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */flex-wrap:wrap;}
.te-chart-card-head h4{margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */text-align:left;}
.te-chart-card-head .te-export-btn{height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;cursor:pointer;}
.te-chart-card-head .te-export-btn:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-chart-canvas-wrap{position:relative;height:220px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.te-region-sum-wrap{overflow-x:auto;border:1px solid #dbe3ee; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-region-sum-table{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */min-width:860px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */border-collapse:collapse;font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-region-sum-table th,.te-region-sum-table td{border:1px solid #dbe3ee; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */padding:var(--table-cell-py) var(--table-cell-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */text-align:center;white-space:nowrap;}
.te-region-sum-table th{font-weight:700;}
.te-region-sum-table td:first-child,.te-region-sum-table th:first-child{text-align:left;font-weight:700;}
.te-region-sum-table tbody tr:nth-child(even) td{background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-region-sum-table .te-neg{color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.te-region-sum-table .te-pos{color:#0f766e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.te-region-sum-table tfoot td{background:#eff6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-weight:700;color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-top:2px solid #93c5fd; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-region-sum-table .te-rs-wk-grp{font-weight:700;border-left:2px solid #7dd3fc; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-right:2px solid #7dd3fc; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-region-sum-table th.te-rs-wk-plan{border-left:2px solid #7dd3fc; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-region-sum-table td.te-rs-wk-plan{border-left:2px solid #bbf7d0; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-region-sum-table th.te-rs-wk-plan,
.te-region-sum-table th.te-rs-wk-actual{white-space:normal;min-width:88px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */padding:var(--table-head-py) var(--table-head-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:var(--table-line-height); /* ปรับ ความสูง ได้จากบรรทัดนี้ */text-align:center!important;vertical-align:middle;}
.te-region-sum-table td .te-rs-num-link.te-rs-mth-total{font-weight:800;color:#0369a1; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-rs-wk-date{display:block;font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.02; /* ปรับ ความสูง ได้จากบรรทัดนี้ */margin-top:1px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */text-align:center;}
.te-rs-num-link{cursor:pointer;color:#1a73e8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-decoration:none;font-weight:inherit;border-radius:4px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:1px 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */transition:background .12s,color .12s;}
.te-rs-num-link:hover{background:#dbeafe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-decoration:underline;}
.te-rs-num-link.zero{color:#94a3b8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:default;pointer-events:none;}
.te-rs-month-bar{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;padding:7px 10px 6px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-bottom:1px solid #e2e8f0; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.73rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-rs-month-bar>.te-rs-month-label{color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;white-space:nowrap;}
.te-rs-month-tag{display:inline-block;padding:2px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:99px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1.5px solid #cbd5e1; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;font-size:.71rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;user-select:none;transition:all .12s;}
.te-rs-month-tag:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-rs-month-tag.active{background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-rs-month-tag.disabled{background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#e2e8f0; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#94a3b8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:default;pointer-events:none;}
.te-rs-drill-banner{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:7px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:#eff6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1.5px solid #93c5fd; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#1e40af; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin-bottom:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */flex-wrap:wrap;}
.te-rs-drill-banner strong{flex:1;}
.te-rs-drill-banner button{padding:2px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:none;border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fee2e2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;cursor:pointer;font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-site-os-done td{color:#15803d!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;}
.te-site-os-done td .te-stage{background:#dcfce7!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#15803d!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-region-sum-empty{padding:16px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */text-align:center;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-timeline-logic{display:flex;flex-direction:column;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */border:1px solid #dbeafe; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#f8fbff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#334155; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */line-height:1.35; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.te-timeline-logic strong{color:#1e40af; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-timeline-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.te-timeline-canvas-wrap{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #e2e8f0; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:8px 8px 2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.te-timeline-canvas-wrap h5{margin:0 0 6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:#475569; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:center;}
.te-timeline-table td.te-tl-zero{color:#94a3b8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:400;}
.te-tl-filter-state{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin:0 0 6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:5px 7px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1px solid #dbe3ee; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-tl-filter-state.active{background:#eff6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#bfdbfe; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.te-tl-filter-state-label{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:#475569; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-tl-filter-pill{display:inline-flex;align-items:center;padding:1px 7px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1px solid #cbd5e1; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.67rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;line-height:1.2; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.te-tl-filter-pill.active{border-color:#60a5fa; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#dbeafe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-tl-filter-clear{margin-left:auto; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */height:22px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1px solid #cbd5e1; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#334155; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.67rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;cursor:pointer;}
.te-tl-filter-clear:hover:not(:disabled){border-color:#94a3b8; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-tl-filter-clear:disabled{opacity:.45;cursor:default;}
.te-tl-table-title{font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:#334155; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */margin:0 0 6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:0 2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.te-tl-mode-row{display:flex;align-items:center;justify-content:space-between;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-tl-mode-row h5{margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.74rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:#475569; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:left;}
.te-tl-mode-toggle{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid #dbe3ee; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:3px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.te-tl-mode-toggle label{display:flex;align-items:center;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#334155; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;cursor:pointer;user-select:none;}
.te-tl-mode-toggle input[type=radio]{accent-color:#1d4ed8; /* ปรับสีองค์ประกอบแบบเลือกได้ (accent)ได้จากบรรทัดนี้ */cursor:pointer;}
@media(max-width:900px){.te-chart-grid{grid-template-columns:1fr;}.te-chart-canvas-wrap{height:180px; /* ปรับความสูงได้จากบรรทัดนี้ */}}
@media(max-width:900px){.te-timeline-chart-grid{grid-template-columns:1fr;}}
.te-kpi{border-radius:11px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:12px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.10); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-kpi::after{content:'';position:absolute;right:-12px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */bottom:-12px; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */width:60px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:60px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:50%; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:rgba(255,255,255,.12); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-kpi.k1{background:linear-gradient(135deg,#1a73e8,#0d47a1); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-kpi.k2{background:linear-gradient(135deg,#16a34a,#166534); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-kpi.k3{background:linear-gradient(135deg,#ef6c00,#bf360c); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-kpi.k4{background:linear-gradient(135deg,#7b1fa2,#4a148c); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-kpi.k5{background:linear-gradient(135deg,#1565c0,#0d47a1); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-kpi.k6{background:linear-gradient(135deg,#0f766e,#115e59); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-kpi-label{font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.85;margin-bottom:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-weight:500;}
.te-kpi-value{font-size:1.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.te-kpi-sub{font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.75;margin-top:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
/* clickable KPI */
.te-kpi-click{cursor:pointer;transition:transform .15s,box-shadow .15s,outline .1s;}
.te-kpi-click:hover{transform:translateY(-2px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */box-shadow:0 6px 18px rgba(0,0,0,.22); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-kpi-click:active{opacity:.9;}
.te-kpi-active{outline:3px solid rgba(255,255,255,.7); /* ปรับสีเส้นโฟกัส/เส้นขอบนอกได้จากบรรทัดนี้ */outline-offset:-3px; /* ปรับระยะห่างเส้นโฟกัสได้จากบรรทัดนี้ */}
/* value + pct row */
.te-kpi-value-row{display:flex;align-items:baseline;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.te-kpi-pct{font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;opacity:.9;}
/* GAP row */
.te-kpi-gap-row{display:flex;align-items:center;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.85;margin-top:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-kpi-gap{background:rgba(255,255,255,.28); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-weight:900;font-size:1.05rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.4; /* ปรับ ความสูง ได้จากบรรทัดนี้ */cursor:pointer;transition:background .15s;text-shadow:0 1px 3px rgba(0,0,0,.2); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-kpi-gap:hover{background:rgba(255,255,255,.48); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
/* clickable table cells — underline only on hover */
.te-cell-link{cursor:pointer;text-decoration:none;}
.te-cell-link:hover{text-decoration:underline;}
/* badge วงกลมจำนวนทีม (Team Name คอลัมน์เดียว) */
.te-team-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;border-radius:9px; /* วงกลม/แคปซูล */background:#2563eb; /* ปรับสีพื้นหลัง badge ได้จากบรรทัดนี้ */color:#fff;font-size:.62rem;font-weight:700;line-height:1;vertical-align:middle;cursor:help;}
/* ช่องค้นหา site ใน header + popup ผลค้นหา */
.te-search-wrap{position:relative;flex:1;max-width:360px;min-width:180px;margin:0 12px;}
.te-search-wrap input{width:100%;padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:.82rem;outline:none;}
.te-search-wrap input:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15);}
.te-search-popup{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16);max-height:340px;overflow:auto;}
.te-search-head{padding:6px 10px;font-size:.7rem;font-weight:700;color:var(--sub);background:#f8fafc;border-bottom:1px solid #eef2f7;position:sticky;top:0;}
.te-search-item{padding:7px 10px;cursor:pointer;font-size:.8rem;border-bottom:1px solid #f1f5f9;display:flex;gap:8px;align-items:center;}
.te-search-item:hover{background:#eff6ff;}
.te-search-item b{color:#1a73e8;white-space:nowrap;}
.te-search-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.te-search-meta{margin-left:auto;color:var(--sub);font-size:.7rem;white-space:nowrap;}
.te-search-empty{padding:10px;color:var(--sub);font-size:.78rem;text-align:center;}
/* ตัวกรองค่าเป๊ะจากการคลิกเซลล์ duration */
.te-dur-active{display:inline-block;min-width:18px;padding:1px 8px;background:#2563eb;color:#fff!important;border-radius:10px;font-weight:700;line-height:1.5;text-align:center;}
.te-dur-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:12px;background:#dbeafe;color:#1e40af;font-size:.72rem;font-weight:700;cursor:pointer;}
.te-dur-chip:hover{background:#bfdbfe;}
/* per-region breakdown */
.te-kpi-region-row{margin-top:5px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */display:flex;flex-wrap:wrap;gap:3px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.te-table-wrap{overflow-x:auto;border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 2px 10px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-table-wrap.te-frozen{overflow-y:auto;overflow-x:auto;border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */}
/* border-collapse:collapse breaks position:sticky — switch to separate when frozen */
.te-table-wrap.te-frozen .te-table{border-collapse:separate!important;border-spacing:0!important;}
/* Simulate collapsed borders with separate mode */
.te-table-wrap.te-frozen .te-table td{border-right:1px solid #e0e8f4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-bottom:1px solid #e0e8f4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-top:0;border-left:0;}
.te-table-wrap.te-frozen .te-table td:first-child{border-left:1px solid #e0e8f4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-table-wrap.te-frozen .te-table tbody tr:first-child td{border-top:1px solid #e0e8f4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
/* sticky positioning on th */
.te-table-wrap.te-frozen thead th{position:sticky;z-index:10;}
.te-kpis.te-kpis-hidden{display:none!important;}
.te-vtab-tool-active{background:#fff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--primary)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.18)!important; /* ปรับสีเงาได้จากบรรทัดนี้ */border-color:var(--primary)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.te-table{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */border-collapse:collapse;font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-table th{text-align:center;font-weight:700;white-space:nowrap;}
.te-table th:first-child{text-align:left;}
.te-rs-table tbody tr:first-child td{border-top:1px solid #c5cfdd!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-rs-table td:first-child{text-align:left!important;}
.te-rs-table td:nth-child(n+2){text-align:center!important;}
.te-rs-table .te-rs-total-row td{font-weight:700!important;}
.te-rs-table .te-rs-total-row .te-rs-num-link{font-weight:700!important;}
#teViewSummary .te-table .te-th-group-done,
#teViewSummary .te-table .te-th-group-aging,
#teViewSummary .te-table .te-th-group-clearing{border-right:3px solid rgba(255,255,255,.6)!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-left:3px solid rgba(255,255,255,.4)!important; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-table td{border:1px solid #e0e8f4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */vertical-align:middle;text-align:center;white-space:nowrap;}
.te-table td:first-child,.te-table td:nth-child(2){text-align:left;}
.te-table tbody tr:nth-child(odd) td{background:#f8faff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-table tbody tr:nth-child(even) td{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-table tbody tr:hover td{background:#dbeafe!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */cursor:pointer;}
/* Site Detail: pin Site Code column while scrolling horizontally */
#teViewSites .te-table th:first-child,
#teViewSites .te-table td:first-child{
  position:sticky;
  left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
}
#teViewSites .te-table th:first-child{
  z-index:16;
  background:#1558c0!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
#teViewSites .te-table td:first-child{
  z-index:6;
  box-shadow:2px 0 0 #d9e3f2; /* ปรับสีเงาได้จากบรรทัดนี้ */
}
#teViewSites .te-table tbody tr:nth-child(odd) td:first-child{background:#f8faff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#teViewSites .te-table tbody tr:nth-child(even) td:first-child{background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
#teViewSites .te-table tbody tr:hover td:first-child{background:#dbeafe!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.dash-remark-cell{color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;text-align:left;white-space:normal!important;word-break:break-word;overflow-wrap:anywhere;line-height:1.35; /* ปรับ ความสูง ได้จากบรรทัดนี้ */max-width:220px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.dash-curr-date{display:block;margin-top:2px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* Summary unified table – grouped header */
.te-th-group-done{background:#166534!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:center!important;font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */letter-spacing:.02em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */border-left:3px solid #22c55e; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-right:2px solid rgba(255,255,255,.3); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-th-group-aging{background:#9a3412!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:center!important;font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */letter-spacing:.02em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */border-left:3px solid #f97316; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-right:2px solid rgba(255,255,255,.3); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-th-group-clearing{background:#1e3a8a!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:center!important;font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */letter-spacing:.02em; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */border-left:3px solid #60a5fa; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-right:2px solid rgba(255,255,255,.3); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-th-sub{background:#eaf1ff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#334155!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.68rem!important; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600!important;padding:var(--table-head-py) var(--table-head-px)!important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */white-space:normal!important;line-height:var(--table-line-height)!important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */text-align:center!important;border-left:1px solid #d4deee; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
/* Force override any lingering clearing sub-header styles */
th.te-th-sub[title*="Clearing"],
th.te-th-sub[title*="On Service done"]{background:#eaf1ff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#334155!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
/* Chart slicers – dropdown style */
.te-chart-slicers{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;background:#f8fafc; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:8px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */margin-bottom:14px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-slicer-dd-label{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;color:#64748b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;}
.te-slicer-dd-label{font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;}
.te-slicer-dd{position:relative;}
.te-slicer-btn{display:inline-flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:5px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid #cbd5e1; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;color:#374151; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;white-space:nowrap;line-height:1.3; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.te-slicer-btn{display:inline-flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:0 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;white-space:nowrap;box-sizing:border-box;font-family:var(--font-family-base);}
.te-slicer-btn:hover,.te-slicer-btn.open{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-slicer-btn.active{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-slicer-caret{font-size:.6rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */opacity:.6;}
.te-slicer-panel{display:none;position:absolute;top:calc(100% + 5px); /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:300;min-width:170px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-height:220px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */overflow-y:auto;background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */box-shadow:0 6px 20px rgba(0,0,0,.12); /* ปรับสีเงาได้จากบรรทัดนี้ */padding:4px 0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.te-slicer-panel.open{display:block;}
.te-slicer-item{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:6px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */cursor:pointer;font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:#374151; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */user-select:none;}
.te-slicer-item{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:6px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */cursor:pointer;font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */user-select:none;}
.te-slicer-item:hover{background:#f0f4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-slicer-item input[type=checkbox]{cursor:pointer;accent-color:var(--primary);width:14px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:14px; /* ปรับความสูงได้จากบรรทัดนี้ */flex-shrink:0;}
.te-slicer-divider{border:none;border-top:1px solid #e5e7eb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */margin:3px 0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-slicer-actions{display:flex;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:6px 10px 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-bottom:1px solid #e5e7eb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.te-slicer-actions button{border:1px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:2px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:500;cursor:pointer;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-slicer-actions button:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-days-fast{background:#dcfce7!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:500;}
.te-days-mid{background:#fef9c3!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#92400e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:500;}
.te-days-slow{background:#fee2e2!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:500;}
.te-days-null{color:#9ca3af; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-stage{display:inline-block;padding:2px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;white-space:nowrap;}
.te-stage.install{background:#dbeafe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1e40af; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-stage.onservice{background:#fff7ed; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c2410c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1px solid #fed7aa; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-stage.clearing{background:#dcfce7; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-stage.completed{background:#14532d; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-stage.other{background:#f3f4f6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#6b7280; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-prog-wrap{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */min-width:80px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.te-prog-bar{flex:1;height:6px; /* ปรับความสูงได้จากบรรทัดนี้ */background:#e5e7eb; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:3px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */overflow:hidden;}
.te-prog-fill{height:100%; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:3px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */}
.te-site-filters{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:#f8faff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1px solid #dbeafe; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-site-filters select,.te-site-filters input[type="text"]{padding:6px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-site-filters select,.te-site-filters input[type="text"]{padding:0 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-family:var(--font-family-base);box-sizing:border-box;background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:border-color .2s;}
.te-site-filters input[type="text"]{min-width:160px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.te-hot-filter{min-width:auto; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */padding:0 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-weight:700;}
.te-hot-filter.active{background:#fff7ed; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#fb923c; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#c2410c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */box-shadow:0 0 0 2px rgba(251,146,60,.15) inset; /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-hot-filter-low.active{background:#eff6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#60a5fa; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#1d4ed8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */box-shadow:0 0 0 2px rgba(96,165,250,.15) inset; /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-view-sticky{position:sticky;top:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */z-index:30;box-shadow:0 8px 18px rgba(15,23,42,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-summary-bar{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:7px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:#f0f4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1px solid #c7d7f8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.te-sum-pill{display:inline-flex;align-items:center;gap:3px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:3px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-weight:700;white-space:nowrap;}
.te-sum-pill.total {background:#e0e7ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#3730a3; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-sum-pill.done  {background:#dcfce7; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-sum-pill.gap   {background:#fff7ed; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c2410c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-sum-pill.rate  {background:#f0fdf4; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#166534; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-sum-pill.days  {background:#fafafa; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#374151; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1px solid #e5e7eb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-sum-pill.green {background:#dcfce7; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#15803d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-sum-pill.yellow{background:#fef9c3; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#92400e; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-sum-pill.red   {background:#fee2e2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#b91c1c; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.te-sum-pill-btn{cursor:pointer;transition:filter .12s,outline .1s;}
.te-sum-pill-btn:hover{filter:brightness(.92);}
.te-sum-pill-btn.te-sum-active{outline:2.5px solid currentColor; /* ปรับสีเส้นโฟกัส/เส้นขอบนอกได้จากบรรทัดนี้ */outline-offset:1px; /* ปรับระยะห่างเส้นโฟกัสได้จากบรรทัดนี้ */box-shadow:0 0 0 3px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.te-sum-sep{color:#cbd5e1; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.85rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
#teSummarySummaryBar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
#teSummarySummaryBar::-webkit-scrollbar{height:7px; /* ปรับความสูงได้จากบรรทัดนี้ */}
@media (max-width: 768px){
  #teSummarySummaryBar{flex-wrap:wrap;overflow-x:visible;}
}
/* Team KPI tab */
.te-team-filters{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:12px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:#f8faff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1px solid #dbeafe; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */}
.te-rate-bar-wrap{display:flex;align-items:center;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */min-width:90px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.te-rate-bar{flex:1;height:7px; /* ปรับความสูงได้จากบรรทัดนี้ */background:#e5e7eb; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:4px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */overflow:hidden;}
.te-rate-fill{height:100%; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:4px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:linear-gradient(90deg,#22c55e,#16a34a); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-rate-fill.slow{background:linear-gradient(90deg,#f59e0b,#d97706); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-rate-fill.bad{background:linear-gradient(90deg,#f87171,#dc2626); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.te-team-name{font-weight:700;color:#1e293b; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;}
.te-team-name:hover{text-decoration:underline;color:#1a73e8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* ── Section toggle headers ────────────────────────── */
.sec-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:linear-gradient(90deg,#e8f0fe,#f0f4f8); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */cursor:pointer;user-select:none;
  border:1px solid #d0dcf0; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
}
.sec-header:hover{background:linear-gradient(90deg,#d8e8ff,#e8eef8); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.sec-header h3{font-size:.88rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sec-header-right{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.sec-toggle-icon{font-size:.85rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:transform .2s;}
.sec-toggle-icon.collapsed{transform:rotate(-90deg);}
.sec-body{transition:max-height .35s ease,opacity .2s;max-height:999999px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */opacity:1;overflow:visible;}
.sec-body.collapsed{overflow:hidden;max-height:0 !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */opacity:0;pointer-events:none;margin:0; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}

/* Export button */
.btn-export{
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1.5px solid #34a853; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */color:#34a853; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  padding:5px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */white-space:nowrap;
  transition:all .15s;
}
.btn-export:hover{background:#34a853; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.admin-only{transition:opacity .2s;}
/* Member overlay on editable modals */
.member-readonly input,.member-readonly select,.member-readonly textarea{
  pointer-events:none;background:#f5f5f5!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}



/* === modules/shared-auth.css === */
/* ==================== 06) SHARED COMPONENTS + AUTH UI ==================== */
/* Mini index:
  - [PUBLIC SURFACE] .login-*, .ms-*, .team-link*, .hot-btn*, .import-*
  - [INTERNAL OVERRIDE] .member-readonly*, utility highlight helpers
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/
/* ── Login Screen ─────────────────────────────────────── */
#loginScreen{
  display:none;position:fixed;inset:0;z-index:9999;
  background:linear-gradient(135deg,#060e1c 0%,#0a1628 35%,#1a4a8a 70%,#1e6bb5 100%); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  justify-content:center;align-items:center;
}
#loginScreen.show{display:flex;}
.login-box{
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:40px 44px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  width:min(420px,94vw); /* ปรับความกว้างได้จากบรรทัดนี้ */box-shadow:0 20px 60px rgba(0,0,0,.3); /* ปรับสีเงาได้จากบรรทัดนี้ */
  animation:popIn .25s ease;
}
.login-logo{font-size:2.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */text-align:center;margin-bottom:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.login-title{font-size:1.5rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;text-align:center;background:linear-gradient(#0a1628,#1a4a8a); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.login-sub{font-size:.9rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */text-align:center;background:linear-gradient(#0a1628,#1a4a8a); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:28px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.login-field{margin-bottom:18px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.login-field label{display:block;font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */margin-bottom:5px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.login-field input{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */padding:16px 18px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:24px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:1.2rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */transition:border-color .2s;}
.login-field input:focus{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */outline:none;box-shadow:0 0 0 3px rgba(26,74,138,.14); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.login-btn{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */padding:13px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */background:linear-gradient(135deg,#0a1628,#1a4a8a); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:none;border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:1rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;cursor:pointer;transition:opacity .2s;margin-top:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.login-btn:hover{opacity:.9;}
.login-btn:disabled{opacity:.55;cursor:not-allowed;}
.login-a2hs-btn{
  width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */padding:10px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */margin-top:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1a4a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1.5px solid #90bbeb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  font-size:.9rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;cursor:pointer;transition:all .15s;
}
.login-a2hs-btn:hover{border-color:#1a4a8a; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#e8f2fd; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.login-a2hs-note{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-align:center;margin-top:8px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */line-height:1.35; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}
.login-error{background:#fce8e6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1px solid #f5c6c4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:10px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.84rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */margin-bottom:14px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */display:none;}
.login-error.show{display:block;}

/* ── Multi-select: specific dropdown overrides (global base in components/multi-dropdown.css) ── */
#teDropRemark{min-width:320px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:480px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
#dashDropEhsStatus{min-width:200px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:340px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:left;}
#dashDropEhsStatus .ms-opt{font-size:.60rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:4px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */text-align:left;}
#dashDropEhsStatus .ms-opt label{font-size:.60rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */text-transform:none;text-align:left;}
#dashDropRemark,#dashDropOnSiteRemark{min-width:220px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */max-width:420px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:left;text-transform:none;}
#dashDropRemark .ms-opt,#dashDropOnSiteRemark .ms-opt{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:5px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
#dashDropRemark .ms-opt label,#dashDropOnSiteRemark .ms-opt label{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */text-transform:none;}

/* ── Team name link ───────────────────────────────────── */
.team-link{
  color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;text-decoration:none;
  border-radius:4px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  transition:background .15s,color .15s;padding:1px 3px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
}
.team-link:hover{background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */text-decoration:underline;}
/* highlight row in Team Summary after jump */
.ts-highlight-row td:not([colspan]):not(.ts-sc-num):not(.ts-sc-cell){
  background:#ffe082!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  box-shadow:none!important; /* ปรับสีเงาได้จากบรรทัดนี้ */
  transition:background .2s ease;
}
.ts-noplan-toggle{background:#fff3e0; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#e65100; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1.5px solid #ff9800; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:4px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */cursor:pointer;transition:background .2s,color .2s;}
.ts-noplan-toggle.active{background:#e65100; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:#e65100; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ts-noplan-toggle:hover{background:#ffe0b2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
/* ── Team Summary filter strip ─────────────────────────── */
.ts-filter-strip{display:flex;align-items:center;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */padding:6px 0 2px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}
.ts-filter-btn{
  padding:0 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */
  font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;cursor:pointer;background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:background .18s,color .18s,border-color .18s;
  display:inline-flex;align-items:center;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */box-sizing:border-box;
  font-family:var(--font-family-base);
}
.ts-filter-btn:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ts-filter-btn.active{background:#c62828; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:#c62828; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ts-filter-btn.active:hover{background:#b71c1c; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#b71c1c; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
/* ── Red site label (planned but not yet on-site) ──────── */
.ts-site-code-red{color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.ts-kpi-card.ts-kpi-active{outline:2.5px solid #e65100; /* ปรับสีเส้นโฟกัส/เส้นขอบนอกได้จากบรรทัดนี้ */box-shadow:0 0 0 3px #ff980033; /* ปรับสีเงาได้จากบรรทัดนี้ */}
.ts-highlight-fade td{background:#fff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */transition:background .8s ease;}
.ts-highlight-fade td:not([colspan]):not(.ts-sc-num):not(.ts-sc-cell){background:#fff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */transition:background .8s ease;}

/* ── Session countdown badge ──────────────────────────── */
/* ── Hot-date buttons ─────────────────────────────────── */
.hot-btns{display:flex;gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:nowrap;align-items:center;flex-shrink:0;}
.hot-btn{
  height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;cursor:pointer;white-space:nowrap;
  color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:all .15s;font-family:var(--font-family-base);box-sizing:border-box;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
.hot-btn:hover{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.hot-btn.active{background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

/* ── Charts 6-row ─────────────────────────────────────── */
.charts-row-2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */margin-bottom:22px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
@media(max-width:1000px){.charts-row-2{grid-template-columns:1fr;}}

/* ── Site code clickable filter chip ──────────────────── */
.site-code-link{
  cursor:pointer;color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:600;
  border-bottom:1.5px solid transparent; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */white-space:nowrap;
  transition:color .15s,border-bottom-color .15s,background .15s,box-shadow .15s;font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  display:inline-block;padding:1px 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:4px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
}
.site-code-link:hover{color:#0d47a1; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-bottom-color:currentColor; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */box-shadow:0 0 0 1px rgba(26,115,232,.25) inset; /* ปรับสีเงาได้จากบรรทัดนี้ */}

/* ── Team link in Team Summary → Dashboard ─────────────── */
.team-link-ts{
  cursor:pointer;color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;
  text-decoration:none;transition:color .15s;
}
.team-link-ts:hover{color:#0d47a1; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */text-decoration:underline;}
.team-link-plain{font-weight:700;color:inherit; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:default;}

/* ── Add Plan / Import modal ────────────────────────────── */
.import-dropzone{
  border:2px dashed var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:8px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:24px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  text-align:center;color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;transition:border-color .2s;
  background:#fafafa; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
}
.import-dropzone:hover,.import-dropzone.drag-over{border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.import-preview{max-height:180px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */overflow-y:auto;margin-top:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}



/* === modules/user-admin.css === */
/* ==================== 07) USER ADMIN SYSTEM ==================== */
/* Mini index:
  - [PUBLIC SURFACE] .ua-head, .ua-form, .ua-toolbar, .ua-table, .ua-col-*
  - [INTERNAL OVERRIDE] responsive @media tweaks for UA layout/table widths
  - [Anchor map] public/css/LINE_ANCHOR_MAP.md
*/
/* ── SuperAdmin: User Admin tab ───────────────────────── */
.ua-head{display:flex;justify-content:space-between;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ua-title{font-size:.95rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.ua-count{font-size:.8rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--primary); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.ua-head-right{display:flex;align-items:center;gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */flex-wrap:wrap;}
.ua-form{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr)); /* ปรับค่าขนาด/ระยะของ grid-template-columnsได้จากบรรทัดนี้ */gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */align-items:end;margin-bottom:10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ua-form .ua-field{display:flex;flex-direction:column;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.ua-form label{font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.ua-form input,.ua-form select{height:34px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.ua-form .ua-actions{display:flex;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */align-items:center;}
.ua-online{color:#1b5e20; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.ua-offline{color:#8a2b0f; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;}
.ua-toolbar{display:flex;gap:8px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */align-items:end;flex-wrap:wrap;margin:0 0 10px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.ua-toolbar .ua-field{display:flex;flex-direction:column;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */min-width:150px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.ua-toolbar .ua-field label{font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:700;text-transform:uppercase;letter-spacing:.4px; /* ปรับระยะห่างระหว่างตัวอักษรได้จากบรรทัดนี้ */}
.ua-toolbar input,.ua-toolbar select{height:32px; /* ปรับความสูงได้จากบรรทัดนี้ */}
.ua-inline{width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */border-radius:7px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */font-size:.78rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}
.ua-table{min-width:1320px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */table-layout:fixed;}
.ua-table th,.ua-table td{white-space:nowrap;vertical-align:middle;}
.ua-table th{text-align:center!important;}
.ua-table th:first-child{text-align:center!important;}
.ua-col-no{width:50px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-user{width:150px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-name{width:140px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-team{width:140px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-role{width:140px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-pass{width:260px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-status{width:95px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-online{width:120px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-login{width:140px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-usage{width:90px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-last{width:140px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-col-action{width:260px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
.ua-role-cell{min-width:132px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.ua-role-cell .ua-inline{min-width:118px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.ua-pass-cell .ua-inline{font-family:var(--font-family-base);letter-spacing:0;}
.ua-actions-cell{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */justify-content:flex-start;}
.ua-actions-cell .btn{flex:0 0 auto;}
@media(max-width:1100px){
  .ua-form{grid-template-columns:repeat(3,minmax(120px,1fr)); /* ปรับค่าขนาด/ระยะของ grid-template-columnsได้จากบรรทัดนี้ */}
}
@media(max-width:700px){
  .ua-form{grid-template-columns:1fr;}
  .ua-table{min-width:1280px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
  .ua-col-role{width:150px; /* ปรับความกว้างได้จากบรรทัดนี้ */}
}


/* === components/fonts.css === */
/* Global Font System: family, size, and color tokens by section */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --font-family-base:'IBM Plex Sans','Segoe UI',sans-serif;
  --font-family-heading:'IBM Plex Sans','Segoe UI',sans-serif;
  --font-family-heading-th:'IBM Plex Sans','Segoe UI',sans-serif;
  --font-family-mono:'IBM Plex Mono','Courier New',monospace;

  --font-size-base:12px; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-small:.78rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-label:.72rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-control:.78rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-table:.83rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-table-head:.7rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-chip:.78rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-heading:0.9rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-display:clamp(0.95rem,0.9rem + .22vw,1.2rem); /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-size-section:clamp(.98rem,.9rem + .3vw,1.2rem); /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  --font-weight-base:400;
  --font-weight-heading:400;
  --font-weight-display:400;
  --font-letter-spacing-heading:-0.01em; /* ปรับ ระยะห่างจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  --font-color-base:#3e4c60; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-color-muted:#daeaff; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-color-heading:#f3f5fb; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-color-link:#1d4ed8; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  --font-color-dashboard:#3d4961; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-color-team:#444d5a; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-color-eff:#344255; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --font-color-ti:#3a4d67; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
}

body{
  font-family:var(--font-family-base);
  font-size:var(--font-size-base); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:var(--font-weight-base);
  color:var(--font-color-base); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  line-height:1.5; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

input,select,textarea,button,
.btn,.tab-btn,.te-vtab,.sp-subtab-btn,.sp-team-ctrl-btn,
.btn-edit-row,.btn-ts-edit,.btn-ts-del,
.ms-btn,.ms-opt,.ms-actions button,
.badge,.chip,.sc-chip,.ts-region-chip,.te-tl-filter-badge-region,.act-badge,.ehs-badge,
.kpi-card,.sc-kpi-card,.ts-kpi-card,.sp-kpi-card,.ti-kpi-card,
.kpi-label,.kpi-value,.kpi-sub,.kpi-onsite-num,.kpi-onsite-lbl,
.sc-kpi-title,.sc-kpi-num,.sc-kpi-subcon-break,.sc-kpi-type-row,
.ts-kpi-label,.ts-kpi-value,.ts-kpi-sub,.ts-kpi-mini-chip,
.sp-summary-meta,.sp-kpi-card .kpi-v,.sp-kpi-card .kpi-l,
.te-sum-pill,.te-slicer-btn,.te-slicer-item,.te-count-badge{
  font-family:var(--font-family-base);
}

.btn,.tab-btn,.te-vtab,.sp-subtab-btn,.sp-team-ctrl-btn,
.btn-edit-row,.btn-ts-edit,.btn-ts-del,
.ms-btn,.ms-opt,.ms-actions button,
.badge,.chip,.sc-chip,.ts-region-chip,.te-tl-filter-badge-region,.act-badge,.ehs-badge,
.te-sum-pill,.te-slicer-btn,.te-slicer-item,.te-count-badge{
  font-size:var(--font-size-control); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}

label,
.dcb-group label,
.ts-toolbar label,
.te-filters label,
.sp-filters label{
  font-family:var(--font-family-base);
  font-size:var(--font-size-label); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}

header h1{
  font-family:var(--font-family-heading);
  font-size:var(--font-size-display); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:var(--font-weight-display);
  letter-spacing:var(--font-letter-spacing-heading);
  line-height:1.02; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  color:var(--font-color-heading); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

h2,h3,h4,h5,h6{
  font-family:var(--font-family-base);
  font-weight:var(--font-weight-heading);
  letter-spacing:var(--font-letter-spacing-heading);
  color:var(--font-color-heading); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

h2{
  font-size:clamp(1.2rem,1.05rem + .5vw,1.6rem); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  line-height:1.08; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}

h3{
  font-size:var(--font-size-section); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  line-height:1.12; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}

header h1,
.modal h2,
.sec-header h3,
.today-table-header h3,
.subcon-title,
.sp-logic-title,
.ts-region-header h3,
.chart-card h3,
.te-chart-card h4,
.te-section-hdr h4,
.ti-chart-grid .chart-card h3{
  font-family:var(--font-family-base);
  font-weight:var(--font-weight-display);
  letter-spacing:var(--font-letter-spacing-heading);
}

.hdr-tagline,
.login-sub,
.ts-hint,
.sp-summary-meta,
.sp-table-note,
.sp-note,
.te-sec-note,
.header-update .upd-label,
.hc-date,
.usr-sub{
  font-family:var(--font-family-base);
  color:var(--font-color-muted); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

th,td,p,li,small,span,div,input,select,textarea,button{
  font-family:var(--font-family-base);
}

a,.team-link,.site-code-link{color:var(--font-color-link); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

#tab-dashboard{color:var(--font-color-dashboard); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-teamSummary,#tab-teamStatus,#tab-subcon{color:var(--font-color-team); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-teamEff,#tab-subconPlan{color:var(--font-color-eff); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
#tab-ti,#tab-milestone{color:var(--font-color-ti); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

.table,.te-table,.ts-table,.ti-table,.te-region-sum-table,.team-status-table,.import-preview table{
  font-size:var(--font-size-table); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}

.table th,.table td,
.te-table th,.te-table td,
.ts-table th,.ts-table td,
.ti-table th,.ti-table td,
.te-region-sum-table th,.te-region-sum-table td,
.team-status-table th,.team-status-table td,
.import-preview th,.import-preview td{
  font-family:var(--font-family-base);
}

.table th,
.te-table th,
.ts-table th,
.ti-table th,
.te-region-sum-table th,
.team-status-table th,
.import-preview th{
  font-size:var(--font-size-table-head); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}

.chip,.sc-chip,.ts-region-chip,.te-tl-filter-badge-region,.act-badge,.ehs-badge{
  font-size:var(--font-size-chip); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
}

/* === Icon System: mask-image + currentColor (inherits text color) === */
.ui-ico{
  display:inline-block;
  width:14px;height:14px;
  vertical-align:-2px;
  flex:0 0 14px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.ui-ico-lg{width:16px;height:16px;vertical-align:-3px;flex-basis:16px;}

.ui-ico-save{-webkit-mask-image:url('../icons/save.svg');mask-image:url('../icons/save.svg');}
.ui-ico-edit{-webkit-mask-image:url('../icons/edit.svg');mask-image:url('../icons/edit.svg');}
.ui-ico-delete{-webkit-mask-image:url('../icons/delete.svg');mask-image:url('../icons/delete.svg');}
.ui-ico-add{-webkit-mask-image:url('../icons/add.svg');mask-image:url('../icons/add.svg');}
.ui-ico-refresh{-webkit-mask-image:url('../icons/refresh.svg');mask-image:url('../icons/refresh.svg');}
.ui-ico-import{-webkit-mask-image:url('../icons/import.svg');mask-image:url('../icons/import.svg');}
.ui-ico-export{-webkit-mask-image:url('../icons/export.svg');mask-image:url('../icons/export.svg');}
.ui-ico-search{-webkit-mask-image:url('../icons/search.svg');mask-image:url('../icons/search.svg');}
.ui-ico-clear{-webkit-mask-image:url('../icons/clear.svg');mask-image:url('../icons/clear.svg');}
.ui-ico-capture{-webkit-mask-image:url('../icons/capture.svg');mask-image:url('../icons/capture.svg');}
.ui-ico-download{-webkit-mask-image:url('../icons/download.svg');mask-image:url('../icons/download.svg');}
.ui-ico-upload{-webkit-mask-image:url('../icons/upload.svg');mask-image:url('../icons/upload.svg');}
.ui-ico-sync{-webkit-mask-image:url('../icons/sync.svg');mask-image:url('../icons/sync.svg');}
.ui-ico-logout{-webkit-mask-image:url('../icons/logout.svg');mask-image:url('../icons/logout.svg');}

/* Context colors — icon inherits text color automatically */
.btn .ui-ico,.ms-btn .ui-ico,.te-vtab .ui-ico{margin-right:6px;}
.btn-edit-row .ui-ico,.btn-ts-edit .ui-ico,.btn-ts-del .ui-ico{margin-right:0;}

/* Table row buttons: hide text, show icon only */
.btn-edit-row,.btn-ts-edit,.btn-ts-del{font-size:0!important;}
.btn-edit-row .ui-ico,.btn-ts-edit .ui-ico,.btn-ts-del .ui-ico{width:14px;height:14px;vertical-align:middle;}

/* Delete buttons: red icon */
.btn-ts-del .ui-ico-delete,[style*="color:var(--danger)"] .ui-ico-delete{background-color:var(--danger)!important;}

/* Buttons with colored/dark backgrounds: white icon */
.btn-primary .ui-ico,.btn-success .ui-ico,.btn-warn .ui-ico,.btn-danger .ui-ico,
.btn-refresh .ui-ico,.btn-logout .ui-ico,.login-btn .ui-ico{background-color:#fff;filter:none;}

/* Header icons: white */
.btn-refresh .ui-ico,.btn-logout .ui-ico{background-color:#fff;width:20px;height:20px;}


/* === components/multi-dropdown.css === */
/* Shared Multi-Select Dropdown Styles */
.ms-wrap{position:relative;display:inline-flex;align-items:center;min-width:120px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */overflow:visible !important;}

.ms-btn{
	height:30px; /* ปรับความสูงได้จากบรรทัดนี้ */
	padding:0 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
	border:0.25px solid #90bbeb; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
	border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
	background:#f0f6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
	color:#1a4a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
	font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
	font-weight:500;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
	line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
}
.ms-btn:hover,.ms-btn.open{background:#dbeafe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#1a4a8a; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#0a2952; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ms-btn:focus-visible{outline:2px solid rgba(26,74,138,.22); /* ปรับสีเส้นโฟกัส/เส้นขอบนอกได้จากบรรทัดนี้ */outline-offset:1px; /* ปรับระยะห่างเส้นโฟกัสได้จากบรรทัดนี้ */}

.ms-sel-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:12px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
	height:8px; /* ปรับความสูงได้จากบรรทัดนี้ */
	padding:0 4px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
	border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
	background:#1f65d700; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
	color:#051cefe0; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
	font-size:.6rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
	font-weight:500;
}
.ms-sel-badge-active{background:#1a4a8a; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#ffffff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

.ms-dropdown{
	display:none;
	position:absolute;
	left:0; /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
	top:calc(100% + 8px); /* ปรับตำแหน่งจัดวางได้จากบรรทัดนี้ */
	min-width:180px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
	max-width:300px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
	max-height:250px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
	overflow:auto;
	background:#f7f7f8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
	border:1px solid #d7dade; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
	border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
	box-shadow:0 10px 22px rgba(15,23,42,.14); /* ปรับสีเงาได้จากบรรทัดนี้ */
	padding:8px 0; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
	z-index:10000;
}
.ms-dropdown.open{display:block;}

.ms-opt{
	display:flex;
	align-items:center;
	gap:10px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
	padding:8px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
	border-radius:0; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
	font-size:.82rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
	color:#60656f; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
	cursor:pointer;
}
.ms-opt:hover{background:#d5f3fd; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.ms-opt input[type=checkbox]{accent-color:#0b79da; /* ปรับสีองค์ประกอบแบบเลือกได้ (accent)ได้จากบรรทัดนี้ */cursor:pointer;width:16px; /* ปรับความกว้างได้จากบรรทัดนี้ */height:12px; /* ปรับความสูงได้จากบรรทัดนี้ */flex-shrink:0;}
.ms-opt label{cursor:pointer;flex:1;font-weight:400;line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */}

.ms-opt-all{
	border-bottom:1px solid #d8dde4; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
	margin-bottom:6px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */
	padding-bottom:10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
}
.ms-opt-all label{font-weight:500;color:#5e646d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

.ms-opt-count{color:#8c95a3; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:400;}

/* Legacy action footer should no longer render; keep hidden as a safeguard. */
.ms-actions{display:none!important;}


/* === components/form-controls.css === */
/* Global Date/Select Controls (aligned with multi-select visual language) */

:root{
	--ctl-height:30px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
	--ctl-px:10px; /* ปรับ ระยะห่างจากตัวแปรนี้ ได้จากบรรทัดนี้ */
	--ctl-radius:8px; /* ปรับ ความโค้งมุมจากตัวแปรนี้ ได้จากบรรทัดนี้ */
	--ctl-border:0.25px solid #c8dff7; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
	--ctl-bg:#f5f9ff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
	--ctl-fg:#1a4a8a; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
	--ctl-hover-bg:rgba(26,74,138,0.08); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
	--ctl-hover-border:#1a4a8a; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
	--ctl-focus-ring:rgba(0,180,216,.22); /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
}

input[type="date"],
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
select:not([multiple]){
	height:var(--ctl-height); /* ปรับความสูงได้จากบรรทัดนี้ */
	padding:0 var(--ctl-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
	border:var(--ctl-border);
	border-radius:var(--ctl-radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
	background:var(--ctl-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
	color:var(--ctl-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
	font-size:.76rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
	font-weight:500;
	font-family:var(--font-family-base);
	line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
	box-sizing:border-box;
	transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}

select:not([multiple]){
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	padding-right:24px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
	background-image:
		linear-gradient(45deg,transparent 50%,#1a4a8a 50%),
		linear-gradient(135deg,#1a4a8a 50%,transparent 50%); /* ปรับค่าสีของ background-imageได้จากบรรทัดนี้ */
	background-position:
		calc(100% - 13px) calc(50% - 2px),
		calc(100% - 8px) calc(50% - 2px); /* ปรับค่าขนาด/ระยะของ background-positionได้จากบรรทัดนี้ */
	background-size:5px 5px,5px 5px; /* ปรับค่าขนาด/ระยะของ background-sizeได้จากบรรทัดนี้ */
	background-repeat:no-repeat;
}

input[type="date"]:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
select:not([multiple]):hover{
	background:var(--ctl-hover-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
	border-color:var(--ctl-hover-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
	color:var(--ctl-hover-border); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

input[type="date"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:not([multiple]):focus,
input[type="date"]:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="number"]:focus-visible,
select:not([multiple]):focus-visible{
	outline:none;
	border-color:var(--ctl-hover-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
	box-shadow:0 0 0 2px var(--ctl-focus-ring); /* ปรับสีเงาได้จากบรรทัดนี้ */
}

input[type="date"]:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
select:not([multiple]):disabled{
	opacity:.65;
	cursor:not-allowed;
	background:#f3f4f6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
	color:#94a3b8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

/* === components/tables.css === */
.tab-content{
	/* Global table controls for every tab */
	--table-cell-min-height:0px;
	--table-head-min-height:0px;
	--table-head-bg-solid:#f8f9fb;
	--table-head-bg-sub:#eef0f4;
	--table-head-sub-color:#64748b;
	--table-head-freeze-shadow:inset 0 -1px 0 rgba(102,119,136,.28);
	--table-grid-border-width:1.25px;
	--table-grid-border-color:#e2e6ed;
	--table-grid-border-strong-color:#cdd3dc;
	--table-cell-min-height:0px;
	--table-head-min-height:0px;
	--table-head-bg-solid:#f3f7fc;
	--table-head-bg-sub:#e9f0f8;
	--table-head-sub-color:#5f6f86;
	--table-head-freeze-shadow:inset 0 -1px 0 rgba(70,90,115,.22);
	--table-grid-border-width:1px;
	--table-grid-border-color:#dde6f1;
	--table-grid-border-strong-color:#c8d6e6;
}

.table-wrap,.te-region-sum-wrap,.ts-table-wrap,.ti-table-wrap,.te-table-wrap,.sp-table-wrap,.import-preview{
	border-radius:var(--table-radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */ /* ใช้มุมโค้งมาตรฐานเดียวกันทุกกล่องตาราง */
	overflow:auto; /* เปิดการเลื่อนเมื่อเนื้อหาเกินพื้นที่ */
	background:var(--card,#fff); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ /* สีพื้นหลังกล่อง พร้อม fallback */
	box-shadow:0 10px 24px rgba(15,23,42,.08),0 2px 8px rgba(15,23,42,.04); /* ปรับสีเงาได้จากบรรทัดนี้ */ /* เงาอ่อนเพื่อแยกกล่องจากพื้นหลัง */
	border:1px solid #d8e2ef;
}

.table-wrap::-webkit-scrollbar,.te-region-sum-wrap::-webkit-scrollbar,.ts-table-wrap::-webkit-scrollbar,.ti-table-wrap::-webkit-scrollbar,.te-table-wrap::-webkit-scrollbar,.sp-table-wrap::-webkit-scrollbar,.import-preview::-webkit-scrollbar{height:10px;width:10px;}
.table-wrap::-webkit-scrollbar-track,.te-region-sum-wrap::-webkit-scrollbar-track,.ts-table-wrap::-webkit-scrollbar-track,.ti-table-wrap::-webkit-scrollbar-track,.te-table-wrap::-webkit-scrollbar-track,.sp-table-wrap::-webkit-scrollbar-track,.import-preview::-webkit-scrollbar-track{background:#eef3f9;border-radius:999px;}
.table-wrap::-webkit-scrollbar-thumb,.te-region-sum-wrap::-webkit-scrollbar-thumb,.ts-table-wrap::-webkit-scrollbar-thumb,.ti-table-wrap::-webkit-scrollbar-thumb,.te-table-wrap::-webkit-scrollbar-thumb,.sp-table-wrap::-webkit-scrollbar-thumb,.import-preview::-webkit-scrollbar-thumb{background:#b8c7da;border-radius:999px;border:2px solid #eef3f9;}

.table,.te-table,.ts-table,.ti-table,.te-region-sum-table,.team-status-table,.import-preview table,#dashSnapshot table{
	width:100%; /* ปรับความกว้างได้จากบรรทัดนี้ */ /* ตารางกว้างเต็มพื้นที่คอนเทนเนอร์ */
	border-collapse:collapse; /* รวมเส้นขอบเซลล์ไม่ให้ซ้อนสองชั้น */
	font-size:var(--table-font-size); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */ /* ขนาดฟอนต์ฐานของตารางทั้งหมด */
	line-height:1.28;
}

.table th,.table td,
.te-table th,.te-table td,
.ts-table th,.ts-table td,
.ti-table th,.ti-table td,
.te-region-sum-table th,.te-region-sum-table td,
.team-status-table th,.team-status-table td,
.import-preview th,.import-preview td,
#dashSnapshot table th,#dashSnapshot table td{
	vertical-align:middle; /* จัดเนื้อหาให้อยู่กึ่งกลางแนวตั้ง */
	border:1px solid var(--table-border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */ /* เส้นขอบเซลล์มาตรฐาน */
}

.table th,
.te-table th,
.ts-table th,
.ti-table th,
.te-region-sum-table th,
.team-status-table th,
.import-preview th,
#dashSnapshot table th{
	padding:var(--table-head-py) var(--table-head-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */ /* ระยะในหัวตารางจากโทเคนกลาง */
	background:var(--table-head-bg-solid) !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ /* ใช้สีเรียบ ไม่ใช้ gradient รายเซลล์ */
	background-image:none !important;
	color:var(--table-head-color) !important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */ /* สีตัวอักษรหัวตารางจากโทเคนกลาง */
	border-color:var(--table-border-strong) !important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */ /* ขอบหัวตารางให้เด่นกว่าช่องข้อมูล */
	border-right-color:var(--table-grid-border-strong-color) !important;
	min-height:var(--table-head-min-height);
	line-height:var(--table-line-height) !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */ /* ความสูงบรรทัดหัวตาราง */
	font-weight:600; /* น้ำหนักตัวอักษรหัวตาราง */
	text-transform:none;
	letter-spacing:.01em;
	text-shadow:none; /* ปิดเงาตัวอักษรเพื่อให้อ่านง่าย */
	white-space:normal;
	vertical-align:middle;
	background-clip:padding-box;
	box-shadow:var(--table-head-freeze-shadow);
	height:auto;
}

/* Professional sticky header behavior for all non-TI tables */
.tab-content :is(.table,.te-table,.ts-table,.te-region-sum-table,.team-status-table,.ua-table,.sp-team-table,.import-preview table,#dashSnapshot table) thead th{
	position:sticky;
	top:0;
	z-index:11;
}

.table thead tr + tr th,
.te-table thead tr + tr th,
.ts-table thead tr + tr th,
.ti-table thead tr + tr th,
.te-region-sum-table thead tr + tr th,
.team-status-table thead tr + tr th,
.import-preview thead tr + tr th,
#dashSnapshot table thead tr + tr th{
	background:var(--table-head-bg-sub) !important;
	background-image:none !important;
	color:var(--table-head-sub-color) !important;
}

.table thead th[rowspan],
.te-table thead th[rowspan],
.ts-table thead th[rowspan],
.ti-table thead th[rowspan],
.te-region-sum-table thead th[rowspan],
.team-status-table thead th[rowspan],
.import-preview thead th[rowspan],
#dashSnapshot table thead th[rowspan]{
	background:var(--table-head-bg-solid) !important;
	background-image:none !important;
	color:var(--table-head-color) !important;
}

.table thead th:last-child,
.te-table thead th:last-child,
.ts-table thead th:last-child,
.ti-table thead th:last-child,
.te-region-sum-table thead th:last-child,
.team-status-table thead th:last-child,
.import-preview thead th:last-child,
#dashSnapshot table thead th:last-child{
	border-right-color:var(--table-border-strong) !important; /* รักษาเส้นขอบด้านขวาสุดให้ต่อเนื่อง */
}

.table td,
.te-table td,
.ts-table td,
.ti-table td,
.te-region-sum-table td,
.team-status-table td,
.import-preview td,
#dashSnapshot table td{
	padding:var(--table-cell-py) var(--table-cell-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */ /* ระยะในช่องข้อมูลจากโทเคนกลาง */
	line-height:var(--table-line-height) !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */ /* ความสูงบรรทัดช่องข้อมูล */
	min-height:var(--table-cell-min-height);
	height:auto;
	transition:background-color .16s ease,color .16s ease;
}

/* Dashboard table uses many narrow columns; tighten horizontal padding so text is less likely to be truncated. */
#tab-dashboard #dashSnapshot table th,
#tab-dashboard #dashSnapshot table td{
	padding-left:4px !important;
	padding-right:4px !important;
}

.table tbody tr:nth-child(odd) td,
.te-table tbody tr:nth-child(odd) td,
.ts-table tbody tr:nth-child(odd) td,
.ti-table tbody tr:nth-child(odd) td,
.te-region-sum-table tbody tr:nth-child(odd) td,
.team-status-table tbody tr:nth-child(odd) td,
.import-preview tbody tr:nth-child(odd) td,
#dashSnapshot table tbody tr:nth-child(odd) td{
	background:var(--table-row-odd) !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ /* สลับสีพื้นหลังแถวคี่ */
}

.table tbody tr:nth-child(even) td,
.te-table tbody tr:nth-child(even) td,
.ts-table tbody tr:nth-child(even) td,
.ti-table tbody tr:nth-child(even) td,
.te-region-sum-table tbody tr:nth-child(even) td,
.team-status-table tbody tr:nth-child(even) td,
.import-preview tbody tr:nth-child(even) td,
#dashSnapshot table tbody tr:nth-child(even) td{
	background:var(--table-row-even) !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ /* สลับสีพื้นหลังแถวคู่ */
}

.table tbody tr:hover td,
.te-table tbody tr:hover td,
.ts-table tbody tr:hover td,
.ti-table tbody tr:hover td,
.te-region-sum-table tbody tr:hover td,
.team-status-table tbody tr:hover td,
.import-preview tbody tr:hover td,
#dashSnapshot table tbody tr:hover td{
	background:var(--table-row-hover) !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ /* สีไฮไลต์เมื่อชี้เมาส์ที่แถว */
}

.ti-table{
	font-size:var(--ti-table-font-size); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */ /* ขนาดฟอนต์เฉพาะของตาราง TI */
}

.ti-table th,.ti-table td{
	padding:var(--ti-table-cell-py) var(--ti-table-cell-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */ /* ระยะในช่องข้อมูล TI */
	height:var(--ti-table-cell-height); /* ปรับความสูงได้จากบรรทัดนี้ */ /* ความสูงแถวแบบคงที่ของ TI */
	line-height:var(--ti-table-cell-line-height) !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */ /* ความสูงบรรทัด TI สำหรับช่องเล็ก */
	border:none; /* ล้างขอบก่อนกำหนดกริด TI ใหม่ */
	border-right:1px solid var(--ti-grid-border); /* ปรับค่าขนาด/ระยะของ border-rightได้จากบรรทัดนี้ */ /* เส้นกริดแนวตั้งของ TI */
	border-bottom:1px solid var(--ti-grid-border); /* ปรับค่าขนาด/ระยะของ border-bottomได้จากบรรทัดนี้ */ /* เส้นกริดแนวนอนของ TI */
}

.ti-table th{
	padding:var(--ti-table-head-py) var(--ti-table-head-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */ /* ระยะในหัวตาราง TI */
	height:var(--ti-table-head-height); /* ปรับความสูงได้จากบรรทัดนี้ */ /* ความสูงหัวตาราง TI แบบคงที่ */
	font-size:var(--ti-table-head-font-size); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */ /* ขนาดตัวอักษรหัวตาราง TI */
	line-height:var(--ti-table-head-line-height) !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */ /* ความสูงบรรทัดหัวตาราง TI */
	background:var(--ti-head-bg) !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ /* สีพื้นหลังหัวตาราง TI */
	color:var(--ti-head-fg) !important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */ /* สีตัวอักษรหัวตาราง TI - เพิ่ม !important เพื่อไม่ให้ถูกทับ */
	font-weight:700; /* ตัวหนังสือหนาเพื่อให้อ่านง่าย */
	letter-spacing:0.02em; /* เว้นระยะตัวอักษรเพื่อให้อ่านชัด */
	border-right:1px solid rgba(255,255,255,0.15); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */ /* เส้นแบ่งคอลัมน์หัวตาราง TI - ใช้สีขาวจางเพื่อไม่รบกวนการอ่าน */
	border-bottom:2px solid #38bdf8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */ /* เส้นเน้นด้านล่างหัวตาราง TI */
}

.te-timeline-table th,.te-timeline-table td{padding:var(--table-cell-py) var(--table-cell-px) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */line-height:var(--table-compact-line-height) !important; /* ปรับ ความสูง ได้จากบรรทัดนี้ */} /* ใช้โทเคนระยะช่องข้อมูลจากตารางกลาง */
.te-timeline-table th{padding-top:var(--table-head-py) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */padding-bottom:var(--table-head-py) !important; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */} /* ใช้โทเคนระยะหัวตารางจากตารางกลาง */
.te-timeline-table td.te-tl-zero{color:#94a3b8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-weight:400;} /* ทำค่า 0 ให้จางลงเพื่อไม่แย่งสายตา */

/* Global table border override across all tabs */
.tab-content :is(
	table,
	.table,
	.te-table,
	.ts-table,
	.ti-table,
	.sp-team-table,
	.ua-table,
	.te-rs-table,
	.te-region-sum-table,
	.team-status-table,
	.import-preview table,
	#dashSnapshot table
) :is(th,td){
	border-width:var(--table-grid-border-width) !important;
	border-style:solid !important;
	border-color:var(--table-grid-border-color) !important;
}

.tab-content :is(
	table,
	.table,
	.te-table,
	.ts-table,
	.ti-table,
	.sp-team-table,
	.ua-table,
	.te-rs-table,
	.te-region-sum-table,
	.team-status-table,
	.import-preview table,
	#dashSnapshot table
) th{
	border-color:var(--table-grid-border-strong-color) !important;
}


/* === components/badges.css === */
/* Shared Badge + Semantic Color Mapping */
:root{
  --badge-fg:#4b5563; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --badge-bg:#f8f5f0; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --badge-bd:rgba(148,163,184,.22); /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --badge-shadow:none;
  --badge-shadow-hover:none;

  /* Font weight tokens by badge group */
  --badge-fw-base:500;
  --badge-fw-region:400;
  --badge-fw-kpi-gap:700;
  --badge-fw-subcon-dup:600;
  --badge-fw-ts-kpi-mini:700;
  --badge-fw-activity:700;
  --badge-fw-ehs:700;
  --badge-fw-status:700;
  --badge-fw-view-only:700;
  --badge-fw-summary-mini:700;

  /* Region badge shared size standard (compact = dashboard size) */
  --region-chip-min-width:0;
  --region-chip-height:18px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  --region-chip-px:9px; /* ปรับ ระยะห่างจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-chip-radius:12px; /* ปรับ ความโค้งมุมจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-chip-border-width:.25px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  --region-chip-font-size:.65rem; /* ปรับ ขนาดตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-chip-letter-spacing:normal;

  --region-bkk-fg:#f7f8fa; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-bkk-bg:#1d4ed8; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-bkk-bd:#dce7fb; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-cr-fg:#f7f8fa; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-cr-bg:#b4232c; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-cr-bd:#f3dddd; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-er-fg:#f7f8fa; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-er-bg:#14a004; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-er-bd:#dceee2; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-ner-fg:#f7f8fa; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-ner-bg:#dc9703dd; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-ner-bd:#f4e6cd; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-sr-fg:#f7f8fa; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-sr-bg:#6d28d9; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-sr-bd:#e6def6; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-nr-fg:#f7f8fa; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-nr-bg:#0aacc2; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-nr-bd:#d8eee9; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --region-default-fg:#5b6472; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-default-bg:#f5f6f8; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */ --region-default-bd:#e2e6ec; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  --subcon-c1:#295ebd;
  --subcon-c2:#9a5b0a;
  --subcon-c3:#1f6a47;
  --subcon-c4:#6d44cc;
  --subcon-c5:#a83857;
  --subcon-c6:#166f68;
  --progress-low:var(--danger);
  --progress-mid:#f59e0b; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --progress-high:var(--success);
}

.badge,.chip,.sc-chip,.kpi-gap-badge,.subcon-dup-badge,.act-badge,.ehs-badge,.te-tl-filter-badge,.ts-kpi-mini-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */
  min-width:0; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  height:18px; /* ปรับความสูงได้จากบรรทัดนี้ */
  padding:0 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  border:.25px solid var(--badge-bd); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */
  background:var(--badge-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:var(--badge-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  box-shadow:var(--badge-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */
  font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:var(--badge-fw-base);
  letter-spacing:normal;
  line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  vertical-align:middle;
  white-space:nowrap;
  text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease,filter .14s ease;
}

.badge:hover,.chip:hover,.sc-chip:hover,.kpi-gap-badge:hover,.subcon-dup-badge:hover,.act-badge:hover,.ehs-badge:hover,.te-tl-filter-badge:hover,.ts-kpi-mini-chip:hover{
  box-shadow:var(--badge-shadow-hover); /* ปรับสีเงาได้จากบรรทัดนี้ */
  text-decoration:none;
  filter:none;
}

.badge.active,.chip.active,.sc-chip.active,.kpi-gap-badge.active,.subcon-dup-badge.active,.act-badge.active,.ehs-badge.active,.te-tl-filter-badge.active,.ts-kpi-mini-chip.active{
  box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */
}

.progress-fill.g{background:var(--progress-high)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.progress-fill.y{background:var(--progress-mid)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}
.progress-fill.r{background:var(--progress-low)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */}

/* Unified region chip look */
.chip.chip-bkk,
.chip.chip-cr,
.chip.chip-er,
.chip.chip-ner,
.chip.chip-sr,
.chip.chip-nr,
.chip.chip-default,
#tab-subcon .sc-region-link,
.ts-region-chip,
.te-tl-filter-badge-region{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--region-chip-min-width); /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
  height:var(--region-chip-height); /* ปรับความสูงได้จากบรรทัดนี้ */
  padding:0 var(--region-chip-px); /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border-radius:var(--region-chip-radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  border:var(--region-chip-border-width) solid var(--badge-bd);
  font-size:var(--region-chip-font-size); /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:var(--badge-fw-region);
  letter-spacing:var(--region-chip-letter-spacing);
  line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  cursor:pointer;
  text-decoration:none;
  box-shadow:var(--badge-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */
  transition:filter .14s ease,opacity .14s ease,background .14s ease,border-color .14s ease,color .14s ease;
}

#tab-dashboard .chip.chip-bkk:hover,
#tab-dashboard .chip.chip-cr:hover,
#tab-dashboard .chip.chip-er:hover,
#tab-dashboard .chip.chip-ner:hover,
#tab-dashboard .chip.chip-sr:hover,
#tab-dashboard .chip.chip-nr:hover,
#tab-dashboard .chip.chip-default:hover,
#tab-subcon .sc-region-link:hover,
.ts-region-chip:hover,
.te-tl-filter-badge-region:hover{
  filter:none;
  box-shadow:var(--badge-shadow-hover); /* ปรับสีเงาได้จากบรรทัดนี้ */
  text-decoration:none;
}

#tab-dashboard .chip.chip-bkk.active,
#tab-dashboard .chip.chip-cr.active,
#tab-dashboard .chip.chip-er.active,
#tab-dashboard .chip.chip-ner.active,
#tab-dashboard .chip.chip-sr.active,
#tab-dashboard .chip.chip-nr.active,
#tab-dashboard .chip.chip-default.active,
#tab-subcon .sc-region-link.active,
.ts-region-chip.active,
.te-tl-filter-badge-region.active{box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */}

.ts-region-chip.is-dim,
#tab-subcon .sc-region-link.is-dim,
.te-tl-filter-badge-region.is-dim{opacity:.45;filter:saturate(.8);}

#tab-subcon .sc-region-cell.sc-region-bkk .sc-region-link,
.ts-region-chip[data-reg="BKK"],
.te-tl-filter-badge-region[data-value="BKK"]{color:var(--region-bkk-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--region-bkk-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--region-bkk-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

#tab-subcon .sc-region-cell.sc-region-cr .sc-region-link,
.ts-region-chip[data-reg="CR"],
.te-tl-filter-badge-region[data-value="CR"]{color:var(--region-cr-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--region-cr-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--region-cr-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

#tab-subcon .sc-region-cell.sc-region-er .sc-region-link,
.ts-region-chip[data-reg="ER"],
.te-tl-filter-badge-region[data-value="ER"]{color:var(--region-er-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--region-er-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--region-er-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

#tab-subcon .sc-region-cell.sc-region-ner .sc-region-link,
.ts-region-chip[data-reg="NER"],
.te-tl-filter-badge-region[data-value="NER"]{color:var(--region-ner-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--region-ner-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--region-ner-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

#tab-subcon .sc-region-cell.sc-region-sr .sc-region-link,
.ts-region-chip[data-reg="SR"],
.te-tl-filter-badge-region[data-value="SR"]{color:var(--region-sr-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--region-sr-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--region-sr-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

#tab-subcon .sc-region-cell.sc-region-nr .sc-region-link,
.ts-region-chip[data-reg="NR"],
.te-tl-filter-badge-region[data-value="NR"]{color:var(--region-nr-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--region-nr-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--region-nr-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

#tab-subcon .sc-region-cell.sc-region-default .sc-region-link,
.te-tl-filter-badge-region{color:var(--region-default-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:var(--region-default-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:var(--region-default-bd); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

.sc-subcon-c1{color:var(--subcon-c1)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sc-subcon-c2{color:var(--subcon-c2)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sc-subcon-c3{color:var(--subcon-c3)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sc-subcon-c4{color:var(--subcon-c4)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sc-subcon-c5{color:var(--subcon-c5)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sc-subcon-c6{color:var(--subcon-c6)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

.subcon-badge,
button.subcon-badge{-webkit-appearance:none;appearance:none;border-style:solid;cursor:pointer;font:inherit;}
.subcon-badge:hover,button.subcon-badge:hover{text-decoration:none;filter:none;}
.subcon-badge.active,button.subcon-badge.active{box-shadow:inset 0 0 0 1px rgba(15,23,42,.14); /* ปรับสีเงาได้จากบรรทัดนี้ */filter:saturate(1.08);}

/* Team Efficiency filter badges */
.te-tl-filter-badge,
.te-tl-filter-badge-subcon{
  min-height:20px; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  padding:0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */
  border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  border:1px solid #bfdbfe; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */
  background:#eff6ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */
  font-weight:var(--badge-fw-base);
  line-height:1.1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */
  cursor:pointer;
}
.te-tl-filter-badge:hover,.te-tl-filter-badge-subcon:hover{background:#dbeafe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#93c5fd; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.te-tl-filter-badge.active,.te-tl-filter-badge-subcon.active{background:#2563eb; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:#2563eb; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

.sc-chip.sc-subcon-c1,.subcon-badge.sc-subcon-c1,.te-tl-filter-badge-subcon.sc-subcon-c1{background:#f1f5ff !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#dfe8f8 !important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.sc-chip.sc-subcon-c2,.subcon-badge.sc-subcon-c2,.te-tl-filter-badge-subcon.sc-subcon-c2{background:#fff8ef !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#f1e5d1 !important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.sc-chip.sc-subcon-c3,.subcon-badge.sc-subcon-c3,.te-tl-filter-badge-subcon.sc-subcon-c3{background:#f0f8f3 !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#dcecdf !important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.sc-chip.sc-subcon-c4,.subcon-badge.sc-subcon-c4,.te-tl-filter-badge-subcon.sc-subcon-c4{background:#f6f2ff !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#e5dff3 !important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.sc-chip.sc-subcon-c5,.subcon-badge.sc-subcon-c5,.te-tl-filter-badge-subcon.sc-subcon-c5{background:#fdf1f5 !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#f0dfe6 !important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.sc-chip.sc-subcon-c6,.subcon-badge.sc-subcon-c6,.te-tl-filter-badge-subcon.sc-subcon-c6{background:#eef8f6 !important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#dbece8 !important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

/* Table chip region colors */
.chip-bkk{background:var(--region-bkk-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--region-bkk-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--region-bkk-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.chip-cr{background:var(--region-cr-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--region-cr-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--region-cr-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.chip-er{background:var(--region-er-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--region-er-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--region-er-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.chip-ner{background:var(--region-ner-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--region-ner-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--region-ner-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.chip-sr{background:var(--region-sr-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--region-sr-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--region-sr-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.chip-nr{background:var(--region-nr-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--region-nr-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--region-nr-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.chip-default{background:var(--region-default-bg)!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--region-default-fg)!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--region-default-bd)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

.chip-btn,.sc-chip-btn,.act-badge-btn{cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease,filter .12s ease;}
.chip-btn:hover,.sc-chip-btn:hover,.act-badge-btn:hover{opacity:1;filter:none;box-shadow:var(--badge-shadow-hover); /* ปรับสีเงาได้จากบรรทัดนี้ */}

/* Activity badge semantic colors */
.act-badge{font-weight:var(--badge-fw-activity);}
.act-badge.act-survey{color:#797502!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#f1f1f1ac!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(212,212,212,.516)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.act-badge.act-install{color:#0939c8!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#f1f1f1ac!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(212,212,212,.516)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.act-badge.act-onservice{color:#029850!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#f1f1f1ac!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(212,212,212,.516)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.act-badge.act-clearing{color:#9f0022!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#f1f1f1ac!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(212,212,212,.516)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.act-badge.act-other{color:#475569!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#f1f1f1ac!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(212,212,212,.516)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

/* EHS badge semantic colors */
.ehs-badge{font-weight:var(--badge-fw-ehs);}
.ehs-badge{overflow:visible;text-overflow:clip;white-space:nowrap;max-width:none;}
.ehs-badge.ehs-badge-done,
.ehs-badge.ehs-badge-completed{color:#166534!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#edf9f1!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(22,101,52,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ehs-badge.ehs-badge-pending{color:#9a3412!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#fff7ed!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(154,52,18,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ehs-badge.ehs-badge-not-started{color:#1e3a8a!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#eff6ff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(30,58,138,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ehs-badge.ehs-badge-ongoing{color:#4338ca!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#eef2ff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(67,56,202,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ehs-badge.ehs-badge-rectifying{color:#be123c!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#fff1f2!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(190,18,60,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ehs-badge.ehs-badge-reviewing{color:#6d28d9!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#f5f3ff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(109,40,217,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ehs-badge.ehs-badge-under-approval{color:#0f766e!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#ecfeff!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(15,118,110,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ehs-badge.ehs-badge-n-a,
.ehs-badge.ehs-badge-na,
.ehs-badge.ehs-badge-n\/a{color:#475569!important; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#f8fafc!important; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:rgba(71,85,105,.2)!important; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

/* KPI badge variants */
.kpi-gap-badge{font-size:.60rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:0 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */height:20px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#ffffff30; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#ffffff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */cursor:pointer;border:1px solid #ddddddb9; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */margin-left:5px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */font-weight:var(--badge-fw-kpi-gap);}
.kpi-gap-badge:hover{background:#030303d2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#e7e7e7cb; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.kpi-gap-badge.active{background:#555554; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#eaff00; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:#e7d2af; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

.subcon-dup-badge{height:24px; /* ปรับความสูงได้จากบรรทัดนี้ */padding:0 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.58rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#f8f3ec; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#8b5e34; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border:1px solid #ebe2d6; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */margin-left:5px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */font-weight:var(--badge-fw-subcon-dup);}

.ts-kpi-mini-chip{gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:0 11px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */height:26px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */background:#fcf5eb; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#a55b16; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.68rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */border:1px solid #efe2cf; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */box-shadow:none; /* ปรับสีเงาได้จากบรรทัดนี้ */cursor:pointer;font-weight:var(--badge-fw-ts-kpi-mini);}
.ts-kpi-mini-chip:hover{background:#faefe2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#e8d8c0; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.ts-kpi-mini-chip.active{background:#f8ead2; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#8d4e10; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:#e4d0ae; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

/* Shared chip patterns */
.sc-zone-chip{display:inline-flex;align-items:center;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */padding:2px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:999px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1px solid #d7e3f3; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */background:#f8fbff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#334155; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.62rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */line-height:1; /* ปรับ ความสูง ได้จากบรรทัดนี้ */flex:0 0 auto;cursor:pointer;}
.sc-zone-chip:hover{background:#edf4ff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#b6cff3; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}
.sc-zone-chip.active{background:#dbeafe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-color:#93c5fd; /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */box-shadow:0 0 0 1px rgba(30,64,175,.18) inset; /* ปรับสีเงาได้จากบรรทัดนี้ */}
.sc-zone-chip b{color:#1e3a8a; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}

.slicer-chip{padding:3px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:600;cursor:pointer;border:1.5px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */transition:all .15s;-webkit-user-select:none;user-select:none;white-space:nowrap;height:28px; /* ปรับความสูงได้จากบรรทัดนี้ */display:flex;align-items:center;box-sizing:border-box;}
.slicer-chip.active{background:var(--primary); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#fff; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-color:var(--primary); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */}

.chip-btn,.sc-chip-btn,.act-badge-btn,.ehs-badge-btn,.dash-chip-click{cursor:pointer;}
.dash-act-badge-sm{font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}

/* Status pills */
.status-badge{display:inline-block;padding:3px 10px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:var(--badge-fw-status);}
.status-completed{background:#e6f4ea; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#188038; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.status-onprogress{background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1a73e8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.status-onhold{background:#fef7e0; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#e37400; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.status-issue{background:#fce8e6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c62828; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* Header/user badges */
.view-only-badge{background:rgba(251,191,36,.15); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border:1px solid rgba(251,191,36,.4); /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */border-radius:16px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:4px 12px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:var(--badge-fw-view-only);color:#fcd34d; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */white-space:nowrap;flex-shrink:0;}
.header-update .badge{padding:3px 11px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */white-space:nowrap;}

/* Team Summary small badges */
.ts-sc-count-badge{display:inline-block;background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1a73e8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-radius:20px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:0 7px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.7rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:var(--badge-fw-summary-mini);margin-top:3px; /* ปรับระยะนอก (margin)ได้จากบรรทัดนี้ */}
.sri-badge{background:#e8f0fe; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#1a73e8; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */border-radius:12px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:1px 7px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.65rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:var(--badge-fw-summary-mini);white-space:nowrap;}
.sri-badge.act{background:#e6f4ea; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#34a853; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.sri-badge.region{background:#fce8e6; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */color:#c5221f; /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

/* Team Summary region chips */
.ts-reg-chip{background:var(--card); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:10px 14px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */box-shadow:0 1px 6px rgba(0,0,0,.08); /* ปรับสีเงาได้จากบรรทัดนี้ */border-left:4px solid #1a73e8; /* ปรับสีและสไตล์เส้นขอบได้จากบรรทัดนี้ */min-width:130px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */flex:1;display:flex;flex-direction:column;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */cursor:pointer;transition:transform .15s,box-shadow .15s;}
.ts-reg-chip:hover{transform:translateY(-2px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */box-shadow:0 4px 14px rgba(0,0,0,.15); /* ปรับสีเงาได้จากบรรทัดนี้ */}
.ts-reg-chip.ts-reg-chip-active{outline:2px solid var(--primary); /* ปรับค่าขนาด/ระยะของ outlineได้จากบรรทัดนี้ */outline-offset:2px; /* ปรับระยะห่างเส้นโฟกัสได้จากบรรทัดนี้ */}
.ts-reg-chip-title{font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:800;color:var(--text); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}
.ts-reg-chip-row{display:flex;align-items:center;gap:6px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */}
.ts-reg-chip-label{font-size:.64rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */min-width:68px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}
.ts-reg-chip-val{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;min-width:24px; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */text-align:right;}
.ts-reg-chip-mini{flex:1;background:#f0f4f8; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:4px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */height:6px; /* ปรับความสูงได้จากบรรทัดนี้ */overflow:hidden;}
.ts-reg-chip-mini-fill{height:6px; /* ปรับความสูงได้จากบรรทัดนี้ */border-radius:4px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */transition:width .5s ease;}

/* Team Efficiency small badges */
.te-section-hdr .te-sec-badge{font-size:.72rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */background:#fff; /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */padding:1px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */border-radius:10px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */border:1px solid var(--border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */}
.te-kpi-reg-chip{background:rgba(255,255,255,.2); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */border-radius:6px; /* ปรับความโค้งมุมได้จากบรรทัดนี้ */padding:1px 5px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.6rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */font-weight:700;white-space:nowrap;}
.te-count-badge{font-size:.75rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */color:var(--sub); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */}

@media (max-width:768px){.sc-zone-chip{padding:4px 9px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */}}
@media (max-width:900px){.header-update .badge{font-size:.66rem; /* ปรับขนาดตัวอักษรได้จากบรรทัดนี้ */padding:2px 8px; /* ปรับระยะใน (padding)ได้จากบรรทัดนี้ */}}

/* Dashboard control bar chip container helper */
.dcb-chips{flex-shrink:0;}
.dcb-chips .multi-slicer{display:flex;flex-wrap:nowrap;gap:4px; /* ปรับระยะห่างระหว่างองค์ประกอบได้จากบรรทัดนี้ */max-width:none; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */}


/* === components/text-case.css === */
/* Global text-case normalization: preserve original casing from data/content */

table th,
table td,
button,
[role="button"],
.btn,
select,
option,
.ms-btn,
.ms-opt,
.ms-opt label{
	text-transform:none !important;
	letter-spacing:normal !important;
}


/* === components/button.css === */
/* ==================== COMPONENT OVERRIDES: BUTTONS ==================== */
/*
  This file is the central place to customize button colors/styles across tabs.
  Common user-requested buttons:
  - Clear/Clear Filter
  - Today/Day/Week/Month
  - Export XLSX / Export
*/

:root {
  /* Base button palette */
  --btn-bg: #ffffff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-fg: var(--text, #202124); /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-border: var(--border, #dcdada); /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-bg-hover: #f8fbff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-fg-hover: var(--primary, #1a73e8); /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-border-hover: var(--primary, #1a73e8); /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Primary / success / warning / danger */
  --btn-primary-bg: var(--primary, #1a73e8); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-primary-fg: #ffffff; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-success-bg: var(--success, #34a853); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-success-fg: #ffffff; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-warn-bg: var(--warning, #fbbc04); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-warn-fg: #1f2937; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-danger-bg: var(--danger, #ea4335); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-danger-fg: #ffffff; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Clear / filter buttons */
  --btn-clear-bg: #f8fafc; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-clear-fg: #475569; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-clear-border: #cbd5e1; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-clear-bg-hover: #fee2e2; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-clear-fg-hover: #b91c1c; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-clear-border-hover: #fecaca; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Quick day buttons (Today/prev/next) */
  --btn-quick-bg: #ffffff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-quick-fg: var(--sub, #5f6368); /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-quick-border: var(--border, #dcdada); /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-quick-active-bg: var(--primary, #1a73e8); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-quick-active-fg: #ffffff; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Month/Week/Day filter buttons */
  --btn-filter-bg: #ffffff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-filter-fg: #2360c9; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-filter-border: #d6d4d4; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-filter-active-bg: var(--primary, #1a73e8); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-filter-active-fg: #ffffff; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Export buttons */
  --btn-export-bg: #ffffff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-export-fg: #15803d; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-export-border: #34a853; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-export-bg-hover: #34a853; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --btn-export-fg-hover: #ffffff; /* ปรับ สีตัวอักษรจากตัวแปรนี้ ได้จากบรรทัดนี้ */
}

/* Global motion/focus behavior */
.btn,
button.btn,
.btn-export,
.te-export-btn,
.hot-btn,
.sp-quick-btn,
.tab-btn,
.ms-btn,
.te-vtab,
.te-slicer-btn,
.ts-filter-btn,
.dash-chart-collapse,
.dash-collapse-inline,
.login-btn,
.login-a2hs-btn,
.btn-refresh,
.btn-logout {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.btn:hover,
button.btn:hover,
.btn-export:hover,
.te-export-btn:hover,
.hot-btn:hover,
.sp-quick-btn:hover,
.tab-btn:hover,
.ms-btn:hover,
.te-vtab:hover,
.te-slicer-btn:hover,
.ts-filter-btn:hover,
.login-btn:hover,
.login-a2hs-btn:hover {
  transform: translateY(-1px); /* ปรับระยะ/ตำแหน่งจากการแปลง (transform)ได้จากบรรทัดนี้ */
}

.btn:focus-visible,
button.btn:focus-visible,
.btn-export:focus-visible,
.te-export-btn:focus-visible,
.hot-btn:focus-visible,
.sp-quick-btn:focus-visible,
.tab-btn:focus-visible,
.ms-btn:focus-visible,
.te-vtab:focus-visible,
.te-slicer-btn:focus-visible,
.ts-filter-btn:focus-visible,
.dash-chart-collapse:focus-visible,
.dash-collapse-inline:focus-visible,
.login-btn:focus-visible,
.login-a2hs-btn:focus-visible,
.btn-refresh:focus-visible,
.btn-logout:focus-visible {
  outline: 2px solid var(--primary); /* ปรับค่าขนาด/ระยะของ outlineได้จากบรรทัดนี้ */
  outline-offset: 2px; /* ปรับระยะห่างเส้นโฟกัสได้จากบรรทัดนี้ */
}

/* Base button skins */
.btn,
button.btn,
.te-vtab,
.ts-filter-btn,
.te-slicer-btn,
.sp-quick-btn {
  background: var(--btn-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

.btn:hover,
button.btn:hover,
.te-vtab:hover,
.ts-filter-btn:hover,
.te-slicer-btn:hover,
.sp-quick-btn:hover {
  background: var(--btn-bg-hover); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-fg-hover); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-border-hover); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

/* Quick day buttons: Today/prev/next */
.hot-btn {
  background: var(--btn-quick-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-quick-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-quick-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

.hot-btn.active {
  background: var(--btn-quick-active-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-quick-active-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-quick-active-bg); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

/* Month/Week/Day + dropdown filter buttons */
.ms-btn {
  background: var(--btn-filter-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-filter-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-filter-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

.ms-btn.active,
.ms-btn.active-on,
.ms-btn.open {
  background: var(--btn-filter-active-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-filter-active-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-filter-active-bg); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

/* Clear / Clear Filter family */
.btn.btn-outline,
#teBtnClear,
#btnTiClearFilter,
#btnNoPlanOnly,
#btnNoRemarkNoPlan {
  background: var(--btn-clear-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-clear-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-clear-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

.btn.btn-outline:hover,
#teBtnClear:hover,
#btnTiClearFilter:hover,
#btnNoPlanOnly:hover,
#btnNoRemarkNoPlan:hover {
  background: var(--btn-clear-bg-hover); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-clear-fg-hover); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-clear-border-hover); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

/* Export family */
.btn-export,
.te-export-btn,
#teVtabExport,
#btnTiExport {
  background: var(--btn-export-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-export-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-export-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

.btn-export:hover,
.te-export-btn:hover,
#teVtabExport:hover,
#btnTiExport:hover {
  background: var(--btn-export-bg-hover); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-export-fg-hover); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
  border-color: var(--btn-export-bg-hover); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

/* Semantic .btn variants */
.btn.btn-primary {
  background: var(--btn-primary-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-primary-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

.btn.btn-success {
  background: var(--btn-success-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-success-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

.btn.btn-warn {
  background: var(--btn-warn-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-warn-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

.btn.btn-danger {
  background: var(--btn-danger-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  color: var(--btn-danger-fg); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

/* Disabled state */
.btn[disabled],
button.btn[disabled],
.btn-export[disabled],
.te-export-btn[disabled],
.hot-btn[disabled],
.sp-quick-btn[disabled],
.tab-btn[disabled],
.ms-btn[disabled],
.te-vtab[disabled],
.te-slicer-btn[disabled],
.ts-filter-btn[disabled],
.dash-chart-collapse[disabled],
.dash-collapse-inline[disabled],
.login-btn[disabled],
.login-a2hs-btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}


/* === components/chart.css === */
/* ==================== COMPONENT OVERRIDES: CHARTS ==================== */
/* Central place for chart card + KPI palette customization across all tabs */

:root {
  /* Shared chart card surface */
  --chart-card-bg: #ffffff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --chart-card-bg-alt: #fcfcfc; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --chart-card-border: #d6e0f0; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --chart-card-shadow: 0 1px 6px rgba(0, 0, 0, .08); /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --chart-title-color: var(--sub, #5f6368); /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Dashboard chart group */
  --dash-chart-group-bg: #ffffff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-chart-group-bg-alt: #fcfcfc; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-chart-group-border: #d0dcf0; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-chart-group-shadow: 0 1px 4px rgba(0, 0, 0, .06); /* ปรับ สีเงาจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-chart-title-color: var(--primary, #1a73e8); /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-chart-note-color: var(--sub, #5f6368); /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Team Efficiency timeline canvas cards */
  --te-timeline-bg: #ffffff; /* ปรับ สีพื้นหลังจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-timeline-border: #e2e8f0; /* ปรับ สีเส้นขอบจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-timeline-title: #475569; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Dashboard KPI cards (k1-k6) */
  --dash-kpi-k1-a: #1a73e8; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k1-b: #0d47a1; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k2-a: #d40040; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k2-b: #640017; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k3-a: #26a69a; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k3-b: #00695c; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k4-a: #42a5f5; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k4-b: #1565c0; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k5-a: #bbb966; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k5-b: #7d752e; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k6-a: #ab47bc; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --dash-kpi-k6-b: #6a1b9a; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* Team Efficiency KPI cards (k1-k6) */
  --te-kpi-k1-a: #1a73e8; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k1-b: #0d47a1; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k2-a: #16a34a; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k2-b: #166534; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k3-a: #ef6c00; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k3-b: #bf360c; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k4-a: #7b1fa2; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k4-b: #4a148c; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k5-a: #1565c0; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k5-b: #0d47a1; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k6-a: #0f766e; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --te-kpi-k6-b: #115e59; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */

  /* TI KPI cards (k1-k6) */
  --ti-kpi-k1-a: #1a73e8; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k1-b: #0d47a1; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k2-a: #0ea5e9; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k2-b: #0369a1; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k3-a: #14b8a6; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k3-b: #0f766e; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k4-a: #f59e0b; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k4-b: #c2410c; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k5-a: #8b5cf6; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k5-b: #6d28d9; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k6-a: #22c55e; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
  --ti-kpi-k6-b: #15803d; /* ปรับ โทนสีจากตัวแปรนี้ ได้จากบรรทัดนี้ */
}

/* Shared chart cards */
.chart-card,
.dash-chart-group,
.te-chart-card,
.ts-chart-card,
.ti-chart-card {
  border-radius: var(--radius); /* ปรับความโค้งมุมได้จากบรรทัดนี้ */
  background: linear-gradient(90deg, var(--chart-card-bg), var(--chart-card-bg-alt)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  border: 1px solid var(--chart-card-border); /* ปรับค่าขนาด/ระยะของ borderได้จากบรรทัดนี้ */
  box-shadow: var(--chart-card-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */
}

.chart-card h3,
.te-chart-card h4,
.ti-chart-grid .chart-card h3,
.te-timeline-canvas-wrap h5 {
  color: var(--chart-title-color); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

/* Dashboard chart group mapping */
#tab-dashboard .dash-chart-group {
  background: linear-gradient(90deg, var(--dash-chart-group-bg), var(--dash-chart-group-bg-alt)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  border-color: var(--dash-chart-group-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
  box-shadow: var(--dash-chart-group-shadow); /* ปรับสีเงาได้จากบรรทัดนี้ */
}

#tab-dashboard .dash-chart-title {
  color: var(--dash-chart-title-color); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

#tab-dashboard .dash-chart-note,
#tab-dashboard .dash-chart-collapse {
  color: var(--dash-chart-note-color); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

/* Team Efficiency timeline card mapping */
.te-timeline-canvas-wrap {
  background: var(--te-timeline-bg); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */
  border-color: var(--te-timeline-border); /* ปรับสีเส้นขอบได้จากบรรทัดนี้ */
}

.te-timeline-canvas-wrap h5 {
  color: var(--te-timeline-title); /* ปรับสีตัวอักษร/ข้อความได้จากบรรทัดนี้ */
}

/* Dashboard KPI mapping */
.kpi-card.k1 { background: linear-gradient(135deg, var(--dash-kpi-k1-a), var(--dash-kpi-k1-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.kpi-card.k2 { background: linear-gradient(135deg, var(--dash-kpi-k2-a), var(--dash-kpi-k2-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.kpi-card.k3 { background: linear-gradient(135deg, var(--dash-kpi-k3-a), var(--dash-kpi-k3-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.kpi-card.k4 { background: linear-gradient(135deg, var(--dash-kpi-k4-a), var(--dash-kpi-k4-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.kpi-card.k5 { background: linear-gradient(135deg, var(--dash-kpi-k5-a), var(--dash-kpi-k5-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.kpi-card.k6 { background: linear-gradient(135deg, var(--dash-kpi-k6-a), var(--dash-kpi-k6-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }

/* Team Efficiency KPI mapping */
.te-kpi.k1 { background: linear-gradient(135deg, var(--te-kpi-k1-a), var(--te-kpi-k1-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.te-kpi.k2 { background: linear-gradient(135deg, var(--te-kpi-k2-a), var(--te-kpi-k2-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.te-kpi.k3 { background: linear-gradient(135deg, var(--te-kpi-k3-a), var(--te-kpi-k3-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.te-kpi.k4 { background: linear-gradient(135deg, var(--te-kpi-k4-a), var(--te-kpi-k4-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.te-kpi.k5 { background: linear-gradient(135deg, var(--te-kpi-k5-a), var(--te-kpi-k5-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.te-kpi.k6 { background: linear-gradient(135deg, var(--te-kpi-k6-a), var(--te-kpi-k6-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }

/* TI KPI mapping */
.ti-kpi-card.k1 { background: linear-gradient(135deg, var(--ti-kpi-k1-a), var(--ti-kpi-k1-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.ti-kpi-card.k2 { background: linear-gradient(135deg, var(--ti-kpi-k2-a), var(--ti-kpi-k2-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.ti-kpi-card.k3 { background: linear-gradient(135deg, var(--ti-kpi-k3-a), var(--ti-kpi-k3-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.ti-kpi-card.k4 { background: linear-gradient(135deg, var(--ti-kpi-k4-a), var(--ti-kpi-k4-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.ti-kpi-card.k5 { background: linear-gradient(135deg, var(--ti-kpi-k5-a), var(--ti-kpi-k5-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }
.ti-kpi-card.k6 { background: linear-gradient(135deg, var(--ti-kpi-k6-a), var(--ti-kpi-k6-b)); /* ปรับสีพื้นหลังได้จากบรรทัดนี้ */ }

/* Canvas fit + stretch behavior */
.chart-card canvas,
.dash-chart-group canvas,
.te-chart-card canvas,
.ts-chart-card canvas,
.ti-chart-card canvas,
canvas[id^='chart'],
canvas[id^='teChart'],
canvas[id^='tiChart'] {
  max-width: 100%; /* ปรับ ความกว้าง ได้จากบรรทัดนี้ */
}

.charts-row,
.charts-row-2,
.te-charts,
.ts-charts,
.ti-charts {
  align-items: stretch;
}

.dash-chart-group .sec-body.collapsed,
.te-card .sec-body.collapsed,
.ts-card .sec-body.collapsed,
.ti-card .sec-body.collapsed {
  overflow: hidden;
}


/* === components/pro-ui.css === */
/* ==================== COMPONENT OVERRIDES: PRO UI ==================== */
/* Final visual polish layer (no logic changes) */

:root {
  --ui-glass-bg: rgba(255, 255, 255, .80);
  --ui-glass-border: rgba(100, 160, 220, .28);
  --ui-soft-shadow: 0 12px 30px rgba(10, 22, 64, .09);
  --ui-card-shadow: 0 10px 26px rgba(10, 22, 64, .08), 0 1px 0 rgba(255, 255, 255, .85) inset;
  --ui-card-shadow-hover: 0 18px 36px rgba(10, 22, 64, .14), 0 1px 0 rgba(255, 255, 255, .9) inset;
  --ui-focus-outline: rgba(26, 74, 138, .42);
  --ui-focus-border: rgba(26, 74, 138, .62);
}

body {
  background:
    radial-gradient(1200px 580px at 5% -10%, rgba(26, 74, 138, .12), transparent 58%),
    radial-gradient(980px 520px at 100% 0%, rgba(0, 180, 216, .14), transparent 52%),
    linear-gradient(180deg, #eef5ff 0%, #e4eefa 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background-image: radial-gradient(rgba(148, 163, 184, .15) .6px, transparent .6px);
  background-size: 18px 18px;
  opacity: .36;
}

body::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, .3), transparent 55%);
}

header {
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 30px rgba(9, 33, 70, .24);
}

.tab-bar-sticky {
  margin: 10px 12px 0;
  border-radius: 16px;
  border: 1px solid var(--ui-glass-border);
  background: var(--ui-glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--ui-soft-shadow);
}

.tab-btn {
  position: relative;
  border-bottom-width: 0;
  font-weight: 600;
  letter-spacing: .01em;
}

.tab-btn.active {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  box-shadow: inset 0 -3px 0 var(--primary), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.tab-btn:hover:not(.active) {
  background: rgba(26,74,138,.08);
}

.dash-control-bar {
  border: 1px solid rgba(100, 160, 220, .22);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(240, 248, 255, .92) 100%);
  box-shadow: 0 4px 16px rgba(10, 22, 64, .08);
}

.main-scroll {
  padding-top: 16px;
}

.main-scroll > * {
  animation: proUiFadeUp .34s ease backwards;
}

.main-scroll > *:nth-child(1) { animation-delay: .03s; }
.main-scroll > *:nth-child(2) { animation-delay: .06s; }
.main-scroll > *:nth-child(3) { animation-delay: .09s; }
.main-scroll > *:nth-child(4) { animation-delay: .12s; }

.kpi-card,
.act-card,
.sc-kpi-card,
.ts-kpi-card,
.sp-kpi-card,
.ti-kpi-card,
.chart-card,
.te-chart-card,
.ts-chart-card,
.ti-chart-card,
.table-wrap,
.ts-table-wrap,
.te-table-wrap,
.ti-table-wrap,
.sp-table-wrap,
.milestone-card,
.ti-summary-card,
.ts-toolbar,
#tab-subcon .table-wrap,
#tab-ti .table-wrap {
  border: 1px solid rgba(148, 163, 184, .24);
  box-shadow: var(--ui-card-shadow);
}

.kpi-card:hover,
.act-card:hover,
.sc-kpi-card:hover,
.ts-kpi-card:hover,
.sp-kpi-card:hover,
.ti-kpi-card:hover,
.chart-card:hover,
.te-chart-card:hover,
.ts-chart-card:hover,
.ti-chart-card:hover,
.ti-summary-card:hover,
.milestone-card:hover {
  box-shadow: var(--ui-card-shadow-hover);
}

#tab-subcon .table-wrap,
.table-wrap,
.ts-table-wrap,
.te-table-wrap,
.ti-table-wrap,
.sp-table-wrap {
  border-radius: 14px;
  overflow: auto;
}

/* Gradient table header */
.table th,
.te-table th,
.ts-table th,
.ti-table th,
.team-status-table th,
#dashSnapshot table th {
  background-image: linear-gradient(180deg, #f7fafe 0%, #edf3f9 100%);
  letter-spacing: .07em;
}

.btn,
button.btn,
.ms-btn,
.hot-btn,
.te-slicer-btn,
.te-vtab,
.ts-filter-btn,
.sp-quick-btn,
.btn-refresh,
.btn-logout,
.login-btn,
.login-a2hs-btn {
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}

input,
select,
textarea,
.ms-btn,
.hot-btn,
.te-slicer-btn,
.te-vtab,
.ts-filter-btn,
.sp-quick-btn {
  border-radius: 10px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ui-focus-outline);
  outline-offset: 1px;
  border-color: var(--ui-focus-border);
}

#loginScreen {
  background:
    radial-gradient(560px 300px at 12% 18%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(540px 280px at 86% 86%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(130deg, #0b3f86 0%, #0e67d5 54%, #08b7c5 100%);
}

.login-box {
  border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(251, 253, 255, .94) 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.login-title {
  letter-spacing: .01em;
}

.login-sub {
  font-weight: 500;
}

@keyframes proUiFadeUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .tab-bar-sticky {
    margin: 8px 8px 0;
    border-radius: 13px;
  }

  .dash-control-bar {
    border-radius: 12px 12px 0 0;
  }

  .main-scroll {
    padding: 12px 10px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-scroll > *,
  .btn,
  button.btn,
  .kpi-card,
  .act-card,
  .sc-kpi-card,
  .ts-kpi-card,
  .sp-kpi-card,
  .ti-kpi-card {
    animation: none !important;
    transition: none !important;
  }
}

/* === DailyRollout additions: timeline period buttons === */
.te-tl-period-btns{display:flex;gap:0;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.te-tl-period-btns .te-tl-period-btn{border-radius:0;border:none;border-right:1px solid var(--border);padding:5px 11px;font-size:.75rem;background:#fff;color:#374151;cursor:pointer;transition:background .15s;}
.te-tl-period-btns .te-tl-period-btn:last-child{border-right:none;}
.te-tl-period-btns .te-tl-period-btn:hover{background:#f1f5f9;}
.te-tl-period-btns .te-tl-period-btn.active{background:var(--primary);color:#fff;}

/* Region Summary table: force solid header — no gradient inside .te-rs-table */
.te-rs-table th{background:#eff6ff!important;background-image:none!important;color:#1e3a8a!important;}
.te-rs-table thead th{border:1px solid #c5cfdd!important;}

/* TE table view-specific header colours */
#teViewSummary .te-table thead tr,
#teViewSites .te-table thead tr,
#teViewTeam .te-table thead tr{background:linear-gradient(90deg,#1a4a8a,#0a2952);}
#teViewSummary .te-table th,
#teViewSites .te-table th,
#teViewTeam .te-table th{background:transparent!important;color:#fff!important;}
#teViewSummary .te-table .te-th-group-done,
#teViewSummary .te-table .te-th-group-aging,
#teViewSummary .te-table .te-th-group-clearing{background:inherit!important;border-right:3px solid rgba(255,255,255,.6)!important;border-left:3px solid rgba(255,255,255,.4)!important;}
#teViewSummary .te-table .te-th-sub{background:#f1f5f9!important;color:#374151!important;}

/* Frozen TE table header colours */
#teViewSummary .te-table-wrap.te-frozen thead tr,
#teViewSites   .te-table-wrap.te-frozen thead tr,
#teViewTeam    .te-table-wrap.te-frozen thead tr{background:transparent!important;}
#teViewSummary .te-table-wrap.te-frozen thead th,
#teViewSites   .te-table-wrap.te-frozen thead th,
#teViewTeam    .te-table-wrap.te-frozen thead th{background:#1a4a8a!important;color:#fff!important;}
#teViewSummary .te-table-wrap.te-frozen thead .te-th-group-done{background:#166534!important;color:#fff!important;border-right:2px solid rgba(255,255,255,.3)!important;}
#teViewSummary .te-table-wrap.te-frozen thead .te-th-group-aging{background:#9a3412!important;color:#fff!important;border-right:2px solid rgba(255,255,255,.3)!important;}
#teViewSummary .te-table-wrap.te-frozen thead .te-th-group-clearing{background:#1e3a8a!important;color:#fff!important;border-right:2px solid rgba(255,255,255,.3)!important;}
#teViewSummary .te-table-wrap.te-frozen thead .te-th-sub{background:#1251a8!important;color:#fff!important;}
#teViewSummary .te-table-wrap.te-frozen thead th.te-th-sub{background:#1251a8!important;color:#fff!important;}

/* ts-subcon-link → now uses sc-chip with getSubconStyle() inline style */
.ts-subcon-link{display:inline-flex;align-items:center;padding:1px 7px;border-radius:10px;font-size:.7rem;font-weight:600;cursor:pointer;border:none;white-space:nowrap;}
/* Team Status header: font size — padding/line-height come from --table-head-py/line-height vars above */
#tab-teamStatus .team-status-table th{font-size:.60rem;}
#tab-teamStatus .team-status-table th .ts-head-label{font-size:.62rem;line-height:1.2;}

/* ── Efficiency table header text color (dark bg → white text) ── */
#teViewSummary .te-table thead tr,
#teViewSites .te-table thead tr,
#teViewTeam .te-table thead tr{color:#fff;}
#teViewSummary .te-table th,
#teViewSites .te-table th,
#teViewTeam .te-table th{color:#fff !important;}

/* ── TI total rows: more prominent highlight ── */
.ti-row-total td{background:var(--ti-total-bg)!important;font-weight:700;color:#0d4a2e;border-top:2px solid #22c55e!important;border-bottom:2px solid #22c55e!important;}
.ti-row-grand td{background:var(--ti-grand-bg)!important;font-weight:800;color:#7a4700;border-top:2.5px solid #f59e0b!important;border-bottom:2.5px solid #f59e0b!important;}
/* Region subtotal rows */
.ti-table tbody tr.ti-row-total.ti-region-bkk td{background:#60cff7 !important;border-left:4px solid #0284c7;font-weight:700;}
.ti-table tbody tr.ti-row-total.ti-region-cr td{background:#6ee7a6 !important;border-left:4px solid #16a34a;font-weight:700;}
.ti-table tbody tr.ti-row-total.ti-region-er td{background:#fbbf24 !important;border-left:4px solid #d97706;font-weight:700;}
.ti-table tbody tr.ti-row-total.ti-region-ner td{background:#f472b6 !important;border-left:4px solid #db2777;font-weight:700;}
.ti-table tbody tr.ti-row-total.ti-region-sr td{background:#a78bfa !important;border-left:4px solid #7c3aed;font-weight:700;}

/* ── User Admin: role column wider ── */
.ua-col-role{width:200px;}
.ua-role-cell .ua-inline{min-width:186px;}

/* ── Timeline Region Summary: taller rows ── */
.te-region-sum-table th,.te-region-sum-table td{padding:6px 10px;}
#teTimelineTableWrap{margin-top:20px;}

/* ── Dashboard sec-toggle icon color ── */
#tab-dashboard .sec-toggle-icon{color:var(--primary);font-size:.8rem;}

/* ══════════════════════════════════════════════
   LOGIN SCREEN OVERRIDES
   (must come last — beat form-controls.css specificity)
   ══════════════════════════════════════════════ */

/* 1) Input height — form-controls.css sets height:30px + padding:0 without !important
      so we need !important here to win the cascade */
.login-field input{
  height:auto!important;
  padding:15px 18px!important;
  font-size:.95rem!important;
  border-radius:12px!important;
}

/* 2) Title gradient (vibrant navy → sky blue) */
.login-title{
  background:linear-gradient(135deg,#0a1e6e 0%,#1a4a8a 45%,#0ea5e9 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

/* 3) Subtitle visible — fonts.css applies color:var(--font-color-muted)=#daeaff
      which is invisible on white background */
.login-sub{
  color:#4a6fa5!important;
  -webkit-text-fill-color:#4a6fa5!important;
  background:none!important;
  opacity:1!important;
}

/* 4) Animated background — two floating glowing orbs */
#loginScreen{overflow:hidden;}

#loginScreen::before,
#loginScreen::after{
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
#loginScreen::before{
  width:520px;height:520px;
  top:-140px;left:-140px;
  background:radial-gradient(circle,rgba(30,107,181,.55) 0%,transparent 68%);
  animation:loginOrb1 9s ease-in-out infinite;
}
#loginScreen::after{
  width:420px;height:420px;
  bottom:-110px;right:-110px;
  background:radial-gradient(circle,rgba(8,183,197,.45) 0%,transparent 68%);
  animation:loginOrb2 11s ease-in-out infinite;
}
#loginScreen .login-box{position:relative;z-index:1;}

@keyframes loginOrb1{
  0%,100%{transform:translate(0,0) scale(1);}
  30%{transform:translate(40px,-50px) scale(1.08);}
  65%{transform:translate(-25px,35px) scale(.94);}
}
@keyframes loginOrb2{
  0%,100%{transform:translate(0,0) scale(1);}
  35%{transform:translate(-35px,45px) scale(1.06);}
  70%{transform:translate(30px,-30px) scale(.96);}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — fluid, 44 px touch targets, clamp() typography
   Breakpoints: ≤640px (phone-landscape/small-tablet) | ≤480px (phone-portrait)
   ══════════════════════════════════════════════════════════════ */

/* ── Touch-targets: mobile only (≤640px) — desktop keeps native sizes ── */

/* ── Fluid typography tokens ── */
:root{
  --font-fluid-h1:   clamp(.9rem,  2.5vw, 1.4rem);
  --font-fluid-tab:  clamp(.7rem,  1.8vw,  .84rem);
  --font-fluid-btn:  clamp(.72rem, 1.9vw,  .87rem);
  --font-fluid-label:clamp(.6rem,  1.5vw,  .75rem);
}
header h1    { font-size: var(--font-fluid-h1); }
.tab-btn     { font-size: var(--font-fluid-tab); }
.btn         { font-size: var(--font-fluid-btn); }
.dcb-group label { font-size: var(--font-fluid-label); }

/* ══════════════════════════════
   ≤640px — Tablet / Phone landscape
   ══════════════════════════════ */
@media (max-width: 640px) {

  /* Touch targets ≥44px on mobile only */
  .tab-btn,.btn,.btn-sm,.hot-btn,.ms-btn,
  .btn-edit-row,.btn-ts-edit,.btn-ts-del,.sp-quick-btn,.te-vtab{
    min-height: 44px; min-width: 44px;
  }
  .btn-refresh,.btn-logout{ min-height:44px;min-width:44px; }

  /* Header: brand + right items on row 1 | search full-width on row 2 */
  header{
    padding: clamp(6px,1.5vw,10px) clamp(10px,3vw,16px);
    height: auto; min-height: 52px;
    flex-wrap: wrap; align-items: center;
    gap: 0; row-gap: 5px;
  }
  .hdr-brand{ flex: 1 1 auto; min-width: 0; }
  .hdr-tagline{ font-size: .58rem; opacity: .75; }

  .header-right{
    flex: 0 0 auto; width: auto;
    gap: 5px; flex-wrap: nowrap;
    justify-content: flex-end; align-items: center;
  }

  /* Search drops to second row, full width */
  .header-search-wrap{
    order: 10; flex: 0 0 100%; max-width: 100%;
  }
  .header-search-input{ width: 100% !important; font-size: .82rem; }
  .header-search-input:focus,
  .header-search-input:focus-visible{ width: 100% !important; }

  /* Clock: hide date, shrink time */
  .hc-date { display: none; }
  .hc-time { font-size: .88rem; }

  /* User: hide sub-label */
  .usr-sub { display: none; }
  .usr-name { font-size: .78rem; }

  /* Dividers slim */
  .header-divider { height: 20px; }

  /* Update badge compact */
  .hdr-upd-badge { font-size: .66rem; padding: 3px 9px 3px 7px; }

  /* Tab bar */
  .tab-bar-sticky{ margin: 6px 8px 0; }
  .tab-btn{ padding: clamp(6px,1.5vw,9px) clamp(7px,2vw,12px); }
  .tab-actions{ padding: 4px 8px; gap: 5px; }
  .tab-actions .btn-warn,
  .tab-actions .btn-primary{ font-size: .73rem; padding: 6px 10px; }

  /* Content */
  .main-scroll{ padding: 10px 10px 24px; }
  .kpi-grid    { grid-template-columns: 1fr 1fr !important; }
  .activity-row{ grid-template-columns: 1fr 1fr !important; }

  /* Filter bar */
  .dash-control-bar{
    padding: 6px 8px; gap: 4px;
    flex-wrap: nowrap; overflow-x: auto;
    /* momentum scroll handled natively by modern browsers */
  }
  .dcb-group input[type="date"]{ width: 90px; }
  .dcb-group input[type="text"] { width: 84px; }
}

/* ══════════════════════════════
   ≤480px — Phone portrait
   ══════════════════════════════ */
@media (max-width: 480px) {

  header{ padding: 7px 10px; }
  .hdr-tagline{ display: none; }
  .hdr-logo-box{ width: 34px; height: 34px; }
  .hdr-logo-box img{ width: 32px !important; height: 32px !important; }

  /* Strip header-right to essentials: user + refresh + logout */
  .header-update, .hdr-upd-badge{ display: none; }
  .header-divider{ display: none; }
  .header-clock{ display: none; }        /* clock hidden — saves space */

  /* Tab bar: horizontal scroll strip (no wrap/toggle) */
  /* Wrapper shows right-edge fade when more tabs exist */
  .tab-bar-wrap{
    position: relative;
  }
  .tab-bar-wrap::after{
    content: '›';
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 32px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to right, transparent, var(--surface-2) 70%);
    color: var(--sub); font-size: 1.1rem; font-weight: 700;
    pointer-events: none;
    transition: opacity .2s;
  }
  /* Hide arrow when scrolled to end */
  .tab-bar-wrap.tabs-at-end::after{ opacity: 0; }

  /* Move scroll to the bar itself — parent overflow:hidden was clipping .tabs */
  .tab-bar-sticky{
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; border-radius: 0; margin: 0;
    flex-wrap: nowrap;
  }
  .tab-bar-sticky::-webkit-scrollbar{ display: none; }

  /* .tabs no longer scrolls — bar does */
  .tabs{
    flex-wrap: nowrap; overflow: visible;
    flex: 0 0 auto;          /* don't compress, let bar scroll */
    padding: 5px 8px 4px; gap: 3px;
  }
  .tab-btn{
    flex: 0 0 auto; min-width: 0;
    padding: 8px 11px; font-size: .73rem;
    border-radius: 8px; white-space: nowrap; line-height: 1.2;
    min-height: 38px;
  }
  .tab-actions{
    flex-shrink: 0; flex: 0 0 auto;
    border-left: 1px solid rgba(255,255,255,.2);
    padding: 4px 8px; gap: 4px;
    position: sticky; right: 0;   /* pin action buttons to right edge */
    background: var(--surface-2);
  }
  /* Action button text visible, icon size matches */
  .tab-actions .btn-warn,
  .tab-actions .btn-primary{
    font-size: .7rem; padding: 7px 9px; gap: 4px;
  }
  .tab-mobile-toggle{ display: none; } /* no accordion on mobile */

  /* Content */
  .main-scroll{ padding: 8px 8px 20px; }
  .kpi-card   { padding: 10px 12px; }
  .kpi-value  { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .act-card   { padding: 8px 10px; }
  .act-plan   { font-size: 1.15rem; }

  /* KPI fluid grid: 2 col always on phone */
  .kpi-grid    { grid-template-columns: 1fr 1fr !important; }
  .activity-row{ grid-template-columns: 1fr 1fr !important; }

  /* Filter bar: wrap to 2 rows */
  .dash-control-bar{
    flex-wrap: wrap; gap: 5px 8px; padding: 8px 10px;
    overflow-x: visible;
  }
  .dcb-group{ flex: 0 0 auto; }
  .dcb-group input[type="date"]{ width: 108px; }
  .hot-btn{ padding: 0 8px; font-size: .7rem; }

  /* Section headers compact */
  .sec-header{ padding: 5px 10px; }
  #tab-dashboard .sec-header h3{ font-size: .82rem; }

  /* Bottom-sheet modals */
  .modal-overlay{ align-items: flex-end; }
  .modal{
    padding: 18px 14px 24px;
    width: 100vw !important; max-width: 100vw;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
  }
  .form-grid{ grid-template-columns: 1fr !important; }

  /* Snapshot modal full-screen on phone */
  #snapshotModal .snap-box{
    width: 100vw; max-height: 95vh;
    border-radius: 18px 18px 0 0;
  }
}