/* ==========================================================================
   พื้นที่ทำงานฝ่ายบุคคล (hr.html) และหน้าของฉัน (me.html)

   ไฟล์นี้เคยมี "ชุดสีของตัวเอง" (เขียวน้ำทะเล + ทอง + ฟอนต์ Sarabun) แยกจาก
   ระบบเดิมทั้งหมด ผลคือพนักงานคนเดียวกันเดินจาก me.html ไป site.html แล้ว
   รู้สึกเหมือนคนละบริษัท — ตอนนี้ยกเลิกชุดสีนั้นแล้ว ทุกค่ามาจาก token กลาง
   ใน app.css ชุดเดียว (ตกลงกับเจ้าของ 2569-09-06: ยึด app.css เป็นหลัก)

   หลักการของไฟล์นี้ต่อจากนี้:
     1) ห้ามเขียนโค้ดสีลงในกฎ — ใช้ตัวแปรจาก app.css เท่านั้น ธีมมืดจะตามมาเอง
     2) ขอบมน ระยะห่าง เงา และจังหวะเคลื่อนไหว อ้างสเกลกลาง (--r-* --sp-* --e* --t-*)
     3) ชื่อ --hr-* ยังอยู่ เพราะโค้ดเดิมอ้างถึงหลายร้อยจุด แต่เปลี่ยน "ที่มาของค่า"
        ให้ชี้กลับไปที่ token กลาง — แก้ที่ app.css ที่เดียวได้ผลทุกหน้ารวมถึงหน้านี้
     4) หน้าตาของชิ้นส่วนอ้างของเดิมที่มีอยู่แล้ว: ปุ่ม=.tbtn · การ์ด=.card
        ตาราง=.plantable · ป้ายสถานะ=.statuschip · กล่องซ้อน=.sheet · แถบแบ่ง=.seg
   ========================================================================== */

.hr-app{
  /* --- สะพานเชื่อมชื่อเดิม → token กลาง --- */
  --hr-bg:var(--paper);
  --hr-card:var(--card);
  --hr-text:var(--ink);
  --hr-muted:var(--muted);
  --hr-line:var(--line);
  --hr-accent:var(--accent-ink);   /* สีเน้นบนพื้นการ์ด — พลิกเป็นโทนอ่อนเองในธีมมืด */
  --hr-soft:var(--tint);
  --hr-navy:var(--navy2);
  --hr-gold:var(--accent);         /* เดิมเป็นทอง d0ad6d ซึ่งไม่มีในแบรนด์ — ใช้สีเน้นของระบบแทน */
  --hr-danger:var(--bad);
  --hr-warn:var(--warn);
  /* ความสูงแถบบน — วางเป็นตัวแปรเพราะ .hr-layout ต้องหักค่านี้ออกจากความสูงจอ
     เดิมเขียน 78px ไว้สองที่ พอจอแคบแก้แค่ที่เดียว ความสูงที่เหลือจึงเพี้ยน */
  --hr-head-h:var(--dc-top-h,96px);
  background:var(--paper);color:var(--ink);
  font-size:14px;line-height:1.65;min-width:320px;
}
/* ธีมมืดไม่ต้องประกาศซ้ำอีกแล้ว — token กลางใน app.css พลิกค่าให้ครบทุกตัวข้างบน */

.hr-app [hidden]{display:none!important}
.hr-app a{color:inherit}
.hr-app button,.hr-app input,.hr-app textarea,.hr-app select{font:inherit}
.hr-app button{cursor:pointer}
/* disabled ไม่ได้แปลว่า "กำลังทำงาน" — เคอร์เซอร์นาฬิกาใช้เฉพาะตอน ui.js ติดธง aria-busy */
.hr-app button:disabled{opacity:.45;cursor:default}
.hr-app button[aria-busy="true"]{cursor:wait}
/* วงแหวนโฟกัสชุดเดียวกับทั้งระบบ (app.css: 2px accent offset 2) เดิมที่นี่เป็นทอง 3px */
.hr-app a:focus-visible,.hr-app button:focus-visible,.hr-app input:focus-visible,
.hr-app select:focus-visible,.hr-app textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hr-skip{position:fixed;left:12px;top:-70px;z-index:60;background:var(--card);color:var(--ink);
  border:1px solid var(--accent);border-radius:var(--r-sm);box-shadow:var(--e3);padding:10px 16px;font-weight:700}
.hr-skip:focus{top:12px}

/* ==========================================================================
   โครงหน้า — แถบข้างซ้าย + เนื้อหา
   ========================================================================== */
.hr-layout{display:grid;grid-template-columns:236px minmax(0,1fr);max-width:1800px;margin:0 auto;
  min-height:calc(100vh - var(--hr-head-h))}
