/* ═══════════════════════════════════════════════════════
   NIVHA Collections App — Styles v11.1.0
   Milestone 1: Login + Navigation Shell + Form Mode
   ═══════════════════════════════════════════════════════ */

/* ─── RESET & BASE ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Brand */
  --nivha-teal: #2a8ba3;
  --nivha-teal-dark: #1f6e82;
  --nivha-grey: #6d6e71;
  --nivha-light: #e5e8ea;
  --nivha-green: #77b85e;
  --nivha-dark: #1a1a2e;
  --nivha-error: #d9534f;

  /* Semantic */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-text: #1a1a2e;
  --color-text-muted: #6d6e71;
  --color-green: #28a745;
  --color-amber: #ffc107;
  --color-red: #dc3545;
  --color-blue: #0066cc;
  --color-border: #e5e8ea;

  /* Layout */
  --header-height: 52px;
  --bottom-nav-height: 60px;
  --radius: 10px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --log-width: 380px;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════════════════════ */

.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: 5000;
  overflow-y: auto;
}

/* ── Hero area: teal background with curved bottom ── */
.login-hero {
  position: relative;
  background: linear-gradient(135deg, var(--nivha-teal) 0%, var(--nivha-teal-dark) 100%);
  padding: 56px 24px 80px;
  text-align: center;
  flex-shrink: 0;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .login-hero {
    padding-top: calc(56px + env(safe-area-inset-top));
  }
}

.login-hero-content {
  position: relative;
  z-index: 2;
}

.login-hero-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 40px;
  background: var(--color-bg);
  border-radius: 24px 24px 0 0;
}

.login-brand-logo {
  height: 64px;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

.login-title {
  font-size: 18px;
  color: rgba(255,255,255,0.95);
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.login-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* ── Login body & card ── */
.login-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 24px 24px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--color-surface);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  margin-top: -40px;
  position: relative;
  z-index: 3;
}

/* ── Welcome back banner ── */
.login-welcome-back {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(42, 139, 163, 0.06);
  border: 1px solid rgba(42, 139, 163, 0.12);
  border-radius: 10px;
  margin-bottom: 20px;
}

.welcome-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nivha-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.welcome-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.welcome-greeting {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.welcome-name {
  font-size: 15px;
  color: var(--color-text);
  font-weight: 700;
}

/* ── Form elements ── */
.login-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-label-pin {
  margin-top: 0;
}

.select-wrapper {
  position: relative;
  margin-bottom: 4px;
}

.collector-select {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d6e71' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.collector-select:focus {
  border-color: var(--nivha-teal);
  box-shadow: 0 0 0 3px rgba(42, 139, 163, 0.12);
}

.collector-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Company confirmation ── */
.collector-company {
  font-size: 13px;
  color: var(--nivha-teal);
  font-weight: 500;
  margin: 6px 0 0 2px;
  text-align: left;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

.collector-company.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── PIN section (slides down) ── */
.pin-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease 0.1s, margin-top 0.4s;
  margin-top: 0;
}

.pin-section.visible {
  max-height: 260px;
  opacity: 1;
  margin-top: 20px;
}

.pin-input-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.pin-digit {
  width: 56px;
  height: 64px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.pin-digit:focus {
  border-color: var(--nivha-teal);
  box-shadow: 0 0 0 3px rgba(42, 139, 163, 0.12);
  transform: scale(1.04);
}

.pin-digit.filled {
  border-color: var(--nivha-teal);
  background: rgba(42, 139, 163, 0.04);
}

/* ── Shake animation for wrong PIN ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70% { transform: translateX(6px); }
}

.pin-input-group.shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.pin-digit.error {
  border-color: var(--nivha-error);
  background: rgba(217, 83, 79, 0.04);
}

/* ── Error, loading, forgot PIN ── */
.login-error {
  color: var(--nivha-error);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  min-height: 0;
  text-align: center;
}

.login-btn {
  width: 100%;
  padding: 14px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-btn:not(:disabled):active {
  background: var(--nivha-teal-dark);
}

.login-loading {
  color: var(--nivha-teal);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
  animation: pulse 1.5s infinite;
}

.forgot-pin-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  width: 100%;
  text-align: center;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.forgot-pin-btn:active {
  color: var(--nivha-teal);
}

.login-offline-msg {
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff3cd;
  border-radius: var(--radius);
  border: 1px solid #ffc107;
  max-width: 340px;
}

.login-version {
  font-size: 11px;
  color: var(--color-border);
  text-align: center;
  margin-top: auto;
  padding-top: 16px;
  padding-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════
   LOCK SCREEN
   ═══════════════════════════════════════════════════════ */

.lock-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: 5500;
  overflow-y: auto;
}

.lock-hero {
  background: linear-gradient(135deg, var(--nivha-teal) 0%, var(--nivha-teal-dark) 100%);
  padding: 40px 24px 50px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .lock-hero {
    padding-top: calc(40px + env(safe-area-inset-top));
  }
}

.lock-logo {
  height: 36px;
  width: auto;
  opacity: 0.9;
}

.lock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 24px;
}

.lock-card {
  width: 100%;
  max-width: 340px;
  background: var(--color-surface);
  border-radius: 16px;
  padding: 32px 24px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  margin-top: -24px;
  position: relative;
  z-index: 3;
  text-align: center;
}

.lock-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nivha-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  margin: 0 auto 12px;
}

.lock-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.lock-reason {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

/* Lock screen fade-in animation */
@keyframes lockFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lock-screen:not(.hidden) {
  animation: lockFadeIn 0.25s ease;
}

/* ═══════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════ */
.app-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* ─── APP HEADER ─── */
.app-header {
  background: var(--nivha-teal);
  padding: 0 16px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 100;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .app-header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-height) + env(safe-area-inset-top));
  }
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.app-header-brand {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.header-brand-logo {
  height: 22px;
  width: auto;
}

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

.app-header-status {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}

/* ─── TAB CONTENT ─── */
.tab-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.tab-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ─── PLACEHOLDER SCREENS ─── */
.placeholder-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 48px 24px;
  text-align: center;
}

.placeholder-icon {
  margin-bottom: 20px;
  opacity: 0.6;
}

