@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-app: #f4f5f7;
  --bg-card: #ffffff;
  --bg-hover: #f9fafb;
  --border-color: #e2e8f0;
  --border-focus: #3b82f6;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  
  --accent-tech: #0f52ba; /* Sapphire Tech Blue */
  --accent-hover: #083c90;
  --accent-green: #10b981;
  --accent-red: #ef4444;
  
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

  /* The app's usable width. Stays at the phone-sized floor (450px) on any
     viewport narrower than ~480px (real phones, portrait and most
     landscape), then scales up with the viewport so tablets and wider
     screens actually use their lateral space, capped so it never turns
     into an absurdly stretched single column on a desktop monitor. */
  --app-max-width: clamp(450px, 94vw, 980px);
}

/* Base resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0 !important; /* Strict rectangular requirement */
}

body {
  font-family: var(--font-sans);
  background-color: #cbd5e1;
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Mobile View Container */
.phone-container {
  width: 100%;
  max-width: var(--app-max-width);
  min-height: 100vh;
  background-color: var(--bg-app);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 0; /* traps the watermark's z-index: -1 within this stacking context */
  display: flex;
  flex-direction: column;
  border-left: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  overflow-x: hidden;
  padding-top: calc(56px + var(--safe-area-inset-top));
  padding-bottom: calc(20px + var(--safe-area-inset-bottom));
}

/* Always-visible brand watermark, regardless of whether the device list is empty */
.app-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  object-fit: contain;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 450px) {
  .phone-container {
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
}

/* Header bar */
header {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: calc(var(--app-max-width) - 2px); /* aligns inside border */
  height: calc(56px + var(--safe-area-inset-top));
  padding-top: var(--safe-area-inset-top);
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 16px;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-logo-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo-section h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.logo-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-tech);
  object-fit: contain;
}

