/* CSS Variables */
:root {
  --bg: #ffffff;
  --ink: #0f172a;
  --muted: #6b7280;
  --panel: #ffffff;
  --line: #e2e8f0;
  --tile: 7rem;
  --gap: 1rem;
  --ready: #76c19e; /* TERSEDIA → hijau muda */
  --running: #fac686; /* SEDANG DIGUNAKAN → oranye */
  --offline: #d9d9d9; /* OFFLINE → abu-abu */
  --primary: #3b82f6; /* Blue primary color */
  --primary-dark: #2563eb; /* Darker blue for hover */
  --primary-rgb: 59, 130, 246; /* RGB values for primary */
  --background: #ffffff;
  --text-primary: #0f172a;
}

/* New Machine Layout Styles */
.machine-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.machine {
  position: relative; /* Required for absolute positioning of badge */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.machine-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
}

.machine-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.machine-status-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.machine-time {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--ink);
}

.machine-brand {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden; /* No scroll untuk TV display */
  width: 100vw;
  height: 100vh;
}

/* styles/main.css (tambahkan) */
#last-updated.is-stale {
  color: #dc2626;
  font-weight: 600;
}

.container {
  width: 1920px;
  height: 1080px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header */
.header {
  position: relative;
  text-align: center;
  margin-bottom: 16px;
}

.header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
}

#last-updated {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--muted);
}

#last-updated.warn {
  color: #d97706;
}

#last-updated.danger {
  color: #dc2626;
}

/* Status Legend Row */
.status-legend-row {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  margin-left: 2rem;
}

.status-legend-row .legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}

.status-legend-row .legend-icon {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.status-legend-row .legend-icon.ready {
  background: var(--ready);
}

.status-legend-row .legend-icon.running {
  background: var(--running);
}

.status-legend-row .legend-icon.offline {
  background: var(--offline);
}

/* Machine Grid */
.machines-section {
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 420px; */
}

.machines-wrap {
  display: grid;
  place-items: center;
}

.parent {
  display: grid;
  grid-template-columns: repeat(14, var(--tile));
  grid-template-rows: repeat(2, var(--tile));
  grid-column-gap: var(--gap);
  grid-row-gap: calc(var(--gap) + 2rem);
  width: calc(14 * var(--tile) + 13 * var(--gap));
  margin-inline: auto;
}

/* Machine tiles - base styling */
.machine {
  width: var(--tile);
  height: var(--tile);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1.1;
  transition: all 150ms ease-in-out;
  cursor: default;
  position: relative;
  overflow: visible; /* Allow badge to be visible outside machine bounds */
}

.machine-status {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}

/* Machine status colors */
.machine.is-ready {
  background: #a8e6cfce;
  border: 2px solid #76c19e;
  color: #0f172a;
}

.machine.is-running {
  background: #ffc685b7;
  border: 2px solid #fac686;
  color: #0f172a;
}

.machine.is-offline {
  background: #d9d9d9;
  border: 2px solid #b8b8b8;
  color: #111;
}

/* Grid positions - sesuai mapping yang diminta */
.div1 {
  grid-area: 2 / 14 / 3 / 15;
} /* D1 paling kanan bawah */
.div2 {
  grid-area: 1 / 14 / 2 / 15;
} /* D2 */
.div3 {
  grid-area: 1 / 11 / 2 / 12;
} /* D3 */
.div4 {
  grid-area: 1 / 10 / 2 / 11;
} /* D4 */
.div5 {
  grid-area: 1 / 9 / 2 / 10;
} /* D5 */
.div6 {
  grid-area: 1 / 8 / 2 / 9;
} /* D6 */
.div7 {
  grid-area: 1 / 7 / 2 / 8;
} /* D7 */
.div8 {
  grid-area: 1 / 6 / 2 / 7;
} /* D8 */
.div9 {
  grid-area: 1 / 5 / 2 / 6;
} /* D9 */
.div10 {
  grid-area: 1 / 4 / 2 / 5;
} /* D10 */
.div11 {
  grid-area: 1 / 3 / 2 / 4;
} /* D11 */
.div12 {
  grid-area: 1 / 2 / 2 / 3;
} /* D12 */
.div13 {
  grid-area: 1 / 1 / 2 / 2;
} /* D13 paling kiri atas */
.div14 {
  grid-area: 2 / 13 / 3 / 14;
} /* W1 */
.div15 {
  grid-area: 2 / 12 / 3 / 13;
} /* W2 */
.div16 {
  grid-area: 2 / 11 / 3 / 12;
} /* W3 */
.div17 {
  grid-area: 2 / 10 / 3 / 11;
} /* W4 */
.div18 {
  grid-area: 2 / 9 / 3 / 10;
} /* W5 */
.div19 {
  grid-area: 2 / 8 / 3 / 9;
} /* W6 */
.div20 {
  grid-area: 2 / 7 / 3 / 8;
} /* W7 */
.div21 {
  grid-area: 2 / 6 / 3 / 7;
} /* W8 */
.div22 {
  grid-area: 2 / 5 / 3 / 6;
} /* W9 */
.div23 {
  grid-area: 2 / 4 / 3 / 5;
} /* W10 */
.div24 {
  grid-area: 2 / 3 / 3 / 4;
} /* W11 */
.div25 {
  grid-area: 2 / 2 / 3 / 3;
} /* W12 */
.div26 {
  grid-area: 2 / 1 / 3 / 2;
} /* W13 paling kiri bawah */

/* Cards Section */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ETA | Summary */
  gap: 2rem;
  align-items: stretch;
  margin-top: 2rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 28px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Scrollable content for ETA card - show 6 items by default */
#etaBody {
  max-height: 360px; /* 6 items × 60px per item */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
}