.placeholder-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.placeholder-sub {
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ─── MORE MENU ─── */
.more-menu {
  padding: 0;
}

.more-collector-info {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--color-border);
}

.more-collector-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.more-collector-company {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.more-list {
  list-style: none;
  padding: 8px 0;
}

.more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.more-item:active {
  background: var(--nivha-light);
}

.more-item svg {
  flex-shrink: 0;
  color: var(--nivha-grey);
}

.more-item span:first-of-type {
  flex: 1;
}

.more-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--nivha-grey);
  background: var(--nivha-light);
  padding: 2px 8px;
  border-radius: 10px;
}

.logout-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 24px auto;
  padding: 14px;
  background: none;
  color: var(--nivha-error);
  border: 2px solid var(--nivha-error);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.logout-btn:active {
  background: var(--nivha-error);
  color: #fff;
}

/* ─── BOTTOM NAV BAR ─── */
.bottom-nav {
  display: flex;
  align-items: stretch;
  height: var(--bottom-nav-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  z-index: 100;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--nivha-grey);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 0;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-width: 0;
}

.nav-tab svg {
  transition: color 0.15s, stroke 0.15s;
}

.nav-tab.active {
  color: var(--nivha-teal);
}

.nav-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--nivha-teal);
  border-radius: 0 0 3px 3px;
}

.nav-tab.active svg {
  stroke: var(--nivha-teal);
}

.nav-tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════
   FORM MODE
   ═══════════════════════════════════════════════════════ */
.form-mode {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: 200;
}

.form-mode.hidden {
  display: none;
}

/* Form-mode header */
.form-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 48px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: 8px;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .form-mode-header {
    padding-top: env(safe-area-inset-top);
    height: calc(48px + env(safe-area-inset-top));
  }
}

.form-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--nivha-teal);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  min-width: 44px;
  min-height: 44px;
}

.form-back-btn:active {
  opacity: 0.7;
}

.form-mode-title {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-mode-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 8px;
  transition: background 0.15s;
}

.form-mode-right:active {
  background: rgba(42, 139, 163, 0.1);
}

.form-mode-right .log-icon {
  stroke: var(--color-text-muted);
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.form-mode-right:active .log-icon,
.form-mode-right.log-active .log-icon {
  opacity: 1;
  stroke: var(--nivha-teal);
}

/* Form pane (iframe container) */
.form-pane {
  flex: 1;
  min-height: 0;
  position: relative;
}

.jotform-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--color-bg);
}

/* ─── POST-SUBMISSION OVERLAY ─── */
.post-submit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.post-submit-overlay.hidden {
  display: none;
}

.post-submit-card {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 36px 24px 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.post-submit-message {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 28px;
  line-height: 1.4;
}

.post-submit-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

.post-submit-btn-primary {
  background: var(--nivha-teal);
  color: #fff;
}

.post-submit-btn-primary:active {
  background: var(--nivha-teal-dark);
}

.post-submit-btn-secondary {
  background: var(--nivha-light);
  color: var(--color-text);
}

.post-submit-btn-secondary:active {
  background: #d0d3d5;
}

/* ─── LEAVE FORM CONFIRMATION ─── */
.leave-form-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 310;
}

.leave-form-overlay.hidden {
  display: none;
}

.leave-form-card {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.leave-form-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.leave-form-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.leave-form-actions {
  display: flex;
  gap: 10px;
}

.leave-form-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.leave-form-btn-danger {
  background: var(--nivha-error);
  color: #fff;
}

.leave-form-btn-danger:active {
  background: #c12e2a;
}

.leave-form-btn-cancel {
  background: var(--nivha-light);
  color: var(--color-text);
}

.leave-form-btn-cancel:active {
  background: #d0d3d5;
}

/* ═══════════════════════════════════════════════════════
   FORM MODE — EXISTING WRAPPER STYLES
   (Sync indicator, connection dot, etc.)
   ═══════════════════════════════════════════════════════ */

/* Connection dot */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.dot-green { background: var(--color-green); }
.dot-amber { background: var(--color-amber); animation: pulse 2s infinite; }
.dot-red { background: var(--color-red); animation: pulse 1.5s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Sync indicator (used in form-mode header) */
.sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sync-indicator.hidden {
  display: none;
}

.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s;
}

.sync-dot.sync-dot-ok { background: var(--color-green); }
.sync-dot.sync-dot-pending { background: var(--color-amber); animation: syncPulse 1.2s ease-in-out infinite; }
.sync-dot.sync-dot-failed { background: var(--color-red); animation: syncPulse 1s ease-in-out infinite; }

@keyframes syncPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.sync-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.sync-label.sync-label-ok { color: var(--color-green); }
.sync-label.sync-label-pending { color: #b8860b; }
.sync-label.sync-label-failed { color: var(--color-red); }

/* ═══════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100% - 32px);
  max-width: 400px;
  pointer-events: none;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .toast-container {
    top: calc(60px + env(safe-area-inset-top));
  }
}

.toast {
  background: var(--color-text);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  pointer-events: auto;
  animation: slideDown 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-success { border-left: 4px solid var(--color-green); }
.toast-warning { border-left: 4px solid var(--color-amber); }
.toast-error { border-left: 4px solid var(--color-red); }
.toast-info { border-left: 4px solid var(--color-blue); }

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

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

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

/* ═══════════════════════════════════════════════════════
   HOME TAB
   ═══════════════════════════════════════════════════════ */
.home-content {
  padding: 20px 16px calc(16px + var(--bottom-nav-height));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── Greeting ─── */
.home-greeting {
  padding: 4px 0;
}

.home-greeting-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.home-greeting-date {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ─── Event Log Button ─── */
.home-event-log-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(42, 139, 163, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, box-shadow 0.2s;
  text-align: left;
  min-height: 44px;
}

.home-event-log-btn:active {
  background: var(--nivha-teal-dark);
  box-shadow: 0 2px 6px rgba(42, 139, 163, 0.2);
}

.home-event-log-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-event-log-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.home-event-log-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.home-event-log-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-top: 8px;
  line-height: 1.3;
}

/* ─── Sync Status (styled as a tappable button) ─── */
.home-sync-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1.5px solid #d0d3d6;
  border-left: 4px solid var(--nivha-teal);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, box-shadow 0.15s;
  min-height: 44px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.home-sync-status:active {
  background: var(--nivha-light);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.home-sync-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.home-sync-text {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-sync-chevron {
  flex-shrink: 0;
  color: var(--nivha-teal);
  width: 20px;
  height: 20px;
}

.sync-dot-inline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.sync-dot-green { background: var(--color-green); }
.sync-dot-amber { background: var(--color-amber); }
.sync-dot-red { background: var(--color-red); }

/* ─── Main Collection Form Card ─── */
.home-form-card {
  display: flex;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
  min-height: 44px;
}

.home-form-card:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.home-form-card-accent {
  width: 5px;
  background: var(--nivha-teal);
  flex-shrink: 0;
}

.home-form-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  flex: 1;
  min-width: 0;
}

.home-form-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-form-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.home-form-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.home-form-card-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
}

.home-form-card-subtitle2 {
  font-size: 13px;
  color: var(--nivha-teal);
  font-weight: 500;
}

.home-form-card-arrow {
  flex-shrink: 0;
}

/* ─── Pre-Checklist Accordion ─── */
.home-checklist {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.home-checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.home-checklist-header:active {
  background: var(--nivha-light);
}

.home-checklist-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.home-checklist-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
  transition: transform 0.3s ease;
}

.home-checklist-chevron.open {
  transform: rotate(180deg);
}

.home-checklist-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.home-checklist-body.open {
  max-height: 300px;
}

.home-checklist-list {
  list-style: none;
  padding: 0 16px 16px;
  margin: 0;
}

.home-checklist-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border);
}

.home-checklist-list li:last-child {
  border-bottom: none;
}

.home-checklist-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nivha-teal);
}

