/* Custom Styling & Mobile 720p HD Optimization for Klinik Nafila Medika */
/* Brand Color Palette: Biru Medis & Kuning Emas Nafila Medika */

:root {
  --nafila-blue-dark: #1e3a8a;   /* Navy Blue */
  --nafila-blue-primary: #1d4ed8;/* Royal Medical Blue */
  --nafila-blue-light: #eff6ff;  /* Soft Blue */
  --nafila-yellow-gold: #f59e0b; /* Warm Gold Yellow */
  --nafila-yellow-light: #fef3c7;/* Soft Cream Yellow */
  --text-dark: #0f172a;          /* Charcoal Black for maximum contrast */
  --text-muted: #475569;         /* Slate Gray */
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f1f5f9;
  color: var(--text-dark);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Touch targets optimization for 720p HD & Small Mobile Screens */
button, input, select, textarea {
  font-size: 13px;
  min-height: 38px;
}

/* Bottom padding so content doesn't get hidden behind mobile browser chrome */
.content-padding-bottom {
  padding-bottom: 80px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Contrast & Status Badges */
.badge-online {
  background-color: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
  font-weight: 700;
}
.badge-offline {
  background-color: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
  font-weight: 700;
}
.badge-pending {
  background-color: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
  font-weight: 700;
}

/* Chat Message Bubbles */
.chat-bubble-patient {
  background-color: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 14px 14px 14px 0px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.chat-bubble-staff {
  background-color: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
  border-radius: 14px 14px 0px 14px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.chat-bubble-bot {
  background-color: #fef9c3;
  color: #713f12;
  border: 1px dashed #facc15;
  border-radius: 14px 14px 14px 0px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Pulse Animation for Live Status */
@keyframes pulse-live {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.live-indicator {
  width: 9px;
  height: 9px;
  background-color: #fbbf24;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-live 2s infinite;
}

/* Thumbnail preview styling */
.img-id-thumbnail {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.img-id-thumbnail:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* High Contrast Header & Buttons */
.nafila-btn-primary {
  background-color: #1d4ed8;
  color: #ffffff;
}
.nafila-btn-primary:hover {
  background-color: #1e40af;
}

.nafila-btn-yellow {
  background-color: #f59e0b;
  color: #0f172a;
  font-weight: 800;
}
.nafila-btn-yellow:hover {
  background-color: #d97706;
}

/* ========================================================================
   MOBILE-FIRST RESPONSIVE: 720p HD Portrait (360px-767px)
   ======================================================================== */

/* Force all text inside cards to never overflow */
.stat-card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card label wrapper: always truncate long text */
[class*="rounded-2xl"] > div > div > .text-\\[11px\\] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: Header button group stacking */
@media (max-width: 767px) {
  /* Header: hide long button text, show icons only */
  .header-btn-text {
    display: none;
  }

  /* Make stat cards scroll horizontal if needed */
  .stat-cards-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  /* Sub-tab buttons: scrollable horizontal */
  .subtab-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .subtab-scroll::-webkit-scrollbar {
    display: none;
  }

  /* WA Chat height responsive */
  .wa-chat-container {
    height: calc(100dvh - 200px) !important;
    min-height: 360px;
  }

  /* RME split screen: stack vertically on mobile */
  .rme-split-grid {
    grid-template-columns: 1fr !important;
  }
  .rme-history-panel {
    height: 400px !important;
  }

  /* Tables: wrap in scrollable container, not just min-width */
  .table-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 500px;
  }

  /* Modal max-height so they scroll */
  .modal-inner {
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* Landscape phone optimization */
@media (max-width: 1023px) and (orientation: landscape) {
  /* Tambah tinggi minimal untuk landscape — HP landscape biasanya 360-414px tinggi */
  #waChatInterfaceView {
    min-height: 340px !important;
  }
  /* Kurangi padding bawah di landscape */
  .content-padding-bottom {
    padding-bottom: 40px;
  }
}

/* Tablet & Desktop Landscape */
@media (min-width: 768px) {
  .stat-cards-mobile {
    display: grid !important;
  }
}

/* Force word break on all table cells so text never overflows */
td, th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

/* Ensure no horizontal scroll on body */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Blinking Glowing Red Badge for Unread Prescriptions & Registrations */
@keyframes badge-pulse-glow {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7);
  }
  70% {
    transform: scale(1.04);
    box-shadow: 0 0 0 8px rgba(225, 29, 72, 0);
  }
  100% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
  }
}

.badge-blinking-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e11d48;
  color: #ffffff;
  font-weight: 800;
  border-radius: 9999px;
  animation: badge-pulse-glow 1.4s infinite;
}

.card-unread-glow {
  animation: card-blinking-red-pulse 1.2s infinite ease-in-out !important;
  border-left: 5px solid #e11d48 !important;
}

@keyframes card-blinking-red-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.75);
    border-left-color: #e11d48 !important;
    background-color: #fff1f2 !important;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(225, 29, 72, 0.2);
    border-left-color: #f43f5e !important;
    background-color: #ffe4e6 !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.75);
    border-left-color: #e11d48 !important;
    background-color: #fff1f2 !important;
  }
}