/* /static/css/styles.css */

/* ========== GLOBAL STYLES ========== */
body {
  font-family: Arial, sans-serif;
  margin: 20px auto;
  max-width: fit-content;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

h1, h2, h3 {
  margin: 10px auto;
  text-align: center;
}

:not(:defined) { /* Hide custom elements until registered */
  visibility: hidden;
}

.hidden {
  display: none !important;
}

/* ========== TOP BAR STYLES ========== */
#topBar {
    display: flex;
    align-items: flex-end; /* Stretch items vertically */
    flex-direction: row-reverse;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* (removed) old custom badge styles */

/* ========== Toast notifications (framework-free) ========== */
#toastContainer {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}
.toast {
  min-width: 220px;
  max-width: 380px;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #1f2937;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  animation: slideIn 120ms ease-out;
}
.toast.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.toast.brand   { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.toast.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.toast.danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.toast.neutral { background: #f9fafb; border-color: #e5e7eb; color: #1f2937; }

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

/* Install banner (PWA hint) */
#installBanner.install-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2100;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.install-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}
.install-banner .actions { display: flex; gap: 8px; }

/* Inline alert block for content areas */
.inline-alert {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
}
.inline-alert.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.inline-alert.danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.inline-alert.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* =========== STACK STYLES ========*/
.stack { display: flex; flex-direction: column; gap: 12px; }

/* =========== SCAN SUMMARY STYLES =======*/
#recentScansCard {
  font-weight: bold;
  text-align: center;
  width: 100%;
}

#recentScanValue {
  font-size: 4rem;
}

/* ========== FORM STYLES ========== */
.scan-form {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.scan-form wa-input {
  width: 420px;
  align-items: center;
}

/* ========== GRID STYLES ========== */
main {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.right-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 0;
    flex-shrink: 1;
}
/* ========== BED INFO STYLES ========== */

#bedInfoContent h1 {
  margin-top: 0;
}

#bedInfoContent {
  font-size: x-large;
}

#bedInfo #progressBarText {
  font-weight: bold;
  font-size:large;
}

/* (Removed old summary table wrappers) */

/* ========== SCAN FEED STYLES (wa-card) ========== */
#scanFeedCard {
  display: block;
  /* max-height: 70vh;
  overflow-y: auto; */
}
#scanFeedCard .scan-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
#scanFeedCard .scan-feed-header .spacer { flex: 1 1 auto; }

/* (Removed toggle filters behavior) */

/* Tabulator styling to blend with wa-card */
#scanFeedCard .tabulator { 
  border: none; 
  background: transparent;
  max-height: 70vh;
  overflow-y: auto;
}
#scanFeedCard .tabulator .tabulator-header { border: none; background: transparent; }
#scanFeedCard .tabulator .tabulator-footer { border: none; background: transparent; }
#scanFeedCard .tabulator .tabulator-tableholder { border: none; background: transparent; }
#scanFeedCard .tabulator .tabulator-row:hover { background-color: var(--wa-color-brand-100, #eef2ff) !important; }
#scanFeedCard .tabulator .tabulator-header .tabulator-col:last-child { border-right: none; }
#scanFeedCard .tabulator .tabulator-row .tabulator-cell:last-child { border-right: none; }

/* Ensure Date header filter has stable width without expanding the column */
#scanFeedCard .tabulator .tabulator-col[data-field="timestamp"] .tabulator-header-filter input,
#scanFeedCard .tabulator .tabulator-col[data-field="timestamp"] .tabulator-header-filter wa-input {
  width: 180px;
  max-width: 180px;
  min-width: 180px;
  display: inline-block;
}

/* Summary Tabulator minimal styling (match feed) */
#scanSummary .tabulator { 
  border: none; 
  background: transparent; 
  text-align: center;
  max-height: 70vh;
  overflow-y: auto;
}
#scanSummary .tabulator .tabulator-header { border: none; background: transparent; }
#scanSummary .tabulator .tabulator-header .tabulator-col:last-child { border-right: none; }
#scanSummary .tabulator .tabulator-row .tabulator-cell:last-child { border-right: none; }

/* ========== SCAN FEED DATE INPUT STYLES ========== */
.feed-date-input {
    height: 30px;
    padding: 2px 6px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}

/* (Removed legacy button styles) */


/* (Removed legacy Frappe DataTable styles) */

@media (max-width: 768px) {
    .mobile-hidden { display: none; }
}

/* ========== DELETE ICON STYLES ========== */
.delete-headding {
  color: slategrey;
}

.delete-icon {
  color: #c2c2c2;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.delete-icon:hover {
  color: red;
  transform: scale(1.5);
}

/* Container for delete icon to prevent row expansion */
.delete-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px; /* Fixed width */
  height: 24px; /* Fixed height */
  overflow: hidden; /* Prevents overflow from affecting table size */
}

/* (Removed legacy Frappe DataTable ID column hiding) */

/* ========== ROOM SELECTION STYLES ========== */

/* Center room selection buttons */
.mode-group {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin-top: 40px;
  justify-content: center;
  text-align: center;
}

/* ========== NEW PROD ONLY STYLES ========== */
.prod-only {
    display: none; /* Hide by default */
}

.prod-only.show {
    display: table-cell; /* Show when the 'show' class is added */
}

.prod-only.show.mobile-hidden {
    display: none; /* Hide when both 'show' and 'mobile-hidden' are present */
}

/* Table container inside the card */
/* #scanFeedTable { width: 100%; height: 400px; overflow: auto; }
#summaryTable {width:100%; overflow: auto;} */