/* ─── GDPR Consent Button ─── */
.home-gdpr-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  min-height: 44px;
  text-align: left;
}

.home-gdpr-btn:active {
  background: var(--nivha-light);
}

.home-gdpr-icon {
  flex-shrink: 0;
  color: var(--nivha-grey);
}

.home-gdpr-btn > span {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.home-gdpr-arrow {
  flex-shrink: 0;
  color: var(--nivha-grey);
}

/* ─── GDPR Language Picker Overlay ─── */
.gdpr-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.gdpr-overlay.hidden {
  display: none;
}

.gdpr-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gdpr-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: 20px 20px 0 0;
  padding: 0 20px 24px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.25s ease-out;
  max-height: 80vh;
  overflow-y: auto;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .gdpr-sheet {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

.gdpr-sheet-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.gdpr-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--nivha-light);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}

.gdpr-close-btn:active {
  background: #d0d3d5;
}

.gdpr-lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gdpr-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  background: var(--nivha-light);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  min-height: 48px;
}

.gdpr-lang-btn:active {
  background: var(--nivha-teal);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════
   CALL-OUT TAB
   ═══════════════════════════════════════════════════════ */

/* ─── Search View ─── */
.callout-search-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--bottom-nav-height);
}

/* ─── Frequent Clients ─── */
.callout-frequent {
  padding: 14px 16px 4px;
  flex-shrink: 0;
}

.callout-frequent.hidden {
  display: none;
}

.callout-frequent-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nivha-grey);
  margin-bottom: 8px;
}

.callout-frequent-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.callout-frequent-list::-webkit-scrollbar {
  display: none;
}

.callout-frequent-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--nivha-teal);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.callout-frequent-pill:active {
  background: var(--nivha-teal);
  color: #fff;
}

.callout-search-bar {
  padding: 16px 16px 0;
  flex-shrink: 0;
}

.callout-search-input-wrap {
  position: relative;
}

.callout-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nivha-grey);
  pointer-events: none;
}

.callout-search-input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 42px;
  font-size: 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.callout-search-input:focus {
  border-color: var(--nivha-teal);
  box-shadow: 0 0 0 3px rgba(42, 139, 163, 0.15);
}

.callout-search-input::placeholder {
  color: var(--nivha-grey);
  font-size: 14px;
}

/* ─── Region Filter Toggle ─── */
.callout-filter-row {
  padding: 12px 16px 0;
  flex-shrink: 0;
}

.callout-filter-toggle {
  display: inline-flex;
  background: var(--nivha-light);
  border-radius: 20px;
  padding: 3px;
}

.callout-filter-pill {
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 17px;
  background: none;
  color: var(--nivha-grey);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}

.callout-filter-pill.active {
  background: var(--color-surface);
  color: var(--nivha-teal);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ─── Results List ─── */
.callout-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 0;
}

.callout-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  font-size: 14px;
  color: var(--nivha-grey);
  animation: pulse 1.5s infinite;
}

.callout-loading.hidden {
  display: none;
}

.callout-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--nivha-grey);
  font-size: 14px;
}

/* ─── Company Card ─── */
.callout-company-card {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
  min-height: 44px;
}

.callout-company-card:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.callout-company-info {
  flex: 1;
  min-width: 0;
}

.callout-company-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.callout-company-meta {
  font-size: 13px;
  color: var(--nivha-grey);
  margin-top: 2px;
}

.callout-company-type {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.callout-company-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
  margin-left: 8px;
}

/* ─── Fallback (generic collection) ─── */
.callout-fallback {
  flex-shrink: 0;
  padding: 8px 16px 16px;
  text-align: center;
}

.callout-generic-btn {
  width: 100%;
  background: var(--color-surface);
  border: 2px solid var(--nivha-teal);
  color: var(--nivha-teal);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 14px;
  border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}

.callout-generic-btn:active {
  background: var(--nivha-teal);
  color: #fff;
}