.hr-sidebar{padding:28px 20px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--card)}
.hr-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--muted);text-transform:uppercase;margin:0 0 8px}
.hr-sidebar h1{font-size:23px;margin:0;letter-spacing:-.4px;color:var(--ink)}
.hr-sidebar-note{color:var(--muted);font-size:12px;margin:9px 0 26px}
.hr-sidebar nav{display:flex;flex-direction:column;gap:4px}
/* เดิมต้องใช้ !important สู้กับ .hr-app a{color:inherit} — เพิ่มความจำเพาะแทน แก้ทับได้ตามปกติ */
.hr-app .hr-nav-btn{display:flex;gap:12px;align-items:center;text-decoration:none;
  padding:10px 12px;border:1px solid transparent;border-radius:var(--r-xs);
  color:var(--muted);font-size:13px;font-weight:700;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.hr-app .hr-nav-btn:hover{background:var(--surf2);color:var(--ink)}
.hr-app .hr-nav-btn.active{background:var(--tint);color:var(--accent-ink);border-color:var(--accent-line)}
.hr-nav-num{font-size:11px;opacity:.75;min-width:18px;font-variant-numeric:tabular-nums}
/* ชื่อหมวดสองบรรทัด: ไทยหนา + อังกฤษเล็ก (บลีพ §0 ข้อ 4 · สเกล §2.3 "ชื่อหัวข้อ/เมนู")
   บรรทัดอังกฤษจางลงหนึ่งขั้นเสมอ ไม่ว่าหมวดนั้นจะถูกเลือกอยู่หรือไม่ */
.hr-nav-label{display:flex;flex-direction:column;gap:1px;min-width:0}
.hr-nav-en{font-size:9px;font-weight:400;letter-spacing:.6px;line-height:1.3;
  text-transform:uppercase;color:var(--muted);opacity:.85}
.hr-app .hr-nav-btn:hover .hr-nav-en,.hr-app .hr-nav-btn.active .hr-nav-en{color:inherit;opacity:.62}
/* เมนูกลุ่ม (HR เฟส 3 · 2569-10-02): จอกว้าง = หัวกลุ่มบนแถบข้าง (ชิปกลุ่มซ่อน) · ≤760px ดูกฎในบล็อกมือถือ */
.hr-nav-groups{display:none}
.hr-nav-group{display:flex;flex-direction:column;gap:4px}
.hr-nav-group+.hr-nav-group{margin-top:14px}
.hr-nav-group-title{margin:0 12px 2px;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--ink)}
.hr-nav-group-title small{display:block;font-size:9px;font-weight:400;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.hr-nav-chip{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;
  padding:5px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surf2);color:var(--muted);
  font:inherit;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap;scroll-snap-align:center}
.hr-nav-chip small{font-size:8.5px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;opacity:.75}
.hr-nav-chip.active{background:var(--navy2);border-color:var(--navy2);color:var(--on-navy)}
.hr-nav-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hr-sidebar-bottom{margin-top:auto;padding-top:34px;font-size:11px;color:var(--muted)}
.hr-sidebar-bottom small{display:block;font-size:11px;margin-top:9px}
.hr-live-dot{display:inline-block;background:var(--ok-on-card);width:6px;height:6px;border-radius:50%;margin-right:6px}
.hr-main{padding:30px clamp(16px,3.4vw,52px) 64px;min-width:0;background:var(--paper)}

/* ==========================================================================
   หัวเรื่องหน้า · ปุ่ม · แถบเครื่องมือ
   ========================================================================== */
.hr-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.hr-page-head h2{font-size:27px;font-weight:700;line-height:1.35;margin:0 0 8px;letter-spacing:-.4px;color:var(--ink)}
.hr-page-head p{font-size:13px;margin:0;color:var(--muted);max-width:650px}
.hr-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hr-category-add{padding:16px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-md)}
.hr-category-add h3,.hr-category-list-title{margin:0 0 8px;font-size:16px}
.hr-category-add-row{display:flex;align-items:flex-end;gap:10px}
.hr-category-add-row .hr-field{flex:1;min-width:0}
.hr-category-add-row>.hr-btn{flex-shrink:0;min-height:42px}
.hr-category-list{max-height:42vh;overflow:auto}
.hr-category-list .hr-table td:last-child .hr-actions{flex-wrap:wrap}
@media(max-width:480px){.hr-category-add-row{align-items:stretch;flex-direction:column}.hr-category-list .hr-table{min-width:0}.hr-category-list .hr-table th,.hr-category-list .hr-table td{padding:8px}}

/* ปุ่ม — หน้าตาเดียวกับ .tbtn ของหน้าอื่นทุกประการ
   เดิม hover ใช้ filter:brightness(.94) ซึ่งในธีมมืดคือ "หรี่ลง" ปุ่มจึงจมหายไปกับพื้น */
.hr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 13px;
  color:var(--ink);background:var(--card);text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:700;line-height:1.5;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.hr-btn:hover{border-color:var(--accent);background:var(--tint)}