/* Custom scrollbar for ETA card */
#etaBody::-webkit-scrollbar {
  width: 6px;
}

#etaBody::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#etaBody::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#etaBody::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.card h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: var(--ink);
}

/* ETA Card */
.eta-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.eta-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.2rem;
  background: #b1b5be; /* warna natural, biru muda lembut */
  border-radius: 12px;
  margin-bottom: 1rem;
  color: #020203;
  text-align: center;
}

.eta-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.eta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.2rem;
  border-radius: 8px;
  margin: 0.5rem 0;
  background: #ffffff;
  border: 1px solid #e9ecef;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.2s ease;
}

.eta-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.eta-row:last-child {
  border-bottom: none;
}

.eta-placeholder {
  text-align: center;
  padding: 2rem 0;
  color: var(--muted);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
}

/* New ETA styling */
.eta-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.eta-note {
  font-size: 1rem;
  color: #020203;
  font-weight: 500;
  opacity: 0.95;
}

.eta-priority {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  padding: 1.2rem;
  margin: 0.8rem 0;
  border-left: 5px solid #28a745;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* .eta-priority::before {
  content: "🔥";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.2rem;
} */

.eta-machine {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.eta-label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}

.eta-status {
  font-size: 0.9rem;
  /* color: var(--running); */
  font-weight: 500;
}

.eta-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.eta-duration {
  font-size: 1.4rem;
  font-weight: 700;
  /* color: var(--running); */
}

.eta-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

/* Donut Charts */
.donut-charts {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
}

.donut-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.donut-chart {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    var(--ready) 0deg 0deg,
    var(--running) 0deg 0deg,
    var(--offline) 0deg 0deg,
    var(--line) 0deg 360deg
  );
}