/* ─── Detail View ─── */
.callout-detail-view {
  padding: 16px;
  padding-bottom: calc(16px + var(--bottom-nav-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.callout-detail-view.hidden {
  display: none;
}

.callout-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--nivha-teal);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  margin-bottom: 16px;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.callout-back-btn:active {
  opacity: 0.7;
}

/* ─── Detail Card ─── */
.callout-detail-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.callout-detail-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.callout-detail-company {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.callout-niv-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--nivha-light);
  color: var(--nivha-teal);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Info Grid ─── */
.callout-info-grid {
  padding: 4px 0;
}

.callout-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

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

.callout-info-label {
  font-size: 13px;
  color: var(--nivha-grey);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 100px;
}

.callout-info-value {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.callout-info-bold {
  font-weight: 700;
  color: var(--nivha-teal);
}

/* ─── Start Collection Button ─── */
.callout-start-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 20px auto;
  padding: 16px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
}

.callout-start-btn:active {
  background: var(--nivha-teal-dark);
}

.callout-start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--nivha-grey);
}

/* ─── Test Type Dropdown Section ─── */
.callout-test-type-section {
  padding: 16px 20px 0;
}

.callout-test-type-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* ─── Alcohol Cut-Off Highlight ─── */
.callout-alcohol-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 20px 0;
  padding: 12px 16px;
  background: #fff3cd;
  border-radius: 8px;
  border: 1px solid #ffc107;
}

.callout-alcohol-highlight.hidden {
  display: none;
}

.callout-alcohol-icon {
  flex-shrink: 0;
}

.callout-alcohol-highlight span {
  font-size: 14px;
  font-weight: 700;
  color: #856404;
}

/* ═══════════════════════════════════════════════════════
   SUBMISSION LOG OVERLAY
   ═══════════════════════════════════════════════════════ */
.submission-log-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 500;
  display: flex;
  flex-direction: column;
}

.submission-log-overlay.hidden {
  display: none;
}

.submission-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 52px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .submission-log-header {
    padding-top: env(safe-area-inset-top);
    height: calc(52px + env(safe-area-inset-top));
  }
}

.submission-log-close {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--nivha-teal);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.submission-log-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.submission-log-clear {
  background: none;
  border: none;
  color: var(--nivha-error);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.submission-log-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  position: relative;
}

.submission-log-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--nivha-grey);
  font-size: 15px;
}

.submission-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.submission-log-entry {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.submission-log-entry-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.submission-log-entry-info {
  flex: 1;
  min-width: 0;
}

.submission-log-entry-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sl-chevron {
  color: var(--nivha-grey);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.submission-log-entry.expanded .sl-chevron {
  transform: rotate(180deg);
}

.submission-log-entry-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submission-log-entry-subtitle {
  font-size: 12px;
  color: var(--nivha-grey);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submission-log-entry-time {
  font-size: 12px;
  color: var(--nivha-grey);
  margin-top: 2px;
}

/* Expandable detail section */
.submission-log-entry-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin-top 0.25s ease, padding-top 0.25s ease;
  margin-top: 0;
  padding-top: 0;
}

.submission-log-entry.expanded .submission-log-entry-details {
  max-height: 300px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--nivha-light);
}

.sl-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 13px;
}

.sl-detail-label {
  color: var(--nivha-grey);
  font-weight: 500;
}

.sl-detail-value {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
}

.sl-status-sent {
  color: var(--nivha-green) !important;
}

.sl-status-failed {
  color: var(--nivha-red) !important;
}

.sl-status-pending {
  color: var(--nivha-amber) !important;
}

.submission-log-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.submission-log-badge-sent {
  background: #d4edda;
  color: #155724;
}

.submission-log-badge-pending {
  background: #fff3cd;
  color: #856404;
}

.submission-log-badge-failed {
  background: #f8d7da;
  color: #721c24;
}

/* ═══════════════════════════════════════════════════════
   LIVE LOG PANEL (form mode)
   ═══════════════════════════════════════════════════════ */

/* (Log toggle button removed — now handled by tapping sync area in header) */

/* Slide-up log panel */
.log-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 240;
  max-height: 60vh;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: logSlideUp 0.25s ease-out;
  overflow: hidden;
}

.log-panel.hidden {
  display: none !important;
}

@keyframes logSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

.log-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.log-panel-actions {
  display: flex;
  gap: 8px;
}

.log-panel-action-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}

.log-panel-action-btn:active {
  background: var(--color-border);
}

/* Log entries container */
.log-entries {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-size: 12px;
  -webkit-overflow-scrolling: touch;
}

.log-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px 8px;
  font-size: 13px;
  line-height: 1.5;
}

/* ─── Mobile compact log entries ─── */
.log-entry-mobile {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
  transition: background 0.15s;
}

.log-entry-mobile:active {
  background: #f0f2f5;
}

.log-entry-mobile:last-child {
  border-bottom: none;
}

.log-entry-mobile.new {
  animation: logFlash 1.5s ease-out;
}

@keyframes logFlash {
  0% { background: #fff3cd; }
  100% { background: transparent; }
}

.log-mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.log-mobile-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.log-mobile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-mobile-count {
  font-size: 11px;
  color: var(--color-text-muted);
}

.log-mobile-time {
  font-size: 10px;
  color: var(--color-text-muted);
  opacity: 0.7;
  margin-left: 4px;
}

.log-mobile-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Status badges */
.log-entry-status {
  font-weight: 700;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.log-status-sent {
  background: #d4edda;
  color: #155724;
}

.log-status-queued {
  background: #fff3cd;
  color: #856404;
}

.log-status-snapshot {
  background: #d1ecf1;
  color: #0c5460;
}

.log-status-recorded {
  background: #e2e3e5;
  color: #383d41;
}

.log-status-submit {
  background: #cce5ff;
  color: #004085;
}

.log-status-info {
  background: #f0f0f0;
  color: #555;
}

/* Sync badges */
.log-sync-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.log-sync-badge.log-sync-ok {
  background: #d4edda;
  color: #155724;
}

.log-sync-badge.log-sync-pending {
  background: #fff3cd;
  color: #856404;
  animation: pulse 2s infinite;
}

.log-sync-badge.log-sync-failed {
  background: #f8d7da;
  color: #721c24;
}

/* Tap-to-expand: field detail hidden by default */
.log-entry-mobile .log-entry-body {
  display: none;
}

.log-entry-mobile.expanded .log-entry-body {
  display: block;
  margin-top: 8px;
}

/* Field list styling */
.log-entry-body.log-field-list {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
  background: #f6f8fa;
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 200px;
  overflow-y: auto;
  word-break: break-word;
  white-space: pre-wrap;
  -webkit-overflow-scrolling: touch;
}

/* Expand chevron indicator */
.log-entry-mobile .log-mobile-row::after {
  content: '\25B6';
  font-size: 8px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.log-entry-mobile.expanded .log-mobile-row::after {
  transform: rotate(90deg);
}

/* ═══════════════════════════════════════════════════════
   PULL-TO-REFRESH
   ═══════════════════════════════════════════════════════ */
.pull-to-refresh-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50px);
  z-index: 50;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

.pull-to-refresh-indicator.visible {
  transform: translateX(-50%) translateY(12px);
  opacity: 1;
}
.pull-to-refresh-indicator.refreshing {
  transform: translateX(-50%) translateY(12px);
  opacity: 1;
}

.ptr-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--nivha-light);
  border-top-color: var(--nivha-teal);
  border-radius: 50%;
}