.hr-btn.primary{background:var(--navy2);border-color:var(--navy2);color:var(--on-navy)}
.hr-btn.primary:hover{background:var(--navy-hov);border-color:var(--navy-hov)}
.hr-btn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-navy)}
.hr-btn.accent:hover{background:var(--navy-hov);border-color:var(--navy-hov)}
.hr-btn.quiet{border-color:transparent;background:transparent;color:var(--muted)}
.hr-btn.quiet:hover{background:var(--surf2);border-color:var(--line);color:var(--ink)}
.hr-btn.danger{color:var(--bad);border-color:var(--bad-line)}
.hr-btn.danger:hover{background:var(--bad-bg);border-color:var(--bad)}
.hr-btn.small{font-size:12px;min-height:28px;padding:4px 10px}
.hr-icon-btn{width:32px;height:32px;flex:none;display:grid;place-items:center;line-height:1;font-size:20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xs);color:var(--muted);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.hr-icon-btn:hover{background:var(--tint);border-color:var(--accent);color:var(--ink)}
/* ปุ่มไอคอนท้ายแถวใบค่าแรง (แก้ไข · สลิป PDF · สลิปโอน — 2569-10-07) */
.hr-row-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.hr-row-ic{position:relative;font-size:18px;cursor:pointer}
.hr-row-ic .dc-ic{width:18px;height:18px}
.hr-row-ic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hr-row-ic.is-paid{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bg)}
.hr-row-ic.is-paid:hover{border-color:var(--ok);color:var(--ok)}
.hr-row-ic-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;display:grid;place-items:center;
  font-size:10px;font-weight:700;line-height:1;background:var(--ok);color:var(--card)}
.hr-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}

/* ==========================================================================
   ตัวเลขสรุป · แผง · ตาราง
   ========================================================================== */
.hr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-bottom:var(--sp-6)}
.hr-stat{background:var(--card);padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);position:relative;overflow:hidden}
.hr-stat label{display:block;font-size:11px;color:var(--muted);margin-bottom:9px}
.hr-stat strong{font-size:28px;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.hr-stat small{display:block;color:var(--muted);font-size:11px;margin-top:8px}
.hr-stat.featured{background:var(--navy2);color:var(--on-navy);border-color:var(--navy2)}
.hr-stat.featured strong{color:var(--on-navy)}
.hr-stat.featured label,.hr-stat.featured small{color:var(--on-navy-3)}
.hr-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,1fr);gap:var(--sp-5);align-items:start}
.hr-grid.equal{grid-template-columns:repeat(2,minmax(0,1fr))}
.hr-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:22px;overflow:hidden}
.hr-panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 20px;border-bottom:1px solid var(--line)}
.hr-panel-head h3{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.hr-panel-head small{color:var(--muted);font-size:12px}
.hr-panel-body{padding:20px}
.hr-table-wrap{width:100%;overflow:auto}
.hr-table{width:100%;border-collapse:collapse;text-align:left;white-space:normal;font-size:13px}
/* หัวตารางใช้รูปแบบเดียวกับ .plantable ทั้งระบบ: พื้น surf2 + ตัวพิมพ์ใหญ่ระยะห่างกว้าง */
.hr-table th{padding:10px 16px;background:var(--surf2);color:var(--muted);font-size:12px;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.hr-table td{padding:13px 16px;border-top:1px solid var(--line-soft);vertical-align:middle}
.hr-table td strong{font-weight:700;display:block;overflow-wrap:anywhere;color:var(--ink)}
.hr-table td small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
/* ยอดเงินในตารางไม่ตัดกลางตัวเลข (เงินเบิกล่วงหน้า 2569-10-11 · มือถือ 375) */
.hr-table td strong.hr-amt{overflow-wrap:normal;white-space:nowrap}
.hr-table td:last-child .hr-actions{flex-wrap:nowrap}
.hr-table tbody tr:hover{background:var(--tint)}

/* ==========================================================================
   ป้าย · กล่องแจ้ง · สถานะว่าง
   ========================================================================== */
/* ป้ายสถานะเป็นแคปซูลเหมือน .statuschip ของหน้าอื่น ไม่ใช่สี่เหลี่ยมมนเล็กแบบเดิม */
.hr-chip{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700;
  background:var(--surf3);color:var(--muted);white-space:nowrap}
.hr-chip.good{background:var(--ok-bg);color:var(--ok)}
.hr-chip.warn{background:var(--warn-bg);color:var(--warn)}
.hr-chip.bad{background:var(--bad-bg);color:var(--bad)}
.hr-chip.info{background:var(--info-bg);color:var(--info)}
.hr-empty{padding:40px 24px;text-align:center;color:var(--muted);font-size:13px}
.hr-empty strong{display:block;color:var(--ink);font-size:14px;margin:0 0 5px}
/* การ์ดข้อมูลพนักงาน + ไฟล์แนบ (HR เฟส 4 · 2569-10-02) — ประกอบจาก .hr-panel/.hr-stats/.hr-definition เดิม */
.hr-card-host{margin-bottom:22px}
.hr-card-host>.hr-actions{justify-content:flex-end;margin-bottom:8px}
.hr-card{display:flex;flex-direction:column;gap:16px}
.hr-card-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hr-card-head h3{margin:0;font-size:22px;color:var(--ink)}
.hr-card-head h3 small{font-size:15px;font-weight:400;color:var(--muted)}
.hr-card-head label{display:flex;align-items:center;gap:8px}
.hr-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.hr-card-grid .hr-panel{margin:0}
.hr-card h4{margin:14px 0 6px;font-size:13px;color:var(--ink)}
.hr-card h4:first-child{margin-top:0}
.hr-list-plain{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.hr-list-plain small{color:var(--muted)}
.hr-files{list-style:none;margin:0;padding:0 18px}
.hr-files li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.hr-files li:first-child{border-top:0}
.hr-files li>span:first-child{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.hr-files small{color:var(--muted);font-size:12px}
.hr-leave-host{margin-top:18px}
/* ตารางเข้า-ออก 4 ช่อง (HR เฟส 5 · 2569-10-02): เขียว = ตรงเวลา · แดง = สาย/ออกก่อน — สีจาก token สถานะกลาง */
.hr-slot{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:6px 8px;border-radius:var(--r-xs);border:1px solid transparent}
.hr-slot.good{background:var(--ok-bg);border-color:var(--ok);color:var(--ink)}
.hr-slot.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--ink)}
.hr-slot small{font-size:11px;color:var(--muted)}
.hr-slot .hr-btn{margin-top:4px}
.hr-slot-summary{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted)}
.hr-slot-summary strong{color:var(--ink)}
.hr-slot-absent{color:var(--bad)!important;font-weight:700}
/* อบรม (HR เฟส 5): หัวข้อละแถว — เนื้อหาซ้าย · สถานะ + ปุ่มเข้าใจ/ไม่เข้าใจขวา */
.hr-train{list-style:none;margin:0;padding:0 18px}
.hr-train li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.hr-train li:first-child{border-top:0}
.hr-train li>div:first-child{flex:1 1 280px;min-width:0}
.hr-train p{margin:4px 0 8px;color:var(--muted);font-size:13px}
.hr-train small{display:block;color:var(--bad);font-size:12px;margin-top:6px}
.hr-train-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hr-loading{padding:64px 20px;text-align:center;color:var(--muted);font-size:13px}
.hr-alert{font-size:13px;padding:12px 15px;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn);
  border-radius:var(--r-sm);margin:0 0 20px;line-height:1.7}
