body{
  font-family:'Noto Sans Thai',sans-serif;
  background:#f4f7fb;
  color:#102a43;
}
.wrapper{
  max-width:100%;
  margin:0 auto;
  padding:12px;
}
.header-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:10px;
}
.header-bar h1{
  font-size:1.6rem;
  margin:0;
}
.subtext{
  font-size:1.5rem;
  color:#6c7a89;
}
.clock-big{
  font-size:5rem;
  font-weight:700;
  letter-spacing:4px;
  color:#005fb8;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #d0d7e2;
  font-size:0.8rem;
  margin-right:4px;
  cursor:pointer;
  background:#ffffff;
}
.chip-active{
  background:#005fb8;
  color:#ffffff;
  border-color:#005fb8;
}
.card-panel{
  background:#ffffff;
  border-radius:18px;
  padding:12px 16px;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
  margin-bottom:4px;
}
.section-header h5{
  font-size: 1.5rem;
  font-weight: 600;
  margin:0;
}
.badge-total{
  background:#eef1f7;
  color:#4b5d73;
  border-radius:999px;
  padding:3px 9px;
  font-size:0.8rem;
}
.table thead th{
  background:#eef1f6;
  font-weight:600;
  border-bottom:0;
  font-size:1.5rem;
}
.table tbody td{
  font-size:1.4rem;
}
.table tbody tr:nth-child(even){
  background:#fafbff;
}
.status-in{
  color:#0f9d58;
  font-weight:600;
}
.status-out{
  color:#d93025;
  font-weight:600;
}
.group-title{
  border-left:4px solid #005fb8;
  padding-left:8px;
}

.recent-fullname {
    width: 60%;
    display: inline-block;
    text-align: center;
}
.recent-timestamp {
    width: 38%;
    display: inline-block;
    text-align: right;
}
.recent-status {
    width: 60%;
    display: inline-block;
    text-align: center;
}
.recent-location {
    width: 39%;
    display: inline-block;
    text-align: right;
}
.last-scan {
    padding: 18px;
    border-bottom: 2px solid #eee;
    margin-bottom: 12px;
    border-radius: 16px;
}
.last-scan.status-out {
    background-color: #EF4444;
    color: white;
}
.last-scan.status-in {
    background-color: #3ce36e;
    color: white;
}
/* เผื่อยังไม่มีใน style.css ใส่ไว้ที่นี่เลย */
.status-in{
  color:#0f9d58;
  font-weight:600;
}
.status-out{
  color:#d93025;
  font-weight:600;
}
.row-in{
  background:#e6f4ea !important;
}
.row-out{
  background:#fde7e9 !important;
}
.highlight-new{
  animation: highlightFade 0.8s ease-out;
}
.center {
    margin: 30px auto;
    width: 30%;
    border: 3px solid #73AD21;
    padding: 10px;
}
.logo-login {
    text-align: center;
    margin-bottom: 20px;
}
/* ปุ่มไซเรนลอยมุมขวา */
.emergency-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1050;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: #dc3545;
  box-shadow: 0 0 15px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}
.emergency-fab span {
  font-size: 32px;
  line-height: 1;
}
.emergency-fab:hover {
  box-shadow: 0 0 20px rgba(0,0,0,.45);
}
.emergency-fab.active {
  background: #ff9800;
  animation: emergency-pulse 1s infinite;
}
@keyframes emergency-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,152,0,.7); }
  70%  { box-shadow: 0 0 0 16px rgba(255,152,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,152,0,0); }
}

/* ไฮไลต์แถวใหม่ */
.highlight-new {
  animation: highlightNew 0.8s ease-out;
}
@keyframes highlightNew {
  0%   { background-color: #fff3cd; }
  100% { background-color: inherit; }
}
@keyframes highlightFade {
  0%   { background-color:#fff3cd; }
  100% { background-color:inherit; }
}
@media (max-width:768px){
  .wrapper{padding:8px;}
  .header-bar{flex-direction:column; align-items:flex-start; gap:4px;}
  .clock-big{font-size:1.8rem;}
}