.pull-to-refresh-indicator.refreshing .ptr-spinner {
  animation: ptrSpin 0.7s linear infinite;
}

@keyframes ptrSpin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════
   EDITABLE DETAIL CARD FIELDS
   ═══════════════════════════════════════════════════════ */

.callout-info-input-wrap {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.callout-editable-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  background: #f8f9fa;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  text-align: right;
}

.callout-editable-input:focus {
  border-color: var(--nivha-teal);
  box-shadow: 0 0 0 2px rgba(42, 139, 163, 0.12);
  background: #fff;
}

.callout-editable-input::placeholder {
  color: var(--nivha-grey);
  font-weight: 400;
}

.callout-input-helper {
  display: block;
  font-size: 11px;
  color: var(--nivha-grey);
  margin-top: 4px;
  font-style: italic;
}

/* ─── Generic collection link under Start button ─── */
.callout-generic-link-wrap {
  text-align: center;
  padding: 0 20px 20px;
}

.callout-generic-link {
  font-size: 13px;
  color: var(--nivha-teal);
  text-decoration: underline;
  font-weight: 500;
}

.callout-generic-link:active {
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════
   SUBMISSION LOG — SEGMENTED TOGGLE + DRAFT CARDS
   ═══════════════════════════════════════════════════════ */

.submission-log-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--color-border);
}

.submission-log-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.submission-log-tab:first-child {
  border-radius: 8px 0 0 8px;
}

.submission-log-tab:last-child {
  border-radius: 0 8px 8px 0;
  border-left: none;
}

.submission-log-tab:nth-child(2):not(:last-child) {
  border-left: none;
  border-radius: 0;
}

.submission-log-tab.active {
  background: var(--nivha-teal);
  color: #fff;
  border-color: var(--nivha-teal);
}

.draft-card {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

.draft-card-info {
  flex: 1;
  min-width: 0;
}

.draft-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-card-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.draft-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.draft-resume-btn {
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}

.draft-delete-btn {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════
   APPOINTMENTS TAB
   ═══════════════════════════════════════════════════════ */

.appt-content {
  padding: 16px 16px calc(16px + var(--bottom-nav-height));
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* ─── Sub-tab pill toggle ─── */
.appt-subtabs {
  display: flex;
  gap: 0;
  background: var(--nivha-light);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}

.appt-subtab {
  flex: 1;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--nivha-grey);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.appt-subtab.active {
  background: var(--color-surface);
  color: var(--nivha-teal);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ─── NI/ROI filter toggle (Testing Events) ─── */
.appt-te-region-row {
  flex-shrink: 0;
}

.appt-te-region-row.hidden {
  display: none;
}

.appt-te-region-toggle {
  display: inline-flex;
  background: var(--nivha-light);
  border-radius: 20px;
  padding: 3px;
}

.appt-te-region-pill {
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 17px;
  background: none;
  color: var(--nivha-grey);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
}

.appt-te-region-pill.active {
  background: var(--color-surface);
  color: var(--nivha-teal);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ─── Filter row flex container ─── */
.appt-te-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ─── My Events toggle button ─── */
.appt-te-my-events-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--nivha-teal);
  border-radius: 17px;
  background: none;
  color: var(--nivha-teal);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 32px;
  white-space: nowrap;
}

.appt-te-my-events-btn.active {
  background: var(--nivha-teal);
  color: #fff;
}

/* ─── Date group headers (agenda timeline) ─── */
.te-date-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  margin: 12px 0 6px;
}

.te-date-header.today {
  background: var(--nivha-teal);
  color: #fff;
}

.te-date-header.tomorrow {
  background: #d0eef4;
  color: #1a1a2e;
}

.te-date-header.future {
  background: var(--nivha-light);
  color: var(--nivha-grey);
}

.te-date-header.past {
  background: #f0f0f0;
  color: #999;
}

/* ─── Countdown pills ─── */
.te-countdown-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.te-countdown-pill.today {
  background: var(--nivha-teal);
  color: #fff;
}

.te-countdown-pill.tomorrow {
  background: none;
  border: 1.5px solid var(--nivha-teal);
  color: var(--nivha-teal);
}

.te-countdown-pill.future {
  background: var(--nivha-light);
  color: var(--nivha-grey);
}

/* ─── Past events section ─── */
.te-past-section {
  opacity: 0.5;
}

.te-past-card {
  opacity: 0.7;
}

/* ─── Panes ─── */
.appt-pane {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.appt-pane.hidden {
  display: none;
}

.appt-loading {
  text-align: center;
  padding: 40px 16px;
  font-size: 14px;
  color: var(--nivha-grey);
  animation: pulse 1.5s infinite;
}

.appt-loading.hidden {
  display: none;
}

.appt-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--nivha-grey);
  font-size: 15px;
}

.appt-empty.hidden {
  display: none;
}

.appt-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Appointment Card ─── */
.appt-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
}

.appt-card:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.appt-card-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
}

.appt-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.appt-status-dot.green {
  background: var(--color-green);
}

.appt-status-dot.grey {
  background: #c0c0c0;
}

.appt-card-info {
  flex: 1;
  min-width: 0;
}