.hr-alert.danger{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.hr-alert.info{color:var(--accent-ink);border-color:var(--accent-line);background:var(--tint)}

/* ==========================================================================
   รายการ · คู่คำอธิบาย · ขั้นตอน · ตัวเลขรายบรรทัด · แถบแบ่งช่อง
   ========================================================================== */
.hr-filter{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);background:var(--card);
  font-size:13px;min-height:34px;max-width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.hr-filter:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-fade)}
.hr-search{min-width:240px}
.hr-subtle{color:var(--muted);font-size:12px}
.hr-app .hr-link{color:var(--accent-ink);text-decoration:none;font-weight:700}
.hr-app .hr-link:hover{text-decoration:underline}
.hr-list{list-style:none;margin:0;padding:0}
.hr-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;
  border-bottom:1px solid var(--line-soft);padding:15px 20px;font-size:13px}
.hr-list li:last-child{border-bottom:0}
.hr-list li strong{display:block;font-size:13px;color:var(--ink)}
.hr-list li p{color:var(--muted);font-size:12px;margin:5px 0}
.hr-definition{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hr-definition dt{font-size:11px;color:var(--muted);margin:0 0 4px}
.hr-definition dd{font-size:13px;margin:0;overflow-wrap:anywhere;color:var(--ink)}
.hr-step{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:13px}
.hr-step-number{width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent-ink);
  display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:700}
.hr-progress{height:6px;background:var(--surf3);border-radius:var(--r-pill);overflow:hidden;margin:12px 0}
.hr-progress>span{height:100%;display:block;background:var(--accent);max-width:100%;transition:width var(--t-slow) var(--ease)}
.hr-metric-lines{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.hr-metric-lines>div{border-left:1px solid var(--line);padding-left:15px}
.hr-metric-lines strong{display:block;font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hr-metric-lines small{font-size:11px;color:var(--muted)}
/* แถบแบ่งช่อง — รางเข้ม ช่องที่เลือกเป็นการ์ดยกขึ้น เหมือน .seg ของหน้ารายการ */
.hr-pills{display:flex;gap:3px;align-items:center;border:1px solid var(--line);padding:3px;
  background:var(--surf3);border-radius:var(--r-sm)}
.hr-pills button{border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:var(--r-xs);
  font-size:12px;font-weight:700;transition:background var(--t-fast),color var(--t-fast)}
.hr-pills button:hover{color:var(--ink)}
.hr-pills button.active{background:var(--card);color:var(--ink);box-shadow:var(--e1)}
/* ตั้งเวลาทำงานให้ทีม (2569-10-08): รายการต้องแก้ · เตือนพื้นที่หมดอายุพร้อมปุ่มแก้ · ชิปวันใช้งานของพื้นที่ */
/* ปฏิทินจองคิวช่าง: ป้าย "เช็คอินแล้ว" เมื่อหัวหน้าหน้างานเช็คอินช่างให้ (2569-10-08 · ช่อง b.call ของ week-slot-grid) */
.hr-app .wsg-booked .wsg-call{display:inline-block;margin-top:3px;padding:0 5px;border-radius:var(--r-pill);font-size:10px;font-weight:700;line-height:1.5;background:var(--ok-bg);color:var(--ok)}
.hr-planner-fixes ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.hr-planner-fixes small{color:inherit;opacity:.8}
.hr-planner-location-alert{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0 0}
.hr-planner-choice small .hr-chip{font-style:normal;margin-left:4px}
/* แถบรอบจ่ายของใบค่าแรง (2569-10-07) — แคปซูล .hr-pills + จำนวนคนในรอบ · รายวันมีช่องเลือกวันด้านขวา */
.hr-cycle-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line)}
.hr-cycle-tabs{flex-wrap:wrap}
.hr-cycle-tabs button{display:inline-flex;align-items:center;gap:6px}
.hr-cycle-count{font-size:11px;font-weight:600;opacity:.75}
.hr-cycle-head .hr-cycle-day{margin:0;align-items:flex-end}
.hr-cycle-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ==========================================================================
   กล่องซ้อน (dialog) — ความลึกและขอบมนชุดเดียวกับ .sheet ของหน้าอื่น
   ========================================================================== */
