:root {
  --color-navy:        #0F172A;
  --color-navy-light:  #1E293B;
  --color-gold:        #F59E0B;
  --color-gold-light:  #FDE68A;
  --status-not-started: #EF4444;
  --status-cleaning:    #F59E0B;
  --status-nearly:      #F97316;
  --status-completed:   #22C55E;
  --status-inspected:   #14B8A6;
  --color-bg:     #F8FAFC;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text:   #0F172A;
  --color-muted:  #64748B;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
* { font-family: 'Inter', sans-serif; }
body { background-color: var(--color-bg); margin: 0; }

/* ── Prevent Alpine cloak flash ── */
[x-cloak] { display: none !important; }

/* ── Sidebar widths ── */
.sidebar-open  { width: 15rem; }
.sidebar-closed { width: 4rem; }

/* ── Login animated grid ── */
.login-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ── Spinning icon for cleaning status ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1.5s linear infinite; display: inline-block; }

/* ── Row flash on poll update ── */
@keyframes rowFlash {
  0%   { background-color: #fef9c3; }
  100% { background-color: transparent; }
}
.row-flash { animation: rowFlash 1.5s ease-out; }

/* ── Progress bar ── */
.progress-bar { transition: width 0.5s ease; }

/* ── Sticky bottom bar for housekeeper ── */
.sticky-bottom { position: sticky; bottom: 0; z-index: 50; }

/* ── Toast notification ── */
.toast {
  padding: .75rem 1.25rem;
  border-radius: .75rem;
  color: white;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  animation: toastIn .25s ease;
  pointer-events: auto;
  max-width: 320px;
}
@keyframes toastIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

/* ── Hide scrollbar utility ── */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;     /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* ── Modal backdrop ── */
.modal-backdrop {
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
}

/* ── Table row hover ── */
tbody tr { transition: background-color .1s ease; }

/* ── Focus ring override ── */
:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ── Sidebar transition helpers ── */
#sidebar, #sa-sidebar, #ha-sidebar {
  transition: transform 0.2s ease, width 0.2s ease;
  will-change: transform, width;
}
/* On desktop, always show sidebar regardless of Alpine state */
@media (min-width: 768px) {
  #sidebar, #sa-sidebar, #ha-sidebar {
    transform: translateX(0) !important;
  }
}
/* Suppress all transitions during initial paint to eliminate flash */
#sidebar.no-transition,
#sa-sidebar.no-transition,
#ha-sidebar.no-transition {
  transition: none !important;
}
/* Ensure x-cloak hides elements that haven't been initialized yet */
[x-cloak] { display: none !important; }