.donut-center {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.donut-number {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

.donut-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

/* Occupation rate text display */
.occupation-text-display {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.occupation-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid var(--running);
}

.occupation-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.occupation-rate {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--running);
}

.occupation-details {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
}

/* Responsive adjustments untuk TV display - HANYA untuk layar 1920px+ */
@media (min-width: 1920px) and (min-height: 1080px) {
  .container {
    transform: scale(calc(100vw / 1920));
    transform-origin: top left;
  }
}

/* Global responsive classes - reset untuk semua screen sizes */
.responsive-0,
.responsive-1,
.responsive-2,
.responsive-3,
.responsive-4,
.responsive-5,
.responsive-6,
.responsive-7,
.responsive-8,
.responsive-9,
.responsive-10,
.responsive-11,
.responsive-12,
.responsive-13,
.responsive-14,
.responsive-15,
.responsive-16,
.responsive-17,
.responsive-18,
.responsive-19,
.responsive-20,
.responsive-21,
.responsive-22,
.responsive-23,
.responsive-24,
.responsive-25 {
  grid-area: auto;
}

/* Hide mobile grids by default (show only on mobile) */
.mobile-grids {
  display: none;
}

/* ===========================================
   RESPONSIVE DESIGN UNTUK DESKTOP/LAPTOP & HP
   =========================================== */

/* Desktop/Laptop (1024px - 1919px) */
@media (max-width: 1919px) and (min-width: 1024px) {
  .container {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    padding: 1.5rem;
    transform: none;
  }

  .header h1 {
    font-size: 2rem;
  }

  #last-updated {
    font-size: 1rem;
  }

  /* Ubah grid layout untuk desktop - lebih compact */
  .parent {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* Reposisi grid items untuk layout desktop yang lebih compact */
  .div1 {
    grid-area: 3 / 8 / 4 / 9;
  } /* D01 */
  .div2 {
    grid-area: 1 / 8 / 2 / 9;
  } /* D02 */
  .div3 {
    grid-area: 1 / 7 / 2 / 8;
  } /* D03 */
  .div4 {
    grid-area: 1 / 6 / 2 / 7;
  } /* D04 */
  .div5 {
    grid-area: 1 / 5 / 2 / 6;
  } /* D05 */
  .div6 {
    grid-area: 1 / 4 / 2 / 5;
  } /* D06 */
  .div7 {
    grid-area: 1 / 3 / 2 / 4;
  } /* D07 */
  .div8 {
    grid-area: 1 / 2 / 2 / 3;
  } /* D08 */
  .div9 {
    grid-area: 1 / 1 / 2 / 2;
  } /* D09 */
  .div10 {
    grid-area: 2 / 1 / 3 / 2;
  } /* D10 */
  .div11 {
    grid-area: 2 / 2 / 3 / 3;
  } /* D11 */
  .div12 {
    grid-area: 2 / 3 / 3 / 4;
  } /* D12 */
  .div13 {
    grid-area: 2 / 4 / 3 / 5;
  } /* D13 */
  .div14 {
    grid-area: 3 / 7 / 4 / 8;
  } /* W01 */
  .div15 {
    grid-area: 3 / 6 / 4 / 7;
  } /* W02 */
  .div16 {
    grid-area: 3 / 5 / 4 / 6;
  } /* W03 */
  .div17 {
    grid-area: 3 / 4 / 4 / 5;
  } /* W04 */
  .div18 {
    grid-area: 3 / 3 / 4 / 4;
  } /* W05 */
  .div19 {
    grid-area: 3 / 2 / 4 / 3;
  } /* W06 */
  .div20 {
    grid-area: 3 / 1 / 4 / 2;
  } /* W07 */
  .div21 {
    grid-area: 2 / 5 / 3 / 6;
  } /* W08 */
  .div22 {
    grid-area: 2 / 6 / 3 / 7;
  } /* W09 */
  .div23 {
    grid-area: 2 / 7 / 3 / 8;
  } /* W10 */
  .div24 {
    grid-area: 2 / 8 / 3 / 9;
  } /* W11 */
  .div25 {
    grid-area: 1 / 9 / 2 / 10;
  } /* W12 */
  .div26 {
    grid-area: 2 / 9 / 3 / 10;
  } /* W13 */

  .machine {
    width: 100%;
    height: 3rem;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  .machine-status {
    position: static;
    transform: none;
    font-size: 0.6rem;
    margin-top: 0.2rem;
  }

  /* New layout responsive styles for desktop */
  .machine-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }

  .machine {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .machine-content {
    height: 100%;
    width: 100%;
  }

  .machine-label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }

  .machine-time {
    font-size: 0.6rem;
  }

  .machine-brand {
    font-size: 0.7rem;
  }

  .cards {
    max-width: 900px;
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .card {
    padding: 1rem;
    min-height: 160px;
  }

  .card h2 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  }

  .eta-row {
    padding: 0.6rem;
    font-size: 0.8rem;
  }

  .eta-label {
    font-size: 0.9rem;
  }

  .eta-duration {
    font-size: 1rem;
  }

  .eta-subtitle {
    font-size: 0.7rem;
  }

  .donut-charts {
    gap: 1rem;
  }

  .donut-chart {
    width: 80px;
    height: 80px;
  }

  .donut-center {
    width: 40px;
    height: 40px;
  }

  .donut-number {
    font-size: 0.9rem;
  }

  .donut-label {
    font-size: 0.8rem;
  }

  /* Scrollable ETA card for desktop - show 6 items by default */
  #etaBody {
    max-height: 300px; /* 6 items × 50px per item for desktop */
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .container {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    padding: 1.5rem;
    transform: none;
  }

  .header {
    margin-bottom: 1rem;
  }

  .header h1 {
    font-size: 2rem;
  }

  #last-updated {
    font-size: 1rem;
    position: static;
    margin-top: 0.5rem;
  }

  .status-legend-row {
    margin-left: 0;
    gap: 1.5rem;
    margin-bottom: 1rem;
  }

  /* Layout tablet - 2 kolom */
  .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Reset semua grid positions untuk tablet */
  .div1,
  .div2,
  .div3,
  .div4,
  .div5,
  .div6,
  .div7,
  .div8,
  .div9,
  .div10,
  .div11,
  .div12,
  .div13,
  .div14,
  .div15,
  .div16,
  .div17,
  .div18,
  .div19,
  .div20,
  .div21,
  .div22,
  .div23,
  .div24,
  .div25,
  .div26 {
    grid-area: auto;
  }

  /* Responsive classes untuk tablet */
  .responsive-0,
  .responsive-1,
  .responsive-2,
  .responsive-3,
  .responsive-4,
  .responsive-5,
  .responsive-6,
  .responsive-7,
  .responsive-8,
  .responsive-9,
  .responsive-10,
  .responsive-11,
  .responsive-12,
  .responsive-13,
  .responsive-14,
  .responsive-15,
  .responsive-16,
  .responsive-17,
  .responsive-18,
  .responsive-19,
  .responsive-20,
  .responsive-21,
  .responsive-22,
  .responsive-23,
  .responsive-24,
  .responsive-25 {
    grid-area: auto;
  }

  .machine {
    width: 100%;
    height: 4rem;
    font-size: 1rem;
  }

  .machine-status {
    position: static;
    transform: none;
    font-size: 0.8rem;
    margin-top: 0.2rem;
  }

  /* Scrollable ETA card for tablet - show 6 items by default */
  #etaBody {
    max-height: 330px; /* 6 items × 55px per item for tablet */
    overflow-y: auto;
    overflow-x: hidden;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 600px;
  }

  .card {
    padding: 1.2rem;
    min-height: 180px;
  }

  .card h2 {
    font-size: 1.3rem;
  }

  .eta-row {
    padding: 0.8rem;
    font-size: 0.9rem;
  }

  .eta-label {
    font-size: 1rem;
  }

  .eta-duration {
    font-size: 1.1rem;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  body {
    overflow: auto; /* Enable scrolling on mobile */
  }

  .container {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    padding: 1rem;
    transform: none;
  }

  .header {
    margin-bottom: 0.8rem;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  #last-updated {
    font-size: 0.9rem;
    position: static;
    margin-top: 0.3rem;
  }

  .status-legend-row {
    margin-left: 0;
    gap: 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .status-legend-row .legend-item {
    font-size: 0.9rem;
  }

  .machines-section {
    min-height: auto;
  }

  /* Layout mobile - 2 kolom untuk grid yang lebih baik */
  .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    grid-template-rows: repeat(1, 1fr);
  }

  /* Reset semua grid positions untuk mobile */
  .div1,
  .div2,
  .div3,
  .div4,
  .div5,
  .div6,
  .div7,
  .div8,
  .div9,
  .div10,
  .div11,
  .div12,
  .div13,
  .div14,
  .div15,
  .div16,
  .div17,
  .div18,
  .div19,
  .div20,
  .div21,
  .div22,
  .div23,
  .div24,
  .div25,
  .div26 {
    grid-area: auto;
  }

  /* Responsive classes untuk mobile */
  .responsive-0,
  .responsive-1,
  .responsive-2,
  .responsive-3,
  .responsive-4,
  .responsive-5,
  .responsive-6,
  .responsive-7,
  .responsive-8,
  .responsive-9,
  .responsive-10,
  .responsive-11,
  .responsive-12,
  .responsive-13,
  .responsive-14,
  .responsive-15,
  .responsive-16,
  .responsive-17,
  .responsive-18,
  .responsive-19,
  .responsive-20,
  .responsive-21,
  .responsive-22,
  .responsive-23,
  .responsive-24,
  .responsive-25 {
    grid-area: auto;
  }

  .machine {
    width: 100%;
    height: 3rem;
    font-size: 0.6rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  .machine-status {
    position: static;
    transform: none;
    font-size: 0.4rem;
    margin-top: 0.2rem;
  }

  /* New layout responsive styles for mobile */
  .machine-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }

  .machine {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .machine-content {
    height: 100%;
    width: 100%;
  }

  .machine-label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }

  .machine-time {
    font-size: 0.6rem;
  }

  .machine-brand {
    font-size: 0.5rem;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 1rem;
  }

  .card {
    padding: 1rem;
    min-height: 160px;
  }

  .card h2 {
    font-size: 1.2rem;
  }

  .eta-row {
    padding: 0.6rem;
    font-size: 0.8rem;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    text-align: center;
  }

  .eta-machine {
    align-items: center;
  }

  .eta-time {
    align-items: center;
  }

  .eta-label {
    font-size: 0.9rem;
  }

  .eta-duration {
    font-size: 1rem;
  }

  .eta-subtitle {
    font-size: 0.7rem;
  }

  /* Scrollable ETA card for mobile - show 6 items by default */
  #etaBody {
    max-height: 300px; /* 6 items × 50px per item for mobile */
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Mobile separate grids */
  .mobile-grids {
    display: block;
  }

  .mobile-grid-section {
    margin-bottom: 2rem;
  }

  .mobile-grid-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--ink);
    text-align: center;
  }

  .mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .donut-charts {
    gap: 1.5rem;
  }

  .donut-chart {
    width: 100px;
    height: 100px;
  }

  .donut-center {
    width: 50px;
    height: 50px;
  }

  .donut-number {
    font-size: 1.1rem;
  }

  .donut-label {
    font-size: 1rem;
  }
}