.hr-dialog{width:min(700px,calc(100vw - 32px));max-height:90vh;padding:0;overflow:auto;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:var(--r-lg);box-shadow:0 24px 70px var(--sh-xl)}
.hr-dialog::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}
/* เพิ่มช่าง/คนงาน: ข้อมูลหลัก → หมวดหน้าที่ → ค่าแรง โดยซ่อนตัวเลือกที่ใช้ไม่บ่อย */
.hr-dialog.is-tech-create{width:min(780px,calc(100vw - 24px))}
.hr-tech-create{display:grid;gap:18px;font-size:15px;line-height:1.6}
.hr-tech-create-section{min-width:0;border:0;padding:0;margin:0}
.hr-tech-create-section h3,.hr-tech-create-section legend{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 12px;font-size:17px;font-weight:700}
.hr-tech-create-number{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--tint);color:var(--accent);font-size:14px}
.hr-tech-create .hr-field{font-size:14px;gap:7px}
.hr-tech-create .hr-form-grid{gap:12px}
.hr-tech-create .hr-field input,.hr-tech-create .hr-field select{min-height:44px;font-size:16px;padding:10px 12px}
.hr-tech-create input::placeholder{font-size:14px;color:var(--muted);opacity:1}
.hr-tech-create-hint{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.hr-tech-create-optional{font-size:12px;font-weight:400;color:var(--muted);margin-left:auto}
.hr-tech-create-category-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.hr-tech-create-category-head p{margin:0}
.hr-tech-create-count{font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-sm);background:var(--tint);white-space:nowrap}
.hr-tech-create-search{margin-bottom:12px}
.hr-tech-duty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:244px;overflow-y:auto;padding:3px;scroll-padding:4px}
.hr-tech-duty{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-size:14px;background:var(--card);overflow-wrap:anywhere}
.hr-tech-duty input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)}
.hr-tech-duty:has(input:checked){border-color:var(--accent);background:var(--tint);box-shadow:inset 0 0 0 1px var(--accent)}
.hr-tech-duty:has(input:disabled){color:var(--muted);cursor:default;background:var(--surf)}
.hr-tech-duty:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.hr-tech-create-empty{padding:14px 16px;margin:0;border:1px dashed var(--line);border-radius:var(--r-md);font-size:14px;color:var(--muted)}
.hr-tech-create-extra{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md)}
.hr-tech-create-extra summary{padding:12px 16px;cursor:pointer;font-size:14px;font-weight:700}
.hr-tech-create-extra summary small{font-weight:400;color:var(--muted);margin-left:6px;font-size:13px}
.hr-tech-create-extra>div{padding:16px;border-top:1px solid var(--line)}
.hr-dialog.is-tech-create .hr-btn{min-height:44px;font-size:14px}
.hr-dialog.is-tech-create .hr-icon-btn{width:40px;height:40px}
@media(min-width:521px) and (max-width:760px){.hr-tech-duty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){
  .hr-tech-create{gap:24px}
  .hr-tech-duty-grid{grid-template-columns:1fr;max-height:285px}
  .hr-dialog.is-tech-create footer{gap:8px}
  .hr-dialog.is-tech-create footer .primary{flex:1;min-width:0}
}
/* คิวช่าง: รายละเอียด → สถานะ → ค่าแรงเสริม → ยืนยันยกเลิกแยกจากการปิด */
.hr-dialog.is-booking{width:min(680px,calc(100vw - 24px))}
.hr-booking{display:grid;gap:22px;font-size:15px;line-height:1.6}
.hr-booking-summary{padding:18px 20px;background:var(--tint);border:1px solid var(--line);border-radius:var(--r-md)}
.hr-booking-label,.hr-booking-summary dt{font-size:13px;color:var(--muted)}
.hr-booking-summary h3{margin:3px 0 12px;font-size:23px;line-height:1.4;overflow-wrap:anywhere}
.hr-booking-summary dl{display:grid;gap:5px;margin:0}
.hr-booking-summary dl>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px}
.hr-booking-summary dd{margin:0;overflow-wrap:anywhere}
.hr-booking-note{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.hr-booking-status{border:0;padding:0;margin:0;min-width:0}
.hr-booking-status legend{padding:0;font-size:17px;font-weight:700}
.hr-booking-hint{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.hr-booking-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 10px}
.hr-booking-choice{display:flex;align-items:center;gap:9px;padding:13px 12px;min-height:76px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;background:var(--card)}
.hr-booking-choice:has(input:checked){background:var(--tint);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.hr-booking-choice:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.hr-booking-choice input,.hr-booking-rate-option input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)}
.hr-booking-choice strong,.hr-booking-choice small{display:block}
.hr-booking-choice small{font-size:12px;color:var(--muted);font-weight:400}
.hr-booking #hrBookingNote{margin-top:14px;display:block;font-size:14px}
.hr-booking-optional{margin-left:8px;font-size:12px;color:var(--muted);font-weight:400}
.hr-booking .hr-field textarea,.hr-booking .hr-field input{font-size:16px;margin-top:6px;min-height:44px}
.hr-booking .hr-field textarea{min-height:84px;resize:vertical}
.hr-booking-rate{border:1px solid var(--line);border-radius:var(--r-md)}
.hr-booking-rate summary{cursor:pointer;padding:14px 16px;font-weight:700}
.hr-booking-rate summary>span{display:inline-block;vertical-align:middle;margin-left:6px}
.hr-booking-rate summary small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
#hrBookingRates{border-top:1px solid var(--line);padding:8px 16px 16px}
.hr-booking-rate-option{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:14px}
#hrBookingRateInput{margin:6px 0 12px 28px}
.hr-booking-cancel{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.hr-booking-cancel>div:first-child{flex:1;min-width:180px}
.hr-booking-cancel strong{font-size:14px}
.hr-booking-confirm{flex-basis:100%;padding:16px;background:var(--bad-bg);border:1px solid var(--bad-line);border-radius:var(--r-md)}
.hr-booking-confirm p{margin:8px 0 12px;overflow-wrap:anywhere;font-size:14px}
.hr-booking-confirm>.hr-actions{justify-content:flex-end}
.hr-dialog.is-booking .hr-btn{min-height:44px;font-size:14px}
.hr-dialog.is-booking .hr-icon-btn{width:40px;height:40px}
@media(max-width:520px){
  .hr-booking{gap:20px}
  .hr-booking-summary{padding:16px}
  .hr-booking-summary h3{font-size:21px}
  .hr-booking-choices{grid-template-columns:1fr;gap:8px}
  .hr-booking-choice{min-height:58px;padding:10px 14px}
  .hr-booking-choice>span{display:flex;align-items:center;justify-content:space-between;flex:1;gap:8px}
  .hr-booking-cancel{align-items:stretch}
  .hr-booking-cancel>button{width:100%}
  .hr-dialog.is-booking footer{gap:8px}
  .hr-dialog.is-booking footer .primary{flex:1;min-width:0}
}
.hr-tech-dialog{width:min(1240px,calc(100vw - 32px));overflow:hidden}
.hr-tech-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--card)}
.hr-tech-dialog-body{padding:20px;max-height:calc(90vh - 78px);overflow:auto;overscroll-behavior:contain}
.hr-tech-dialog .hr-card-head{padding:0 0 16px;flex-wrap:wrap}
.hr-tech-identity{display:flex;align-items:center;gap:16px;min-width:0}
.hr-tech-identity h3{overflow-wrap:anywhere}
.hr-tech-photo{width:112px;flex:0 0 112px;display:grid;justify-items:center;gap:7px}
.hr-tech-photo-frame{width:96px;height:112px;border:1px solid var(--line);border-radius:10px;background:var(--surf);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:12px;text-align:center}
.hr-tech-photo-frame img{width:100%;height:100%;object-fit:cover}
.hr-tech-photo-frame img[hidden],.hr-tech-photo-frame span[hidden]{display:none}
.hr-tech-photo small{font-size:10px;line-height:1.4;text-align:center;color:var(--muted)}
.hr-tech-dialog .hr-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
@media(max-width:600px){.hr-tech-dialog-body{padding:12px}.hr-tech-dialog-head{padding:12px}.hr-tech-dialog .hr-card-grid{grid-template-columns:minmax(0,1fr)}}
/* หน้าต่างดูไฟล์ (สลิปโอน/สลิปเงินเดือน/PDF — 2569-10-07): กว้างกว่าฟอร์ม · รูปพอดีจอ · PDF สูงเต็มหน้าต่าง */
.hr-dialog.is-viewer{width:min(960px,calc(100vw - 32px))}
.hr-dialog.is-viewer .hr-dialog-body{padding:16px 22px}
.hr-viewer{display:grid;place-items:center;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;min-height:200px}
.hr-viewer-img{display:block;max-width:100%;max-height:68vh;object-fit:contain}
.hr-viewer-frame{display:block;width:100%;height:68vh;border:0;background:var(--card)}
.hr-viewer-acts{justify-content:flex-end;margin-top:12px}
.hr-viewer-acts .hr-btn{gap:6px}
.hr-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.hr-dialog h2{font-size:19px;line-height:1.4;margin:0;color:var(--ink)}
.hr-dialog-body{padding:20px 22px}
.hr-dialog footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:15px 22px;
  border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--card)}