.appt-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.appt-card-meta {
  font-size: 13px;
  color: var(--nivha-grey);
  margin-top: 2px;
}

.appt-card-meta-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.appt-card-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
  transition: transform 0.2s;
}

.appt-card.expanded .appt-card-chevron {
  transform: rotate(90deg);
}

/* ─── Assigned badge ─── */
.appt-assigned-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(42, 139, 163, 0.12);
  color: var(--nivha-teal);
  border-radius: 10px;
  flex-shrink: 0;
}

/* ─── Detail Card (expand) ─── */
.appt-card-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
}

.appt-card.expanded .appt-card-detail {
  display: block;
}

.appt-detail-grid {
  padding: 8px 0;
}

.appt-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

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

.appt-detail-label {
  font-size: 13px;
  color: var(--nivha-grey);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 90px;
}

.appt-detail-value {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

/* ─── TE Contact Hero Block ─── */
.te-contact-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f0f7fa;
  border-radius: var(--radius);
  border: 1px solid #d0e8ef;
  margin-bottom: 10px;
}

.te-contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nivha-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.te-contact-info {
  flex: 1;
  min-width: 0;
}

.te-contact-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.te-contact-role {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.te-contact-phone {
  font-size: 14px;
  color: var(--nivha-teal);
  font-weight: 600;
  margin-top: 2px;
}

.te-contact-phone.te-no-phone {
  color: #aaa;
  font-weight: 400;
  font-style: italic;
}

.te-contact-call-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}

.te-contact-call-btn:active {
  background: #1b5e20;
  transform: scale(0.93);
}

/* ─── TE Action Buttons (Call / Directions) ─── */
.te-action-row {
  margin: 6px 0;
}

.te-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}

.te-action-btn:active {
  transform: scale(0.97);
}

.te-action-btn svg {
  flex-shrink: 0;
}

.te-action-call {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.te-action-call:active {
  background: #c8e6c9;
}

.te-action-directions {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #bbdefb;
}

.te-action-directions:active {
  background: #bbdefb;
}

.appt-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.appt-start-btn {
  flex: 1;
  padding: 14px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

.appt-start-btn:active {
  background: var(--nivha-teal-dark);
}

.appt-noshow-btn {
  padding: 14px 20px;
  background: #fff3cd;
  color: #856404;
  border: 1.5px solid #ffc107;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  white-space: nowrap;
}

.appt-noshow-btn:active {
  background: #ffc107;
  color: #fff;
}

/* ─── No-show Modal ─── */
.noshow-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.noshow-modal.hidden {
  display: none;
}

.noshow-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.noshow-modal-card {
  position: relative;
  background: var(--color-surface);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.noshow-modal-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.noshow-modal-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.noshow-comment {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  resize: none;
  outline: none;
  font-family: inherit;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}

.noshow-comment:focus {
  border-color: var(--nivha-teal);
}

.noshow-modal-actions {
  display: flex;
  gap: 10px;
}

.noshow-btn-confirm {
  flex: 1;
  padding: 12px;
  background: #ffc107;
  color: #856404;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.noshow-btn-confirm:active {
  background: #e0a800;
}

.noshow-btn-cancel {
  flex: 1;
  padding: 12px;
  background: var(--nivha-light);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.noshow-btn-cancel:active {
  background: #d0d3d5;
}

/* ─── Testing Events: editable results email ─── */
.appt-detail-input-wrap {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.appt-editable-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  background: #f8f9fa;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  text-align: right;
}

.appt-editable-input:focus {
  border-color: var(--nivha-teal);
  background: #fff;
}

/* ═══════════════════════════════════════════════════════
   PROJECTS TAB
   ═══════════════════════════════════════════════════════ */

.projects-content {
  padding: 20px 16px calc(16px + var(--bottom-nav-height));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.projects-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 4px;
}

.project-card {
  display: flex;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
}

.project-card:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.project-card-accent {
  width: 5px;
  background: var(--nivha-teal);
  flex-shrink: 0;
}

.project-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  flex: 1;
  min-width: 0;
}

.project-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.project-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.project-card-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
}

.project-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nivha-teal);
  border: 1.5px solid var(--nivha-teal);
  border-radius: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.project-card-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
}

/* ═══════════════════════════════════════════════════════
   MORE MENU — SUB-VIEW NAVIGATION
   ═══════════════════════════════════════════════════════ */

.more-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
}

.more-subview {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.more-subview.hidden {
  display: none;
}

.more-subview-header {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 52px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: 8px;
}

.more-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--nivha-teal);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.more-back-btn:active {
  opacity: 0.7;
}

.more-subview-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.more-subview-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
  padding-bottom: calc(16px + var(--bottom-nav-height));
}

/* ═══════════════════════════════════════════════════════
   CUSTOMER LOOKUP
   ═══════════════════════════════════════════════════════ */

.customer-search-bar {
  padding: 16px 0 8px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 5;
}

.customer-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.customer-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
}

.customer-card:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.customer-card-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
}

.customer-card-info {
  flex: 1;
  min-width: 0;
}

.customer-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.customer-card-meta {
  font-size: 13px;
  color: var(--nivha-grey);
  margin-top: 2px;
}

.customer-card-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
  transition: transform 0.2s;
}

.customer-card.expanded .customer-card-chevron {
  transform: rotate(90deg);
}

.customer-card-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
}

.customer-card.expanded .customer-card-detail {
  display: block;
}

.customer-detail-grid {
  padding: 8px 0;
}

.customer-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

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

.customer-detail-label {
  font-size: 13px;
  color: var(--nivha-grey);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 100px;
}

.customer-detail-value {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.customer-detail-value a {
  color: var(--nivha-teal);
  text-decoration: none;
  font-weight: 600;
}

.customer-detail-value a:active {
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════
   TRAINING EVENTS
   ═══════════════════════════════════════════════════════ */

.training-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}

.training-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
}

.training-card:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.training-card-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
}

.training-card-info {
  flex: 1;
  min-width: 0;
}

.training-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.training-card-meta {
  font-size: 13px;
  color: var(--nivha-grey);
  margin-top: 2px;
}

.training-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--nivha-teal);
  background: rgba(42, 139, 163, 0.1);
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.training-card-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
  transition: transform 0.2s;
}