.btn-add-device {
  background-color: var(--accent-tech);
  border: none;
  width: 36px;
  height: 36px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-add-device:hover {
  background-color: var(--accent-hover);
}

.btn-add-device:active {
  background-color: #042960;
}

.btn-add-device svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* Main Dashboard Panel */
main {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
}

.device-count {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background-color: #e2e8f0;
  padding: 2px 6px;
}

.section-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-reorder-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-reorder-toggle:hover {
  color: var(--text-primary);
}

.btn-reorder-toggle svg {
  width: 18px;
  height: 18px;
}

.btn-reorder-toggle.active {
  color: var(--accent-tech);
  background-color: #eaf0fb;
  border-color: var(--accent-tech);
}

/* Device list */
.device-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Rectangular Device Card styles */
.device-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.device-card:hover {
  border-color: #cbd5e1;
  background-color: var(--bg-hover);
}

/* FTT1 temperature reading outside its configured min/max range */
.device-card-alert {
  background-color: #fee2e2;
  border-color: #fca5a5;
}

.device-card-alert:hover {
  background-color: #fecaca;
}

/* While reordering, cards stop navigating on tap and become drag handles
   for their own full area instead - dragging one up/down over its siblings
   reorders the list. */
.device-card.reorder-mode {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.device-card.dragging {
  cursor: grabbing;
  transition: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
  opacity: 0.97;
  z-index: 10;
}

.device-drag-handle {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.device-drag-handle svg {
  width: 18px;
  height: 18px;
}

.device-temp {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.device-status-normal {
  color: var(--accent-green);
  text-transform: uppercase;
}

.device-status-alarm {
  color: var(--accent-red);
  text-transform: uppercase;
}

.device-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.device-icon-container {
  width: 40px;
  height: 40px;
  background-color: #f1f5f9;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-icon-container svg {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.device-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.device-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.device-mac {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}


/* Dialog Modal - Screen Full Overlay Mode inside Phone Container */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-card);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: var(--bg-card);
  border: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8fafc;
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.btn-modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-modal-close:hover {
  color: var(--text-primary);
}

.btn-modal-close svg {
  width: 18px;
  height: 18px;
}

/* Side navigation menu (Account / Log out), slides in from the left */
.side-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.side-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.side-menu-panel {
  width: 78%;
  max-width: 300px;
  height: 100%;
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.side-menu-overlay.active .side-menu-panel {
  transform: translateX(0);
}

.side-menu-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.side-menu-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.side-menu-nav {
  flex: 1;
  padding: 8px 0;
}

.side-menu-footer {
  border-top: 1px solid var(--border-color);
  padding: 8px 0;
  flex-shrink: 0;
}

.side-menu-item {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.side-menu-item:hover {
  background-color: var(--bg-hover);
}

.side-menu-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.side-menu-item-danger {
  color: var(--accent-red);
}

.side-menu-item-danger:hover {
  background-color: rgba(239, 68, 68, 0.05);
}

.btn-modal-back {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-modal-back:hover {
  color: var(--text-primary);
}

.btn-modal-back svg {
  width: 20px;
  height: 20px;
}

.modal-header-spacer {
  width: 28px;
}

/* Tab bar to switch between QR scan and manual entry */
.pairing-tab-bar {
  display: flex;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pairing-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.pairing-tab:hover {
  color: var(--text-primary);
}

.pairing-tab.active {
  color: var(--accent-tech);
  border-bottom-color: var(--accent-tech);
}

.modal-body {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* QR Scanner simulation UI */
.qr-scan-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.qr-scan-instructions {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  text-align: center;
}

.qr-camera-viewport {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  max-width: 320px;
  margin: 0 auto;
  background-color: #0f172a;
  position: relative;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-camera-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: rgba(15, 23, 42, 0.92);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  z-index: 5;
}

.qr-scan-guide {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.qr-scan-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid var(--accent-tech);
}

.qr-scan-corner.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
.qr-scan-corner.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
.qr-scan-corner.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
.qr-scan-corner.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }

.qr-laser-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--accent-red);
  box-shadow: 0 0 8px var(--accent-red);
  animation: scan-move 2.5s infinite linear;
  top: 0;
}

@keyframes scan-move {
  0% { top: 0; }
  50% { top: 100%; }
  100% { top: 0; }
}

/* Confirmation details view styles */
.confirm-details-card {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.confirm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.confirm-detail-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.confirm-detail-value {
  font-weight: 700;
  color: var(--text-primary);
}

.confirm-detail-value.confirm-mac {
  font-family: var(--font-mono);
  color: var(--accent-tech);
}

.confirm-buttons-row {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid #cbd5e1;
  color: var(--text-secondary);
  padding: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: #f1f5f9;
  color: var(--text-primary);
}

/* Form Styles */
.form-group {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.form-input {
  background-color: #f8fafc;
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* 16px minimum: below this, iOS Safari auto-zooms the whole page on focus,
     which visibly resizes the "window" on a mobile-only app like this one. */
  font-size: 16px;
  outline: none;
}

.form-input:focus {
  border-color: var(--border-focus);
  background-color: var(--bg-card);
}

.form-input.mac-input {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.validation-error {
  font-size: 0.72rem;
  color: var(--accent-red);
  margin-top: 2px;
  display: none;
}

.btn-form-submit {
  width: 100%;
  background-color: var(--accent-tech);
  color: #ffffff;
  border: none;
  padding: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-form-submit:hover {
  background-color: var(--accent-hover);
}

.btn-danger {
  width: 100%;
  background-color: transparent;
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
  padding: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background-color: var(--accent-red);
  color: #ffffff;
}

/* Pairing scan screen */
.pairing-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  text-align: center;
  flex: 1;
}

.pairing-loader {
  width: 100%;
  max-width: 280px;
  height: 4px;
  background-color: #f1f5f9;
  overflow: hidden;
  margin: 20px 0;
  border: 1px solid var(--border-color);
}

.pairing-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--accent-tech);
}

.pairing-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.pairing-mac {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-tech);
  margin-top: 4px;
}

.pairing-log {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 8px;
  height: 18px;
}

/* Toast Notifications styling (In-app fallbacks) */
.toast-container {
  position: fixed;
  top: calc(16px + var(--safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: calc(var(--app-max-width) - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background-color: #1e293b; /* Dark charcoal for distinct legibility of serious alerts */
  border-left: 4px solid var(--accent-tech);
  color: #ffffff;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-10px);
  animation: toast-in 0.2s ease forwards;
  transition: opacity 0.25s ease, transform 0.25s ease; /* kept in sync with FADE_MS in app.js */
}

@keyframes toast-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast.toast-exit {
  opacity: 0;
  transform: scale(0.98) translateY(-5px);
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.toast-msg {
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.3;
}

.btn-toast-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -6px -6px -6px 0; /* enlarge the tap target without shifting layout */
}

.btn-toast-close:hover {
  color: #ffffff;
}

.btn-toast-close svg {
  width: 14px;
  height: 14px;
}

.toast.success { border-left-color: var(--accent-green); }
.toast.alert { border-left-color: var(--accent-red); }

/* In-app confirmation dialog (replaces window.confirm, which a bare Android
   WebView will not display without extra native setup) */
.confirm-dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.55);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: confirm-dialog-fade-in 0.15s ease;
}

@keyframes confirm-dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.confirm-dialog-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 20px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.confirm-dialog-message {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  text-align: center;
}

.confirm-dialog-buttons {
  display: flex;
  gap: 8px;
}

.confirm-dialog-buttons button {
  flex: 1;
  width: auto;
}