.hr-dialog form{margin:0}
.hr-dialog #dialogError{margin:0 22px 18px}
.hr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hr-field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.hr-field.wide,.hr-form-note{grid-column:1/-1}
.hr-field>span{font-weight:700;color:var(--ink)}
.hr-field small{color:var(--muted);font-size:11px;font-weight:400}
.hr-field input,.hr-field select,.hr-field textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 12px;min-height:38px;color:var(--ink);background:var(--card);font-size:13px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.hr-field input:focus,.hr-field select:focus,.hr-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-fade)}
.hr-field textarea{min-height:90px;resize:vertical}
.hr-field input[type=checkbox]{width:17px;min-height:17px;accent-color:var(--accent)}
.hr-field input[type=file]{padding:8px;font-size:12px}
.hr-form-note{margin:0;color:var(--muted);font-size:12px}
.hr-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;margin:14px 0}
.hr-check input{margin-top:5px;accent-color:var(--accent)}
.hr-evidence{white-space:pre-wrap;background:var(--surf);border:1px solid var(--line-soft);padding:14px;
  border-radius:var(--r-sm);font-size:12px;max-height:330px;overflow:auto}

/* ==========================================================================
   จอกว้าง / จอแคบ — ใช้จุดตัด 1080px ตามมาตรฐานกลางใน ui.js (UI_BREAK.drawer)
   เดิมไฟล์นี้ตั้งเอง 1100px จึงสลับโหมดไม่พร้อมกับหน้าอื่นที่กว้างเท่ากัน
   ========================================================================== */