.training-card.expanded .training-card-chevron {
  transform: rotate(90deg);
}

.training-card-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
}

.training-card.expanded .training-card-detail {
  display: block;
}

.training-detail-grid {
  padding: 8px 0;
}

.training-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

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

.training-detail-label {
  font-size: 13px;
  color: var(--nivha-grey);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 100px;
}

.training-detail-value {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.training-detail-value a {
  color: var(--nivha-teal);
  text-decoration: none;
}

.training-start-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

.training-start-btn:active {
  background: var(--nivha-teal-dark);
}

/* ═══════════════════════════════════════════════════════
   MEDICAL LEGAL
   ═══════════════════════════════════════════════════════ */

.medlegal-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}

.medlegal-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s;
}

.medlegal-card:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.medlegal-card-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
}

.medlegal-card-info {
  flex: 1;
  min-width: 0;
}

.medlegal-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.medlegal-card-meta {
  font-size: 13px;
  color: var(--nivha-grey);
  margin-top: 2px;
}

.medlegal-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(119, 184, 94, 0.15);
  color: #3a7d1e;
}

.medlegal-card-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
  transition: transform 0.2s;
}

.medlegal-card.expanded .medlegal-card-chevron {
  transform: rotate(90deg);
}

.medlegal-card-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
}

.medlegal-card.expanded .medlegal-card-detail {
  display: block;
}

.medlegal-detail-grid {
  padding: 8px 0;
}

.medlegal-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

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

.medlegal-detail-label {
  font-size: 13px;
  color: var(--nivha-grey);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 100px;
}

.medlegal-detail-value {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.medlegal-detail-value a {
  color: var(--nivha-teal);
  text-decoration: none;
}

.medlegal-tests-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.medlegal-test-pill {
  display: inline-flex;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--nivha-light);
  color: var(--color-text);
  border-radius: 10px;
}

.medlegal-start-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

.medlegal-start-btn:active {
  background: var(--nivha-teal-dark);
}

/* ═══════════════════════════════════════════════════════
   ADMIN DASHBOARD (PWA compact view)
   ═══════════════════════════════════════════════════════ */

/* Dashboard menu item accent */
.more-item-dashboard svg:first-child {
  color: var(--nivha-teal) !important;
}

/* Stats pills row */
.dash-stats {
  display: flex;
  gap: 8px;
  padding: 16px 0 8px;
}

.dash-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: var(--nivha-teal);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(42,139,163,0.25);
}

.dash-pill-count {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.dash-pill-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-top: 2px;
}

/* Section headers */
.dash-section {
  margin-top: 16px;
}

.dash-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  padding: 0 0 8px;
}

/* Collector cards */
.dash-collector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  transition: box-shadow 0.2s;
}

.dash-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-card-dot.collecting {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
  animation: dashPulse 2s ease-in-out infinite;
}

.dash-card-dot.idle {
  background: #9ca3af;
}

.dash-card-dot.syncing {
  background: #f59e0b;
  animation: dashPulse 1.5s ease-in-out infinite;
}

.dash-card-dot.offline {
  background: #ef4444;
}

@keyframes dashPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.35); }
}

.dash-card-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.dash-card-status-text {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.dash-card-status-text.collecting {
  color: #22c55e;
}

.dash-card-status-text.syncing {
  color: #f59e0b;
}

.dash-card-status-text.offline {
  color: #ef4444;
}

.dash-card-detail {
  margin-top: 8px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-card-form-info {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.dash-card-form-info span {
  display: block;
}

.dash-card-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  min-height: 36px;
}

.dash-card-view-btn:active {
  background: var(--nivha-teal-dark);
}

.dash-card-offline-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
  padding-left: 20px;
}

.dash-empty {
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* Activity log */
.dash-activity-log {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.dash-activity-item:last-child {
  border-bottom: none;
}

.dash-activity-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 42px;
  padding-top: 1px;
}

.dash-activity-desc {
  font-size: 13px;
  color: var(--color-text);
  flex: 1;
  line-height: 1.4;
}

/* ─── Live Form Viewer Bottom Sheet ─── */

.dash-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dash-viewer-overlay.hidden {
  display: none !important;
}

.dash-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dash-viewer-overlay.open .dash-viewer-backdrop {
  opacity: 1;
}

.dash-viewer-sheet {
  position: relative;
  background: var(--color-surface);
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.dash-viewer-overlay.open .dash-viewer-sheet {
  transform: translateY(0);
}

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

.dash-viewer-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-viewer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.dash-viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #fee2e2;
  color: #ef4444;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dash-viewer-badge.completed {
  background: #dcfce7;
  color: #16a34a;
}

.dash-viewer-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: dashViewerPulse 1.5s ease-in-out infinite;
}

.dash-viewer-badge.completed .dash-viewer-badge-dot {
  background: #16a34a;
  animation: none;
}

@keyframes dashViewerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.dash-viewer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dash-viewer-close:active {
  background: var(--color-border);
}

.dash-viewer-meta {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.dash-viewer-banner {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  flex-shrink: 0;
}

.dash-viewer-banner.offline {
  background: #fef2f2;
  color: #ef4444;
}

.dash-viewer-banner.completed {
  background: #f0fdf4;
  color: #16a34a;
}

.dash-viewer-fields {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.dash-field-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
  transition: background-color 0.5s ease;
}

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

.dash-field-row.flash {
  background-color: #dcfce7;
}

.dash-field-label {
  font-size: 13px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  max-width: 45%;
}

.dash-field-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  word-break: break-word;
}

.dash-field-value.empty {
  color: var(--color-border);
  font-weight: 400;
}

.dash-viewer-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--nivha-teal);
  flex-shrink: 0;
  background: var(--color-surface);
}

/* ─── Demo Mode Toggle (PWA) ─── */
.dash-demo-toggle {
  padding: 12px 0 4px;
}

.dash-demo-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: var(--color-surface);
  border: 2px solid var(--nivha-teal);
  color: var(--nivha-teal);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.dash-demo-btn:active {
  background: var(--nivha-teal);
  color: #fff;
}