/* Machine Badge Styles */
.machine-badge {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  color: white !important;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  white-space: nowrap;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 1.5rem;
  text-align: center;
}

/* Badge color variants */
.machine-badge.badge-qr {
  background: #9333ea; /* Purple for QR */
}

.machine-badge.badge-do {
  background: #3b82f6; /* Blue for Drop-off */
}

.machine-badge.badge-qe {
  background: #10b981; /* Green for Employee Quota */
}

.machine-badge.badge-mt {
  background: #f59e0b; /* Orange for Maintenance */
}

.machine-badge.badge-ep {
  background: #ef4444; /* Red for Error Payment */
}

/* Default fallback (if no class specified) */
.machine-badge:not(.badge-qr):not(.badge-do):not(.badge-qe):not(.badge-mt):not(.badge-ep) {
  background: #9333ea; /* Default to QR purple */
}

.machine-badge-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
}

/* Hover states for clickable badges */
.machine-badge-clickable.badge-qr:hover {
  background: #7c3aed; /* Darker purple */
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.machine-badge-clickable.badge-do:hover {
  background: #2563eb; /* Darker blue */
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.machine-badge-clickable.badge-qe:hover {
  background: #059669; /* Darker green */
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.machine-badge-clickable.badge-mt:hover {
  background: #d97706; /* Darker orange */
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.machine-badge-clickable.badge-ep:hover {
  background: #dc2626; /* Darker red */
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Prevent badge hover from affecting card mesin */
.machine-badge {
  pointer-events: auto;
}

.machine:hover .machine-badge {
  /* Badge tetap terlihat saat card di-hover */
}

/* Transaction Tooltip Styles */
.transaction-tooltip {
  position: fixed;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 250px;
  max-width: 400px;
  animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tooltip-content {
  padding: 1rem;
}

.tooltip-header {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.tooltip-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tooltip-value {
  font-size: 0.85rem;
  color: var(--ink);
  word-break: break-word;
}

.tooltip-loading {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  padding: 0.5rem;
}

.tooltip-error {
  font-size: 0.85rem;
  color: #ef4444;
  margin-bottom: 0.5rem;
}