@media(min-width:1600px){.hr-main{padding-top:40px}.hr-page-head h2{font-size:30px}}
@media(max-width:1080px){
  /* แถบข้าง 196px เดิมเลิกแล้ว — จอ <1280 เป็นลิ้นชักเมนู (บล็อกท้ายไฟล์ · 2569-10-14) */
  .hr-main{padding:24px 20px 56px}
  .hr-stats{gap:10px}
  .hr-stat{padding:17px}
  .hr-grid,.hr-grid.equal{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* แถบแท็บเลื่อนแนวนอนติดบน (เดิม · บลีพ §11 แก้ครั้งที่ 3) เลิกแล้ว — เจ้าของเลือกแถบหัวข้อติดจอ + ลิ้นชักเมนู 2569-10-14 */
  .hr-main{padding:20px 14px 48px}
  .hr-page-head{gap:12px;flex-wrap:wrap;margin-bottom:20px}
  .hr-page-head h2{font-size:23px}
  .hr-page-head p{font-size:12px}
  .hr-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
  .hr-stat{padding:16px}
  .hr-stat strong{font-size:24px}
  .hr-grid{gap:0}
  .hr-panel{margin-bottom:16px}
  .hr-panel-head{padding:14px 16px}
  .hr-panel-body{padding:16px}
  .hr-cycle-head{padding:12px 16px}
  .hr-table th,.hr-table td{padding:12px 14px}
  .hr-table{min-width:570px}
  .hr-toolbar{align-items:stretch}
  .hr-toolbar .hr-search{min-width:0;width:100%}
  .hr-form-grid{grid-template-columns:1fr}
  .hr-dialog header,.hr-dialog-body{padding:18px}
  .hr-dialog footer{padding:13px 18px}
  .hr-dialog h2{font-size:18px}
  .hr-dialog #dialogError{margin:0 18px 16px}
  .hr-definition{gap:14px}
  .hr-list li{padding:14px 16px}
  .hr-metric-lines strong{font-size:19px}
  .hr-metric-lines>div{padding-left:10px}
}
/* ปุ่มและช่องกรอกบนจอสัมผัสต้องกดโดนนิ้ว — มาตรฐานเดียวกับที่ app.css ใช้ */
@media(pointer:coarse){
  .hr-btn,.hr-filter{min-height:40px}
  .hr-btn.small{min-height:34px}
  .hr-icon-btn{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){.hr-app *{scroll-behavior:auto!important;transition:none!important}}

/* ค่าแรงและทรัพย์สิน (HR เฟส 6 · 2569-10-02) — หัวกลุ่มในแบบสรุปบัญชี · พิมพ์เฉพาะแบบสรุปประจำเดือน */
.hr-subhead{margin:var(--sp-4) var(--sp-4) var(--sp-2);font-size:15px;font-weight:700;color:var(--ink)}
@media print{
  body.hr-printing *{visibility:hidden}
  body.hr-printing #payrollMonthly,body.hr-printing #payrollMonthly *{visibility:visible}
  body.hr-printing #payrollMonthly{position:absolute;inset:0 0 auto 0}
  body.hr-printing #payrollMonthly .hr-actions,body.hr-printing #payrollMonthly .hr-btn{display:none}
}

/* ระบบสมัครงาน (HR เฟส 7 · 2569-10-02) */
.hr-recruit-tabs{margin-bottom:var(--sp-4)}
.hr-code{font-family:ui-monospace,Consolas,monospace;font-size:13px;overflow-wrap:anywhere;color:var(--ink)}
.hr-danger-text{color:var(--bad)}
.hr-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin-top:6px}
.hr-check-grid label{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.hr-dialog-actions{margin-top:var(--sp-4)}
.hr-recruit-link{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--sp-4);align-items:start;margin-bottom:var(--sp-4)}
.hr-recruit-qr{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:8px;aspect-ratio:1}
.hr-recruit-qr svg{display:block;width:100%;height:100%}
@media(max-width:640px){.hr-recruit-link{grid-template-columns:minmax(0,1fr)}.hr-recruit-qr{max-width:220px}.hr-check-grid{grid-template-columns:minmax(0,1fr)}}

/* KPI v2 (2569-10-11): พจนานุกรมตัวชี้วัดพับได้ในมุมมอง "สูตรรายแผนก" */
.hr-kpi-dict{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 16px}
.hr-kpi-dict summary{cursor:pointer;font-weight:700;color:var(--navy-text)}
.hr-kpi-dict[open] summary{margin-bottom:10px}
/* Teams use the existing HR dialog and controls. */
.hr-team-manager {display:grid;gap:16px}
.hr-team-row {display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:14px 0}
.hr-team-row small {display:block;margin-top:6px;line-height:1.6}
.hr-team-members {border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}
.hr-team-members>input {width:100%;box-sizing:border-box;min-height:44px;margin:10px 0}
.hr-team-options {max-height:280px;overflow:auto;display:grid;gap:6px}
.hr-team-options label {display:flex;align-items:center;gap:10px;min-height:44px;padding:8px;background:var(--surf2);border-radius:8px}
.hr-team-options label[hidden] {display:none}
.hr-team-options input {width:18px;height:18px;flex-shrink:0}
.hr-team-manager .hr-field input,.hr-team-manager .hr-field select {min-height:44px}
@media(max-width:520px){.hr-team-row{align-items:flex-start;flex-direction:column}.hr-team-row .hr-actions{width:100%}.hr-team-row button{min-height:44px}}

/* ==========================================================================
   ลิ้นชักเมนู hr.html · me.html (responsive + แท็บเล็ต · เจ้าของสั่ง 2569-10-14 · docs/RESPONSIVE-TABLET-UI-SPEC-2569-10-14.md)
   จอ <1280: แถบข้างเลื่อนออกจากซ้าย (ui.js AdaptiveShell แทรกแถบหัวข้อ .dc-sectionbar ใน .hr-main + ฉากหลัง .dc-scrim)
   ผิวแถบหัวข้อ/ฉากหลังอยู่ใน datacenter.css (สองหน้านี้โหลดอยู่แล้ว) · ตัวเลือก (0,3,0) ชนะผิวแถบข้างของ me.css/hr-ui22.css
   ========================================================================== */
@media (max-width:1279px){
  .hr-app .hr-layout{display:block}
  .hr-app .hr-layout>.hr-sidebar{position:fixed;z-index:46;top:0;bottom:0;left:0;width:min(340px,88vw);height:100dvh;max-height:none;min-height:0;margin:0;
    padding:max(22px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    border:0;border-radius:0 22px 22px 0;background:var(--card);box-shadow:var(--e4);overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-104%);visibility:hidden;transition:transform .28s var(--ease),visibility 0s linear .28s}
  body.dc-drawer-open .hr-layout>.hr-sidebar{transform:none;visibility:visible;transition:transform .28s var(--ease),visibility 0s}
  .hr-app .hr-main .dc-sectionbar{margin-bottom:18px}
  /* ลิ้นชัก HR ยาวเกิน 20 หมวด (ผลตรวจ 2569-10-14) → ชิปกลุ่ม 2 คอลัมน์บนสุด + กางเฉพาะกลุ่มที่เลือก (กลไกชิปเดิมของ HRUI.nav)
     กดชิป = สลับกลุ่ม ลิ้นชักไม่ปิด (ui.js ยกเว้น .hr-nav-groups) · กลุ่มเปิดตั้งต้น = กลุ่มของหมวดปัจจุบัน */
  .hr-sidebar #workspaceNav.grouped .hr-nav-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 14px}
  .hr-sidebar #workspaceNav.grouped .hr-nav-chip{min-width:0;padding:5px 10px;white-space:normal;text-align:center}
  .hr-sidebar #workspaceNav.grouped .hr-nav-chip:only-child,.hr-sidebar #workspaceNav.grouped .hr-nav-chip:last-child:nth-child(odd){grid-column:1/-1}
  .hr-sidebar #workspaceNav.grouped .hr-nav-group:not(.open){display:none}
  .hr-sidebar #workspaceNav.grouped .hr-nav-group+.hr-nav-group{margin-top:0}
  .hr-sidebar #workspaceNav.grouped .hr-nav-group-title{display:none}
  /* หัวหน้า HR/me ที่ชื่อซ้ำแถบหัวข้อ (ui.js ติด .dc-vh-same) → ซ่อนคำโปรย + ชื่อจากตา คงคำอธิบายและปุ่ม */
  .hr-page-head.dc-vh-same .hr-eyebrow{display:none}
  .hr-page-head.dc-vh-same h2{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (max-width:1279px) and (prefers-reduced-motion:reduce){
  .hr-app .hr-layout>.hr-sidebar,body.dc-drawer-open .hr-layout>.hr-sidebar{transition:none}
}