.dash-demo-btn-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

.dash-demo-btn-active:active {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.dash-demo-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: dashDemoPulse 1.5s infinite;
  flex-shrink: 0;
}

@keyframes dashDemoPulse {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Body padding override for dashboard */
.dash-body {
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   POST-SUBMIT OVERLAY — THREE STATES
   ═══════════════════════════════════════════════════════ */
.post-submit-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: background 0.3s;
}

.post-submit-state-success .post-submit-icon-wrap,
.post-submit-icon-wrap.post-submit-state-success { background: #2d8a4e; }
.post-submit-state-pending .post-submit-icon-wrap,
.post-submit-icon-wrap.post-submit-state-pending { background: #e8a020; }
.post-submit-state-failed .post-submit-icon-wrap,
.post-submit-icon-wrap.post-submit-state-failed { background: #d94040; }

.post-submit-svg.hidden { display: none; }

.post-submit-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.post-submit-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

.post-submit-progress {
  height: 4px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0;
}

.post-submit-progress.hidden { display: none; }

.post-submit-progress-fill {
  height: 100%;
  background: #e8a020;
  border-radius: 4px;
  width: 60%;
  animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.post-submit-meta {
  text-align: left;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0 16px;
}

.post-submit-meta-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  gap: 12px;
}

.post-submit-meta-label { color: #6d6e71; white-space: nowrap; }
.post-submit-meta-value { font-weight: 500; text-align: right; }
.post-submit-meta-pending { color: #e8a020; }
.post-submit-meta-success { color: #2d8a4e; }
.post-submit-meta-failed { color: #d94040; }

.post-submit-btn-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px;
  background: #d94040;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.post-submit-btn-retry:active { background: #b33030; }
.post-submit-btn-retry.hidden { display: none; }

/* ═══════════════════════════════════════════════════════
   HOME — SYNC ALERT BANNER
   ═══════════════════════════════════════════════════════ */
.home-sync-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  min-height: 44px;
}

.home-sync-alert.hidden { display: none !important; }

.home-sync-alert.alert-amber {
  background: #fff8ec;
  border: 1.5px solid #e8a020;
}

.home-sync-alert.alert-red {
  background: #fef2f2;
  border: 1.5px solid #d94040;
}

.home-sync-alert:active { opacity: 0.85; }

.home-sync-alert-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.home-sync-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.alert-amber .home-sync-alert-icon {
  background: #e8a020;
  color: #fff;
}

.alert-red .home-sync-alert-icon {
  background: #d94040;
  color: #fff;
}

.home-sync-alert-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-sync-alert-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.home-sync-alert-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════
   SUBMISSION LOG — PENDING TAB
   ═══════════════════════════════════════════════════════ */
.pending-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  background: #d94040;
  color: #fff;
  margin-left: 4px;
  vertical-align: middle;
}

.pending-tab-badge.hidden { display: none; }

.pending-entry {
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pending-entry-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pending-entry-header:active { background: #f8f9fa; }

.pending-status-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.pending-status-badge.status-pending {
  background: #fff3cd;
  color: #856404;
}

.pending-status-badge.status-failed {
  background: #f8d7da;
  color: #721c24;
}

.pending-entry-info {
  flex: 1;
  min-width: 0;
}

.pending-entry-company {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.pending-entry-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.pending-entry-chevron {
  flex-shrink: 0;
  color: var(--nivha-grey);
  transition: transform 0.2s;
}

.pending-entry.expanded .pending-entry-chevron { transform: rotate(90deg); }

.pending-entry-detail {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
}

.pending-entry.expanded .pending-entry-detail { display: block; }

.pending-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  gap: 8px;
}

.pending-detail-label { color: var(--nivha-grey); }
.pending-detail-value { font-weight: 500; text-align: right; }

.pending-retry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: #d94040;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.pending-retry-btn:active { background: #b33030; }

/* ═══════════════════════════════════════════════════════
   RESUBMIT CONFIRMATION MODAL
   ═══════════════════════════════════════════════════════ */
.resubmit-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.resubmit-modal.hidden { display: none; }

.resubmit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.resubmit-modal-card {
  position: relative;
  background: var(--color-surface);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.resubmit-modal-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.resubmit-modal-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.resubmit-modal-actions {
  display: flex;
  gap: 10px;
}

.resubmit-btn-confirm {
  flex: 1;
  padding: 12px;
  background: #d94040;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.resubmit-btn-confirm:active { background: #b33030; }

.resubmit-btn-cancel {
  flex: 1;
  padding: 12px;
  background: var(--nivha-light);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.resubmit-btn-cancel:active { background: #d0d3d5; }

/* ═══════════════════════════════════════════════════════
   FORGOT PIN EMAIL SECTION
   ═══════════════════════════════════════════════════════ */
.forgot-pin-email-section {
  margin-top: 20px;
}

.forgot-pin-email-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  margin-bottom: 12px;
}

.forgot-pin-email-input:focus {
  border-color: var(--nivha-teal);
  box-shadow: 0 0 0 3px rgba(42, 139, 163, 0.12);
}

.forgot-pin-email-input::placeholder {
  color: var(--nivha-grey);
  font-weight: 400;
}

.forgot-pin-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 8px;
  min-height: 48px;
}

.forgot-pin-submit-btn:active { background: var(--nivha-teal-dark); }
.forgot-pin-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.forgot-pin-cancel-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  width: 100%;
  text-align: center;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.forgot-pin-cancel-btn:active { color: var(--nivha-teal); }

/* ═══════════════════════════════════════════════════════
   CHANGE PIN VIEW
   ═══════════════════════════════════════════════════════ */
.changepin-form {
  padding: 24px 0 16px;
}

.changepin-group {
  margin-bottom: 24px;
}

.changepin-group .login-label {
  margin-bottom: 10px;
}

.changepin-group .pin-input-group {
  justify-content: flex-start;
}

.changepin-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--nivha-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
  margin-top: 8px;
  min-height: 48px;
}

.changepin-submit-btn:active { background: var(--nivha-teal-dark); }
.changepin-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.changepin-success {
  color: var(--nivha-green);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════ */
.hidden { display: none !important; }