:root{
  --violet:#6d28d9; --indigo:#4f46e5; --bg:#f1f5f9; --card:#ffffff; --muted:#64748b;
  --ring:#e9d5ff; --pink:#ec4899; --pink-light:#fde2ef;
  --green:#22c55e; --green-100:#dcfce7; --red:#ef4444; --red-100:#fee2e2;
  --amber:#f59e0b; --amber-100:#fef3c7; --blue:#2563eb; --blue-100:#dbeafe; --purple:#7c3aed;
}
*{box-sizing:border-box}


/* ===== Employee Summary : Layout V2 ===== */
.emp-summary{padding:22px;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(16,24,40,.06)}
.emp-head{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #e5e7eb;text-align:center}
.emp-head .emp-name{font-weight:800;font-size:20px;color:#0f172a}

.emp-grid.v2{
  display:grid; gap:10px; grid-template-columns:1fr; 
}
@media (min-width:900px){ .emp-grid.v2{ grid-template-columns:repeat(5,1fr); } }

/* กล่องข้อมูล */
.emp-item{ 
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:16px;
  padding:14px 16px; min-height:86px; display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
}
.emp-item .k{color:#6b7280;font-weight:700;font-size:13px;margin-bottom:6px}
.emp-item .v{color:#0f172a;font-weight:800;font-size:24px;line-height:1.1}
.emp-item .muted{color:#64748b;font-weight:700;font-size:14px}

/* แถวล่างให้กว้าง 2 คอลัมน์บนเดสก์ท็อป */
@media (min-width:900px){ .emp-item.span-2{ grid-column: span 2; } }

/* แถว slip: select + ปุ่ม */
.slip-row{display:flex;align-items:center;gap:10px;margin-top:2px}
.btn.dark{background:#111827;color:#fff}

/* สีพื้นพาสเทลตามภาพ */
.bg-yellow{background:#fde68a}
.bg-blue  {background:#dbeafe}
.bg-green {background:#dcfce7}
.bg-pink  {background:#ffe4e6}
.bg-gray  {background:#f3f4f6}
.bg-mint  {background:#d1fae5}
.bg-rose  {background:#fee2e2}

/* ปุ่มท้ายการ์ด */
.emp-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.btn{border:none;border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer}
.btn.ghost{background:#eef2f7;color:#111827}
.btn.ghost:hover{background:#e5e7eb}
.btn.red{background:#ef4444;color:#fff}
.btn.red:hover{background:#dc2626}


.btn.red{background:#ef4444;color:#fff}


body{margin:0;background:var(--bg);font:14px/1.6 "Noto Sans Thai",system-ui,sans-serif;color:#0f172a}
.layout{display:flex;min-height:100vh}
.sidebar{width:250px;background:linear-gradient(180deg,var(--violet),var(--indigo));color:#fff;padding:20px}
.brand{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.brand .logo{font-size:22px}
.brand .name{font-weight:700}
.brand .sub{opacity:.85;font-size:12px}
.menu{display:flex;flex-direction:column;gap:6px}
.menu a{color:#fff;text-decoration:none;padding:10px 12px;border-radius:10px;opacity:.92;display:block}
.menu a:hover,.menu a.active{background:rgba(255,255,255,.12);opacity:1}
.main{flex:1;padding:24px;display:flex;flex-direction:column;gap:18px}
.page-head{display:flex;justify-content:space-between;align-items:center}
.page-head h2{margin:0}
.page-head .date{color:var(--muted)}

.quick-tiles{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
@media(min-width:860px){.quick-tiles{grid-template-columns:repeat(6,1fr)}}
.tile{border:none;border-radius:16px;padding:16px 10px;display:flex;justify-content:center;align-items:center;gap:10px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(16,24,40,.12)}
.tile span{font-weight:700}
.tile.purple{background:#8b5cf6}.tile.pink{background:#f43f5e}.tile.green{background:#22c55e}.tile.blue{background:#2563eb}.tile.red{background:#ef4444}.tile.dark{background:#111827}

.card{background:var(--card);border-radius:16px;box-shadow:0 6px 18px rgba(16,24,40,.06);padding:16px}
.card-title{font-weight:600;margin-bottom:8px}
.stats.five{display:grid;grid-template-columns:repeat(1,1fr);gap:12px ; margin-bottom: 24px}
@media(min-width:860px){.stats.five{grid-template-columns:repeat(5,1fr)}}
.k{color:var(--muted);font-size:12px}
.v{font-size:24px;font-weight:800;margin-top:2px}
.text-green{color:var(--green)}.text-red{color:var(--red)}.text-amber{color:var(--amber)}.text-blue{color:var(--blue)}.text-purple{color:var(--purple)}
.stat{display:flex;justify-content:space-between;align-items:center}
.chip{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-weight:700}
.chip.green{background:var(--green-100);color:var(--green)}
.chip.red{background:var(--red-100);color:var(--red)}
.chip.amber{background:var(--amber-100);color:var(--amber)}
.chip.blue{background:var(--blue-100);color:var(--blue)}
.chip.purple{background:#ede9fe;color:#7c3aed}

.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}}
/* ===== Chart sizes on Dashboard ===== */
.grid-2 .card canvas{
  width: 100% !important;
  height: 220px !important;    /* ความสูงหลัก */
  max-height: 220px !important;
  display: block;
}

/* เดสก์ท็อปกว้างมาก ค่อยขยายอีกเล็กน้อย */
@media (min-width: 1280px){
  .grid-2 .card canvas{
    height: 260px !important;
    max-height: 260px !important;
  }
}


.activity{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.activity li{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px}
.activity time{color:var(--muted);font-size:12px;margin-left:6px}

.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1000;justify-content:center;align-items:center;padding:16px}
.modal.show{display:flex}
.modal-content{background:#fff;width:420px;max-width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:16px}
.modal-head.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.icon{border-radius:999px;width:38px;height:38px;display:grid;place-items:center;font-weight:800}
.icon.violet{background:#f3e8ff;color:#7e22ce}
.icon.pink{background:var(--pink-light);color:#ec4899}
.time-box{display:grid;place-items:center;border:1px dashed var(--ring);border-radius:12px;padding:14px;margin:10px 0}
.violet-box{background:#faf5ff;border-color:#f3e8ff}.violet-text{color:#7e22ce}.violet-bg{background:#7e22ce;color:#fff}
.pink-box{background:#fde2ef;border-color:#fde2ef}.pink-text{color:#ec4899}.pink-bg{background:#ec4899;color:#fff}
.date-sm{font-size:12px;color:var(--muted)}
.label{font-weight:600;margin:8px 0 4px;display:block}
.input{width:100%;min-height:42px;border:1px solid #e2e8f0;border-radius:10px;padding:8px}
.input[type="number"]{appearance:textfield}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.btn{border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:700}
.btn.ghost{background:#eef2f7}.btn.ghost:hover{background:#e2e8f0}

/* Logs modal */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px;margin-bottom:8px}
.tab{border:none;border-radius:999px;background:#e5e7eb;color:#111827;padding:8px 10px;font-weight:700;cursor:pointer}
.tab.active{background:#3b82f6;color:#fff}
.log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow:auto}
.log-item{background:#f8fafc;border-radius:14px;padding:10px 12px;position:relative;border:1px solid #e2e8f0}
.log-item .title{font-weight:800;margin:0}
.log-item .subtitle{color:var(--muted);margin-top:4px}
.badge{position:absolute;right:10px;top:10px;border-radius:999px;padding:2px 8px;font-size:12px}
.badge.gray{background:#e5e7eb;color:#111827}
.badge.green{background:#dcfce7;color:#16a34a}
.badge.red{background:#ffe4e6;color:#f43f5e}
.badge.blue{background:#dbeafe;color:#2563eb}
.card-green{border-left:6px solid #16a34a;background:#ecfdf5}
.card-red{border-left:6px solid #f43f5e;background:#fff1f2}
.card-blue{border-left:6px solid #2563eb;background:#eff6ff}
.card-amber{border-left:6px solid #f59e0b;background:#fff7ed}

/* success popup */
.success-card{background:#fff;border:3px solid #22c55e;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:22px 18px;width:320px;max-width:90%;display:flex;flex-direction:column;align-items:center;gap:12px}
.success-icon{width:64px;height:64px;border-radius:999px;background:#dcfce7;color:#16a34a;display:grid;place-items:center;font-size:34px;font-weight:900}
.success-text{font-weight:700;color:#065f46}
.success-ok{background:#22c55e;color:#fff;min-width:120px}


.hidden{display:none !important}

.benefit-head h3{margin:0;font-size:22px}
.benefit-head .muted{color:var(--muted);margin-top:4px}
.benefit-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:860px){.benefit-grid{grid-template-columns:1fr 1fr}}
.benefit-card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.benefit-card h4{margin:0 0 4px 0;font-size:16px}
.benefit-card p{margin:0;color:var(--muted);font-size:13px}


/* Benefit card colorful variations */
.benefit-card:nth-child(1){background:#e0f2fe}
.benefit-card:nth-child(2){background:#fef9c3}
.benefit-card:nth-child(3){background:#dcfce7}
.benefit-card:nth-child(4){background:#fae8ff}
.benefit-card:nth-child(5){background:#fce7f3}
.benefit-card:nth-child(6){background:#ede9fe}
.benefit-card:nth-child(7){background:#fff7ed}
.benefit-card:nth-child(8){background:#f0fdf4}
.benefit-card:nth-child(9){background:#fef2f2}
.benefit-card:nth-child(10){background:#f3e8ff}


/* Benefit colorful variants */
.benefit-head.center{ text-align:center; }
.benefit-grid .benefit-card{position:relative;overflow:hidden}
.benefit-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:16px 0 0 16px;opacity:.9}
.benefit-card.is-blue{background:var(--blue-100)} .benefit-card.is-blue::before{background:var(--blue)}
.benefit-card.is-green{background:var(--green-100)} .benefit-card.is-green::before{background:var(--green)}
.benefit-card.is-amber{background:var(--amber-100)} .benefit-card.is-amber::before{background:var(--amber)}
.benefit-card.is-pink{background:var(--pink-light)} .benefit-card.is-pink::before{background:var(--pink)}
.benefit-card.is-purple{background:#ede9fe} .benefit-card.is-purple::before{background:var(--purple)}


/* ===== Schedule page ===== */
.schedule-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.legend{display:flex;gap:14px;align-items:center;color:var(--muted);font-weight:600}
.legend-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px}
.legend-dot.morning{background:#bbf7d0}
.legend-dot.night{background:#bfdbfe}
.legend-dot.leave{background:#e5e7eb}
.legend-dot.off{background:#fecaca}

.schedule-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.schedule-table th{font-weight:800;color:#334155;text-align:left;padding:8px 10px}
.schedule-table td{background:#f8fafc;border:1px solid #e2e8f0;padding:8px 10px;vertical-align:middle}
.schedule-table td:first-child{border-radius:12px 0 0 12px}
.schedule-table td:last-child{border-radius:0 12px 12px 0}
.schedule-table tr td + td{border-left:none}

.shift-badge{display:inline-block;border-radius:10px;padding:6px 10px;font-weight:700;font-size:12px}
.shift-morning{background:#dcfce7;color:#16a34a}
.shift-night{background:#dbeafe;color:#2563eb}
.shift-leave{background:#e5e7eb;color:#111827}
.shift-off{background:#fee2e2;color:#ef4444}

.emp-name{font-weight:800}
.site-link{color:#4f46e5;text-decoration:underline}

.actions-cell{display:flex;gap:8px;justify-content:center}
.icon-btn{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;background:#f1f5f9}
.icon-btn:hover{background:#e2e8f0}
.icon-btn.edit::before{content:"✎"}
.icon-btn.trash::before{content:"🗑"}

.day-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0}
.day-row{
  display:grid;
  grid-template-columns: 120px 1fr 1fr; /* วันที่ | เว็บ | กะ */
  gap:12px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px dashed #e5e7eb;
}

.day-row:nth-child(odd){ background:#f8fafc; }
.day-row:last-child{ border-bottom:0; }
.date-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:6px 10px;
  font-weight:800;
  color:#0f172a;
  white-space:nowrap;
}
.date-chip .dow{ color:#64748b; font-weight:700; }

/* ให้ select เต็มความกว้างคอลัมน์ */
.day-row .input{ width:100%; }

/* รองรับจอแคบ */
@media (max-width: 720px){
  .day-row{ grid-template-columns: 1fr; }
}
.actions{display:flex;gap:8px;justify-content:flex-end}
.icon-btn{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;background:#f1f5f9}
.icon-btn:hover{background:#e2e8f0}
.icon-btn.edit::before{content:"✎"}
.icon-btn.trash::before{content:"🗑"}
.shift-badge{display:inline-block;border-radius:10px;padding:6px 10px;font-weight:700;font-size:12px}
.shift-morning{background:#dcfce7;color:#16a34a}
.shift-night{background:#dbeafe;color:#2563eb}
.shift-leave{background:#e5e7eb;color:#111827}
.shift-off{background:#fee2e2;color:#ef4444}

/* ===== Monthly schedule ===== */
.month-controls{display:flex;gap:6px;margin-left:10px}
#monthlyTable{overflow:auto}

/* ตารางรายเดือนแบ่ง 1–15 และ 16–สิ้นเดือน */
.month-block{margin:8px 0 16px}
.month-block table{width:100%;border-collapse:separate;border-spacing:0 8px}
.month-block th{font-weight:800;color:#334155;text-align:center;padding:8px 6px;white-space:nowrap}
.month-block td{background:#f8fafc;border:1px solid #e2e8f0;padding:6px 6px;vertical-align:middle;text-align:center}
.month-block .namecol{font-weight:800;text-align:left;padding-left:10px;white-space:nowrap}
.month-block td:first-child{border-radius:12px 0 0 12px}
.month-block td:last-child{border-radius:0 12px 12px 0}

/* เซลล์ในตาราง: ป้ายเว็บ + บรรทัดกะ */
.daycell{display:flex;flex-direction:column;align-items:center;gap:2px}
.site-badge{display:inline-block;border-radius:8px;padding:4px 8px;font-weight:800;font-size:12px;color:#111827}
.shift-label{font-size:12px;font-weight:700;color:#334155}

/* Modal แบบทับหน้าจอ */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
       background:rgba(0,0,0,.35);z-index:9999}
.modal.show{display:flex}
.modal .modal-content.wide{max-width:900px;width:min(900px,95vw)}

/* ฟอร์มรายเดือน */
.month-form-list{max-height:60vh;overflow:auto;margin-top:12px;border:1px solid #e5e7eb;
  border-radius:12px;padding:10px;background:#fff}
.month-form-list .day-item{display:grid;grid-template-columns:60px 120px 1fr;gap:10px;
  align-items:center;padding:6px 0;border-bottom:1px dashed #e5e7eb}
.month-form-list .day-item:last-child{border-bottom:0}

/* สี badge ของเว็บ (ตามที่คุณต้องการ KL, KL88, KL365, KL168, GL, DG88) */
.site-badge{display:inline-block;padding:4px 8px;border-radius:8px;font-weight:700}
.site-kl{background:#eef2ff;color:#5d5b77}
.site-kl88{background:#dbf4ff;color:#87cded}
.site-kl365{background:#fef3c7;color:#e5a2df}
.site-kl168{background:#fde68a;color:#faa96b}
.site-gl{background:#dcfce7;color:#16a34a}
.site-dg88{background:#ffd6e7;color:#fa3993}
.site-off{background:#fee2e2;color:#b91c1c}
.site-leave{background:#e5e7eb;color:#111827}

/* ฟอร์มรายเดือนในป๊อปอัพ */
.month-form-list{max-height:55vh;overflow:auto;margin:12px 0;border:1px solid #e5e7eb;border-radius:10px;padding:8px}
.day-form-row{display:grid;grid-template-columns:70px 1fr 1fr;gap:8px;align-items:center;padding:6px 6px}
.day-form-row:nth-child(odd){background:#f8fafc}
.modal-content.wide{max-width:720px}

.schedule-head{display:flex;justify-content:space-between;align-items:center}
.actions-r{margin-left:auto}
.legend{display:flex;gap:14px;align-items:center;font-weight:600}
.legend-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px}
.legend-dot.morning{background:#bbf7d0}
.legend-dot.night{background:#bfdbfe}
.legend-dot.leave{background:#e5e7eb}
.legend-dot.off{background:#fecaca}


/* --- FIX: ให้ตารางเวรกลับมาเป็น table จริง ๆ --- */
#monthlyTable table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
#monthlyTable thead{ display:table-header-group !important; }
#monthlyTable tbody{ display:table-row-group   !important; }
#monthlyTable tr   { display:table-row         !important; }
#monthlyTable th,
#monthlyTable td   { display:table-cell        !important; vertical-align:top; }

/* สไตล์เซลล์ (คงไว้เพื่อความสวยงาม) */
#monthlyTable th{ text-align:center; padding:10px 6px; }
#monthlyTable td{ padding:6px; }
#monthlyTable .daycell{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 4px;
}

/* ===== Monthly table polish ===== */
#monthlyTable .month-block{margin-top:12px;border-radius:16px;overflow:hidden;}
#monthlyTable table{width:90%;border-collapse:collapse;table-layout:fixed;}
#monthlyTable thead{display:table-header-group!important;}
#monthlyTable tbody{display:table-row-group!important;}
#monthlyTable tr{display:table-row!important;}
#monthlyTable th,#monthlyTable td{display:table-cell!important;}

/* ระยะห่างให้อ่านง่าย */
#monthlyTable th{padding:14px 8px;text-align:center;font-weight:800;color:#1f2937;}
#monthlyTable td{padding:10px 8px;vertical-align:top;border-left:1px solid #eef2f7;}
#monthlyTable tr+tr td{border-top:1px solid #f1f5f9;}
#monthlyTable .namecol{width:140px;min-width:20px;text-align:left;padding-left:16px;border-left:none;}
#monthlyTable .daycell{
  min-height:86px; /* ความสูงแต่ละวัน */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#f8fbff26;border-radius:12px;
}
#monthlyTable .shift-label{font-weight:700;color:#334155;}

/* ===== Action buttons (สีสัน + hover) ===== */
#monthlyTable .actions-cell{width:90px;white-space:nowrap;text-align:center;border-left:1px solid #eef2f7;}
.icon-btn{
  width:30px;height:20px;border:0;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(2,6,23,.06);
  cursor:pointer;margin:0 4px;transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  color:#ffffff; /* สีไอคอน (ใช้ emoji จึงมีสีเองอยู่แล้ว) */
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(2,6,23,.12);}
.icon-btn:active{transform:translateY(0);opacity:.9}

/* ดินสอ = โทนม่วง-ฟ้า / ถังขยะ = โทนชมพู-แดง */
.icon-btn.edit{background:linear-gradient(135deg,#ece4ff,#ece4ff);}
.icon-btn.trash{background:linear-gradient(135deg,#f1304a,#f1304a);}

/* ใส่ไอคอน (สีสัน) ด้วยอิโมจิ */
.icon-btn.edit::before{content:"✏️";font-size:18px;line-height:1;}
.icon-btn.trash::before{content:"🗑️";font-size:18px;line-height:1;}

/* ป้ายเว็บให้เด่นขึ้นเล็กน้อย */
.site-badge{padding:6px 10px;border-radius:10px;font-weight:800;box-shadow:0 1px 0 rgba(15,23,42,.05);}


/* เอาเส้นขอบ/พื้นหลังของคอลัมน์ปุ่มออก */
#monthlyTable tr td:last-child{
  background: transparent !important;
  border-left: none !important;
  border-top: none !important;
  padding: 8px 10px;
  width: 110px;            /* ปรับได้ */
}

/* จัดปุ่มให้วางเรียงสวย ๆ */
#monthlyTable tr td:last-child{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* กันเส้นขอบแนวนอนแทรกใต้ไอคอน */
#monthlyTable tr+tr td:last-child{
  border-top: none !important;
}

/* เอาพื้นหลัง/เส้นขอบในคอลัมน์ปุ่มออก และจัดปุ่มให้สวย */
#monthlyTable td.actions-cell{
  background: transparent !important;
  border-left: none !important;
  border-top: none !important;
  width: 100px;                 /* ปรับได้ */
  padding: 8px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
#monthlyTable tr+tr td.actions-cell{ border-top: none !important; }


/* ===== Actions column: ลบพื้นหลัง/เส้นขอบ/มุมมนของเซลล์ปุ่มทั้งหมด ===== */
#monthlyTable .month-block td.actions-cell,
#monthlyTable .month-block tr td:last-child{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 5px !important;
  width: 120px !important;        /* ปรับได้ */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
}

/* กันเส้นคั่นแนวนอนที่ถูกใส่ให้ทุกเซลล์ในแถวถัดๆ ไป */
#monthlyTable .month-block tr + tr td.actions-cell,
#monthlyTable .month-block tr + tr td:last-child{
  border-top: none !important;
}

/* ให้สีของกะ (shift-*) เติมเต็มทั้งช่อง และตัดมุมมนออก */
#monthlyTable td.daycell{
  border-radius: 0 !important;      /* ไม่โค้งมน */
  background: transparent !important; /* พื้นฐานโปร่งใส สีจะมาจากคลาส shift-* */
  padding: 10px 8px !important;     /* เผื่อระยะข้อความในช่อง */
   
}

/* สีตามกะ (คงไว้/วางต่อจากของเดิมเพื่อให้ทับแน่ ๆ) */
#monthlyTable td.daycell.shift-morning { background:#b9ffb4 !important; border-color:#b9ffb4 !important; } /* เขียวอ่อน */
#monthlyTable td.daycell.shift-night   { background:#63e8f7 !important; border-color:#63e8f7  !important; } /* ฟ้าอ่อน */
#monthlyTable td.daycell.shift-leave   { background:#ffe57c !important; border-color:#ffe57c !important; } /* เหลือง */
#monthlyTable td.daycell.shift-off     { background:#ff3030 !important; border-color:#ff3030!important; } /* แดงอ่อน */

/* เผื่อมีสไตล์อื่นทับในตาราง ให้แน่ใจว่าตัวตารางเป็น collapse แล้ว */
#monthlyTable table { border-collapse: collapse; }

#monthlyTable .site-badge{
  font-weight: 10;   /* เดิมผมตั้งไว้ค่อนข้างหนา 800 ปรับค่าระหว่าง 400–900 ได้ */
}
#monthlyTable .site-badge{
  border: 3px solid rgba(25, 27, 27, 0.1);  /* ปรับเป็น 1px/3px ตามต้องการ */
}

#monthlyTable .site-badge{
  padding: 0px 5px;   /* เพิ่ม/ลด padding เพื่อให้ป้ายหนาขึ้น */
  font-size: 15px;     /* ขนาดตัวอักษร */
  border-radius: 9px; /* มุมมน (อยากเหลี่ยมลดค่านี้) */
}

/* กว้าง/แคบของคอลัมน์วัน */
#monthlyTable thead th:not(.namecol),
#monthlyTable tbody td:not(.namecol):not(.actions-cell){
  width: var(--day-col-w);
  min-width: var(--day-col-w);
  max-width: var(--day-col-w);
}

:root{
  --name-col-w: 260px;   /* คอลัมน์ชื่อ */
  --day-col-w:  70px;    /* ← ความกว้างของคอลัมน์แต่ละวัน */
  --day-cell-h: 30px;    /* ← ความสูงของช่องแต่ละวัน */
}

/* จัดวางพื้นฐานของช่องวันให้เป็น flex อีกครั้ง */
#monthlyTable td.daycell{
  display: flex;                 /* ทับกฎเดิมที่เผลอเป็น block */
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* ถ้าไม่มีเว็บ -> จัดกลางแนวตั้ง/แนวนอน และไม่แสดง badge */
#monthlyTable td.daycell.no-site{
  justify-content: center;
}
#monthlyTable td.daycell.no-site .site-badge{ display:none !important; }
#monthlyTable td.daycell.no-site .shift-label{ margin-top:0 !important; }

/* สีอ้างอิงให้ตรงกับสีเซลล์ที่ใช้อยู่ */
:root{
  --c-morning: #b9ffb4;  /* เขียวจุดกะเช้า */
  --c-night:   #63e8f7;  /* ฟ้าจุดกะดึก   */
  --c-leave:   #ffe57c;  /* เทาจุดลางาน   */
  --c-off:     #ff3030;  /* ชมพูจุดหยุดงาน */
}

/* แถบอธิบาย + ปุ่มอยู่แถวเดียวกัน */
.legend-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  margin-bottom:12px; /* เว้นจากตารางเล็กน้อย */
}

/* กลุ่มรายการ */
.legend{ display:flex; flex-wrap:wrap; gap:18px 20px; }

/* แต่ละรายการ */
.legend-item{
  display:inline-flex; align-items:center; gap:8px;
  color:#334155; font-weight:700;
}

/* จุดสีเล็กๆ */
.legend-item .dot{
  width:10px; height:10px; border-radius:999px;
  display:inline-block; filter:saturate(.95);
  box-shadow:0 0 0 3px rgba(15,23,42,.04) inset;
}
.legend-item .dot-morning{ background:var(--c-morning); }
.legend-item .dot-night  { background:var(--c-night);   }
.legend-item .dot-leave  { background:var(--c-leave);   }
.legend-item .dot-off    { background:var(--c-off);     }

/* จอแคบให้ legend ขึ้นบรรทัดใหม่ใต้ปุ่ม */
@media (max-width: 768px){
  .legend-wrap{ flex-direction:column; align-items:stretch; gap:10px; }
  .legend{ justify-content:flex-start; }
}


/* === Schedule header layout ใหม่ (จัดกลาง + ลูกศรอยู่ใต้หัวข้อ) === */
.schedule-head{
  display:flex;
  flex-direction:column;      /* เรียงลงล่าง */
  align-items:center;         /* จัดกลางแนวนอน */
  gap:10px;
  margin:2px 0 6px;
}

/* หัวข้อเดือนตรงกลาง ตัวใหญ่และมีสี */
.month-title{
  margin:0;
  text-align:center;
  font-size:40px;
  font-weight:800;
  color:var(--indigo);        /* โทนม่วง-น้ำเงิน */
  letter-spacing:.5px;
}

/* แถบลูกศรอยู่ "ใต้" หัวข้อและจัดกลาง */
.month-nav{ display:flex; gap:8px; }
.nav-btn{
  border:0; border-radius:999px;
  background:#eef2ff;
  width:36px; height:36px;
  display:grid; place-items:center;
  font-size:16px; cursor:pointer;
}

/* แถบอธิบาย + ปุ่ม สร้างตารางงาน ให้อยู่บรรทัดเดียวกัน */
.legend-wrap{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  background:#fff; border-radius:16px;
  padding:12px 16px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}

.legend{ display:flex; flex-wrap:wrap; gap:18px 20px; }
.legend-item{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#334155; }
.legend-item .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot-morning{ background:var(--c-morning,#b9ffb4); }
.dot-night{   background:var(--c-night,#63e8f7); }
.dot-leave{   background:var(--c-leave,#ffe57c); }
.dot-off{     background:var(--c-off,#ff3030); }

/* ปุ่มหลักสีม่วง */
.btn-primary{
  border:0; border-radius:12px;
  background:#6d28d9; color:#fff;
  padding:10px 14px; font-weight:800;
  box-shadow:0 6px 18px rgba(2,6,23,.08);
  cursor:pointer;
}
.btn-primary:hover{ filter:brightness(1.05); }

/* สไตล์ข้อความบนป้ายเว็บทั้งหมด */
.site-badge{
  font-weight: 800;          /* ความหนา */
  color: #000000;            /* สีตัวอักษรเริ่มต้น (ปรับได้) */
  letter-spacing: .10px;
}


/* ===== Leave Page ===== */
.stats.three{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:860px){.stats.three{grid-template-columns:repeat(3,1fr)}}

.leave-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px
}
.leave-item{
  display:flex;justify-content:space-between;align-items:center;
  border-radius:12px;padding:12px 14px;border:1px solid #e2e8f0
}
.leave-item.approved{background:#ecfdf5;border-left:6px solid #16a34a}
.leave-item.pending{background:#fff7ed;border-left:6px solid #f59e0b}
.leave-item .title{font-weight:700}
.leave-item .sub{color:#64748b;margin-top:4px}
.leave-badge{
  border-radius:999px;padding:4px 10px;font-weight:700;font-size:12px
}
.leave-badge.green{background:#dcfce7;color:#16a34a}
.leave-badge.amber{background:#fde68a;color:#b45309}


/* ===== Deduct Page (reuse leave-list) ===== */
.leave-item.deducted{
  background:#fef2f2;           /* ชมพูอ่อน */
  border-left:6px solid var(--red);
}
.leave-badge.red{
  background:var(--red-100);
  color:var(--red);
}


/* ===== Report Page ===== */
.stats.four { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:860px){ .stats.four{ grid-template-columns:repeat(4,1fr); } }

.report-filters .filters-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:860px){
  .report-filters .filters-grid{ grid-template-columns:repeat(4,1fr); }
}

.table-scroll { overflow:auto; }

/* ตารางสไตล์การ์ดแถว */
.table { width:100%; border-collapse:separate; border-spacing:0 6px; }
.table th { font-weight:800; color:#334155; text-align:left; padding:10px; }
.table td { background:#f8fafc; border:1px solid #e2e8f0; padding:10px; vertical-align:middle; }
.table tr td:first-child { border-radius:12px 0 0 12px; }
.table tr td:last-child  { border-radius:0 12px 12px 0; }

.table .ok   { color:#16a34a; font-weight:800; }
.table .bad  { color:#f43f5e; font-weight:800; }
.table .muted{ color:#64748b; }

.btn.tiny { padding:6px 10px; border-radius:10px; background:#e5e7eb; }
.btn.tiny:hover { background:#d1d5db; }

/* ===== Report Page (badges & button) ===== */
/* ป้ายสำหรับได้เบี้ยขยัน */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.tag.ok{   /* ได้ = เขียว */
  background:#e7f8ed;   /* เขียวอ่อน */
  color:#16a34a;
}
.tag.bad{  /* ไม่ได้ = แดง */
  background:#fde7ea;   /* แดงอ่อน */
  color:#ef4444;
}


/* ป้ายสำหรับได้เบี้ยขยัน */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.tag.ok{   /* ได้ = เขียว */
  background:#e7f8ed;   /* เขียวอ่อน */
  color:#16a34a;
}
.tag.bad{  /* ไม่ได้ = แดง */
  background:#fde7ea;   /* แดงอ่อน */
  color:#ef4444;
}


.btn.report{
  background:#0f172a; color:#fff; border-radius:12px;
  padding:8px 12px; font-weight:700;
}
.btn.report:hover{ filter:brightness(1.1); }

.cell-center{ text-align:center; }

/* --- Report filters polish / spacing --- */
.report-filters{ padding:16px; }
.report-filters .filters-head{ font-weight:800; color:#0f172a; margin-bottom:10px; }

.report-filters .filters-grid{
  display:grid; gap:14px; grid-template-columns:1fr;
}
@media(min-width:980px){
  .report-filters .filters-grid{
    grid-template-columns: 1.1fr 1fr 1fr 1.4fr; /* เดือน | เว็บ | ตำแหน่ง | ค้นหา */
  }
}

.search-row{
  display:flex; align-items:center; gap:12px;
}
.search-row .input{ flex:1; min-height:44px; border-radius:12px; }
.search-row .btn{ min-height:44px; border-radius:12px; font-weight:700; }

/* ทำหัวตารางให้มีสีอ่อนและระยะห่างสวย */
.table thead th{
  background: linear-gradient(180deg,#f1f5ff,#eaf1ff);
  color:#1f2a44; border:1px solid #e0e7ff;
  padding:12px 14px; font-weight:800; letter-spacing:.2px;
}
.table thead th:first-child{ border-radius:12px 0 0 12px; }
.table thead th:last-child{  border-radius:0 12px 12px 0; }

/* เลย์เอาต์หลักของเพจ (อ้างอิงโทน/ตัวแปรสีเดิม) */
.stats.four{ gap:14px; }

/* ===== Report: big title ===== */
.report-title{
  display:flex; align-items:center; gap:10px;
  font-size:24px; font-weight:800; color:#0f172a;
  line-height:1.25; margin-bottom:6px;
}
.report-title::before{
  content:""; width:10px; height:10px; border-radius:999px;
  background:linear-gradient(135deg,#6366f1,#22c55e);
  box-shadow:0 0 0 5px #eef2ff;   /* วงแหวนอ่อน ๆ */
}

/* ===== Report: table header look ===== */
.report-table{ border-collapse:separate; border-spacing:0 10px; } /* แถวโปร่งขึ้น */
.report-table thead th{
  background:linear-gradient(180deg,#f3f6ff 0%,#eaf1ff 100%);
  color:#1f2a44; border:1px solid #dbe4ff;
  padding:14px 16px; font-weight:800; letter-spacing:.2px;
  position:sticky; top:0; z-index:2;  /* เลื่อนแล้วหัวติดบน */
}
.report-table thead th:first-child{ border-radius:14px 0 0 14px; }
.report-table thead th:last-child { border-radius:0 14px 14px 0; }

/* ===== Report: table body look ===== */
.report-table td{
  background:#fbfdff; border:1px solid #e6eefc; padding:12px 14px;
  transition:background .15s ease, transform .15s ease;
}
.report-table tr td:first-child{ border-radius:12px 0 0 12px; }
.report-table tr td:last-child { border-radius:0 12px 12px 0; }

/* แถวสลับสี + hover */
.report-table tbody tr:nth-child(even) td{ background:#f7faff; }
.report-table tbody tr:hover td{
  background:#eef6ff; transform:translateY(-1px);
}

/* จัดกลางคอลัมน์สถานะ/ปุ่มให้พอดี */
.report-table .cell-center{ text-align:center; }

/* ป้ายสถานะ (ยังใช้ของเดิมได้) ให้ดูเด้งขึ้นเล็กน้อย */
.tag{ box-shadow:0 1px 0 rgba(0,0,0,.03) inset; }

/* ปุ่ม “รายงาน” สีเข้ม – โชว์ชัดแต่ไม่แยงตา */
.btn.report{
  background:#0f172a; color:#fff; border-radius:12px;
  padding:8px 14px; font-weight:700;
}
.btn.report:hover{ filter:brightness(1.08); }

/* ทำหัว "ตัวกรองข้อมูล" ให้ใหญ่และสวยเท่ากับหัว "📋 ตารางสรุปพนักงาน" */
.report-title,
.report-filters .filters-head{
  display:flex; align-items:center; gap:10px;
  font-size:24px; font-weight:800; line-height:1.25;
  color:#0f172a; margin:0 0 12px;
}
.report-title::before,
.report-filters .filters-head::before{
  content:""; width:10px; height:10px; border-radius:999px;
  background:linear-gradient(135deg,#6366f1,#22c55e);
  box-shadow:0 0 0 5px #eef2ff;    /* วงแหวนอ่อน ๆ */
}

/* ระยะห่างระหว่างตัวกรอง ↔ การ์ดสรุป */
#reportPage .report-filters{
  padding:16px;          /* ของเดิมได้ */
  margin-bottom:16px;    /* ✅ เพิ่มช่องว่างด้านล่าง */
}

#reportPage .stats.four{
  margin-top:8px;        /* ช่วยกันไว้ เผื่อธีมอื่น overwrite */
}

/* ถ้าอยากให้มือถือชิดขึ้นนิด */
@media (max-width: 768px){
  #reportPage .report-filters{ margin-bottom:12px; }
  #reportPage .stats.four{ margin-top:6px; }
}

/* Report summary cards – colorful backgrounds per card */
#reportPage .stats.four .card.stat{ transition: background .2s ease; }

/* 1) พนักงานทั้งหมด */
#reportPage .stats.four .card.stat:nth-child(1){ background: var(--blue-100); }

/* 2) ได้เข้างาน */
#reportPage .stats.four .card.stat:nth-child(2){ background: var(--green-100); }

/* 3) ถูกเตือน */
#reportPage .stats.four .card.stat:nth-child(3){ background: var(--amber-100); }

/* 4) OT รวม (ชม.) */
#reportPage .stats.four .card.stat:nth-child(4){ background: #ede9fe; } /* ม่วงอ่อน */


/* ทำหัวข้อบนการ์ดสรุป 4 ใบของหน้า 'รายงาน' ให้หนาและใหญ่ขึ้น */
#reportPage .stats.four .card.stat .k{
  font-size: 15px;         /* ปรับขนาดหัวข้อ */
  font-weight: 800;        /* ทำให้หนา */
  letter-spacing: .2px;    /* ระยะตัวอักษรเล็กน้อย */
  color: #0f172a;          /* เข้มขึ้นให้อ่านชัด */
}

/* ถ้าอยากให้ตัวเลขใหญ่ขึ้นนิดด้วย */
#reportPage .stats.four .card.stat .v{
  font-size: 28px;         /* เดิม 24px */
  font-weight: 800;
}

/* เฉพาะจอใหญ่ ให้หัวข้อ/ตัวเลขเด่นขึ้นอีกนิด */
@media (min-width: 1024px){
  #reportPage .stats.four .card.stat .k{ font-size: 16px; }
  #reportPage .stats.four .card.stat .v{ font-size: 30px; }
}

/* ทำไอคอนในการ์ดสรุป 4 ใบให้ใหญ่ขึ้น */
#reportPage .chip{
  width: 64px;           /* เดิม ~52px */
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  line-height: 1;        /* กันเด้งลงล่าง */
  /* background / color ของแต่ละใบคงใช้คลาส .blue .green .amber .purple ตามเดิม */
}

/* ขยายตัวไอคอน ไม่ว่าจะเป็น emoji, <i>, หรือ svg */
#reportPage .chip,                  /* emoji หรือตัวอักษรธรรมดา */
#reportPage .chip *{                /* เผื่อเป็น <i> หรือ <span> ข้างใน */
  font-size: 28px;                  /* ปรับได้ 26–32 ตามชอบ */
}
#reportPage .chip svg{              /* เผื่อใช้ไอคอนแบบ SVG */
  width: 28px;
  height: 28px;
}

/* ถ้าใช้ Material Icons / FontAwesome */
#reportPage .chip .material-icons,
#reportPage .chip i{
  font-size: 28px;
}

/* ตัวหนาเฉพาะคอลัมน์ที่ 1 = ชื่อพนักงาน */
#reportPage .report-table tbody td:first-child{
  font-weight: 800;
}

.baht{
  font-weight: 700;
  color: var(--red);
}

.text-green { color:#16a34a; font-weight:700; }
.text-red   { color:#ef4444; font-weight:700; }

/* สีสำหรับคอลัมน์ "ได้เบี้ยขยัน" ในตารางรายงาน */
.table td .ok  { color:#16a34a; font-weight:700; }  /* ได้ = เขียว */
.table td .bad { color:#ef4444; font-weight:700; }  /* ไม่ได้ = แดง  */


/* Badge สำหรับคอลัมน์ "ได้เบี้ยขยัน" */
.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:9999px;
  font-weight:700;
  font-size:13px;
  line-height:1;
}
.pill-green{               /* ได้ = เขียว */
  background:#e7f8ed;
  color:#16a34a;
}
.pill-gray{                /* ไม่ได้ = แดง (ตั้งชื่อเดิมไว้แต่ทำเป็นสีแดงตามที่ต้องการ) */
  background:#fde7ea;
  color:#ef4444;
}
/* ปุ่ม "รายงาน" */
.btn-report{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:0;
  border-radius:10px;
  background:#111827;               /* สีพื้นเข้มอ่านง่าย */
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(17,24,39,.15);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn-report::before{
  content:"📄";                       /* ไอคอนเอกสาร */
  font-size:16px;
  line-height:1;
}
.btn-report:hover{
  background:#0f172a;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(17,24,39,.22);
}
.btn-report:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(17,24,39,.18);
}
.btn-report:focus-visible{
  outline:3px solid #a78bfa;         /* วงแหวนโฟกัสม่วงนุ่ม */
  outline-offset:2px;
}
.btn-report:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* จัดให้ปุ่มอยู่กลางเซลล์ในตาราง */
.table td .btn-report{ margin:2px auto; }

/* ---- Dashboard charts sizing ---- */
:root{
  --chart-h-sm: 260px;   /* สูงบนจอเล็ก */
  --chart-h-lg: 340px;   /* สูงบนจอใหญ่ */
}

.card.chart { padding: 16px; }
.chart-box{
  height: var(--chart-h-sm);
}
@media (min-width: 1024px){
  .chart-box{ height: var(--chart-h-lg); }
}
/* ให้แคนวาสขยายเต็มกล่องและยึดตามความสูงที่กำหนด */
.chart-box canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.emp-grid.v2{ grid-template-columns: repeat(5,1fr); gap:5px; } /* 3 ใบ/แถว */
.emp-item{ min-height: 5px; padding: 6px 8px; }              /* สูง-โปร่งขึ้น */
.emp-item .v{ font-size: 16px; }
.emp-item .k{ font-size: 14px; }   

/* แถวล่างแบบ 4 ช่อง */
.emp-grid.v2 .emp-row4{
  grid-column: 1 / -1;          /* ให้กินเต็มความกว้างกริดหลัก */
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;   /* มือถือ 1 คอลัมน์ */
}
@media (min-width: 900px){
  .emp-grid.v2 .emp-row4{
    grid-template-columns: repeat(4, 1fr); /* เดสก์ท็อป 4 คอลัมน์ */
  }
}


/* ปุ่มเฉพาะใน emp-actions */
.emp-actions .btn {
   margin-top: 12px;
   
  padding: 5px 10px;   /* ✅ ขยายขนาดรอบข้อความ */
  font-size: 14px;      /* ✅ ขยายตัวอักษร */
  min-width: 180px;     /* ✅ ให้กว้างขึ้นเท่ากัน */
  height: 40px;         /* ✅ ความสูงคงที่ */
}
.emp-actions{
  
  display:flex;
  
  justify-content:flex-end;
  width:100%;
  margin-top:14px;
  gap:16px;   /* ✅ ปรับระยะห่างระหว่างปุ่ม */
}


{
  position:relative;
}
.emp-actions{
  
  position:absolute;
  bottom:16px;
  right:16px;
}

.emp-actions{
  
  display: flex;
  justify-content: flex-end;  /* ✅ ดันไปขวาสุด */
  align-items:center;
  gap: 12px;                  /* ✅ ระยะห่างระหว่างปุ่ม */
  margin-top: 14px;
  width: 100%;                /* ✅ บังคับให้กินเต็มบล็อก */
  position: relative;         /* ✅ กันไม่ให้ลอยไปทับ element อื่น */
}
/* ปรับขนาดการ์ดสรุป (เช่น คนเข้างาน) */
.stats.five .card.stat{
  min-height: 50px;   /* ✅ ความสูง */
  padding: 10px;       /* ✅ ระยะห่างในกล่อง */
}

/* ปรับตัวเลขใหญ่ขึ้น */
.stats.five .card.stat .v{
  font-size: 20px;     /* จากเดิม 24px */
}

/* ปรับไอคอนกลม (chip) */
.stats.five .card.stat .chip{
  width: 56px;
  height: 40px;
  font-size: 22px;
  
}

.quick-tiles{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;   /* ✅ ระยะห่างจากการ์ดสรุป */
}

.stats.five{
  margin-top: 10px;      /* ✅ หรือจะกำหนดตรงนี้แทนก็ได้ */
}

/* Report page: บังคับย่อการ์ด 4 ใบให้เล็กลง */
#reportPage .stats.four{ gap: 10px; margin: 8px 0 14px; }

#reportPage .stats.four .card.stat{
  min-height: 40px !important;     /* ← ลดความสูง */
  padding: 12px 14px !important;    /* ← ลดระยะขอบใน */
}

#reportPage .stats.four .card.stat .k{
  font-size: 13px !important;       /* ← หัวข้อบน */
}

#reportPage .stats.four .card.stat .v{
  font-size: 26px !important;       /* ← ตัวเลขใหญ่ */
  line-height: 1.1 !important;
}

#reportPage .stats.four .card.stat .chip{
  width: 44px !important;           /* ← วงกลมไอคอนขวา */
  height: 44px !important;
  font-size: 18px !important;
}

/* อนุมัติ */
.approve-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.approve-item{
  display:flex;justify-content:space-between;align-items:center;
  background:#fffbeb;border:1px solid #fde68a;border-radius:12px;
  padding:12px 14px;
}
.approve-item .title{font-weight:800}
.approve-item .meta{color:#64748b;margin-top:4px}
.approve-actions{display:flex;gap:8px}
.btn-approve,.btn-reject{border:none;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer}
.btn-approve{background:#16a34a;color:#fff}
.btn-reject{background:#ef4444;color:#fff}

/* ==== Toggle switch for Admin status ==== */
.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 32px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: #cbd5e1;           /* เทาอ่อน */
  border-radius: 999px;
  transition: background .2s;
}
.slider::before {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  left: 4px; top: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform .2s;
}
.switch input:checked + .slider { background: #22c55e; }         /* เขียว = เปิด */
.switch input:checked + .slider::before { transform: translateX(24px); }

/* ให้ช่องข้อมูลบนการ์ดสรุป (emp-grid v2) เป็น 4 คอลัมน์เท่ากัน */
.emp-grid.v2{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

/* รีเซ็ตไม่ให้การ์ดไหน span หลายคอลัมน์ */
.emp-grid.v2 .emp-item{ grid-column: span 1 !important; }

/* (ถ้าใน HTML ยังมี span-2 อยู่ จะถูกบังคับให้ span 1) */
.emp-grid.v2 .span-2{ grid-column: span 1 !important; }

/* ย่อหน้าจอ: tablet = 2 คอลัมน์, mobile = 1 คอลัมน์ */
@media (max-width: 980px){
  .emp-grid.v2{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px){
  .emp-grid.v2{ grid-template-columns: 1fr; }
}


/* ===== Permissions modal ===== */
.perm-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
@media(min-width:900px){.perm-grid{grid-template-columns:1fr 1fr}}
.perm-card{border:1px solid #e2e8f0;border-radius:16px;padding:14px}
.perm-card h4{margin:0 0 8px 0}
.perm-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.perm-card li{display:flex;align-items:center;gap:8px}
.perm-card.basic{background:#f8fafc}
.perm-card.advanced{background:#fff7ed}
.perm-card.ops{background:#fef3c7}
.perm-card.special{background:#fffde7}
.perm-note{margin-top:10px;padding:10px;border-radius:12px;background:#eef2ff;border:1px dashed #c7d2fe}
.perm-note ul{margin:0;padding-left:16px}

/* ===== Login Page ===== */
.login-bg{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:radial-gradient(1200px 600px at 70% 10%, #6d28d9 0%, #111827 60%);
  padding:24px; z-index:9999;
}
.login-card{
  width: 420px; max-width: 92%;
  background:#fff; border-radius:16px;
  box-shadow:0 20px 50px rgba(2,6,23,.25);
  padding:24px 20px; text-align:center;
}
.login-logo{ width:60px;height:60px;border-radius:999px;
  display:grid;place-items:center;margin:0 auto 8px auto;
  background:#ede9fe; color:#6d28d9; font-size:28px; }
.login-card h1{ margin:6px 0 2px 0; }

#todayLabel { display: none !important; }