/* ============================================================
   FantaSEA Tech — Mobile-first CSS
   Theme: Ocean Blue  |  WCAG AA compliant
   Premium visual polish — luxury aquarium service branding
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  /* Native UI (scrollbars, form controls) follows the manual theme.
     Dark mode is opt-in via body.dark-mode (see dark-mode.css). */
  color-scheme: light;

  /* Brand palette — FantaSEA Aquariums */
  --color-primary:   #0077B6;
  --color-primary-hover: #005F8F;
  --color-secondary: #00B4D8;
  --color-accent:    #90E0EF;
  --color-accent-light: #CAF0F8;
  --color-dark:      #023E8A;
  --color-darker:    #01296B;
  --color-danger:    #E63946;
  --color-warning:   #F4A261;
  --color-success:   #2A9D8F;
  --color-reef:      #0077B6;
  --color-saltwater: #00B4D8;
  --color-freshwater:#2A9D8F;
  --color-coral:     #FF6B6B;

  /* Neutrals */
  --color-bg:        #F0F8FF;
  --color-surface:   #FFFFFF;
  --color-border:    #CBD5E0;
  --color-border-light: #E2E8F0;
  --color-text:      #1A202C;
  --color-text-muted:#4A5568;
  --color-text-on-primary: #FFFFFF;

  /* Typography */
  --font-base:       16px;
  --font-xs:         12px;
  --font-sm:         14px;
  --font-lg:         18px;
  --font-xl:         22px;
  --font-xxl:        28px;
  --font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --line-height:     1.5;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;

  /* Touch targets */
  --touch-min:       44px;
  --input-min-height:52px;

  /* Layout */
  --bottom-nav-height: 64px;
  --header-height:     56px;

  /* Borders & Shadows */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full:9999px;
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,119,182,0.10);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12);
  --shadow-elevated: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 2px 8px rgba(0,119,182,0.06), 0 0 0 1px rgba(0,119,182,0.04);
  --shadow-card: 0 2px 8px rgba(2,62,138,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 24px rgba(2,62,138,0.14), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-elevated: 0 12px 40px rgba(2,62,138,0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Safe areas (for notched/island phones) */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: var(--font-base);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100dvh;
  overflow-x: hidden;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Prevent horizontal scroll globally */
#app,
#main-content {
  max-width: 100vw;
  overflow-x: hidden;
}

img, video, svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

/* Focus rings — accessible, not ugly */
:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Utility ────────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mb-md  { margin-bottom: var(--space-md); }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size: var(--font-xxl); font-weight: 700; letter-spacing: -0.5px; }
h2 { font-size: var(--font-xl);  font-weight: 700; color: var(--color-dark); }
h3 { font-size: var(--font-lg);  font-weight: 600; }
h4 { font-size: var(--font-base); font-weight: 600; color: var(--color-dark); }
p  { font-size: var(--font-base); }
small, .caption { font-size: var(--font-sm); color: var(--color-text-muted); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--touch-min);
  padding: 0 var(--space-lg);
  font-size: var(--font-base);
  font-weight: 600;
  font-family: var(--font-family);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.btn:active { transform: scale(0.97); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  color: var(--color-text-on-primary);
  box-shadow: 0 4px 14px rgba(0,119,182,0.30);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-dark), #012A5E);
  box-shadow: 0 6px 20px rgba(0,119,182,0.40);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-secondary:hover:not(:disabled) {
  background-color: rgba(0,119,182,0.08);
}

.btn-danger {
  background: linear-gradient(135deg, var(--color-danger), #c1121f);
  color: #fff;
  box-shadow: 0 4px 14px rgba(230,57,70,0.30);
}
.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #c1121f, #9B0000);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: rgba(0,119,182,0.08);
}

.btn-full {
  width: 100%;
}

.btn-sm {
  min-height: 36px;
  padding: 0 var(--space-md);
  font-size: var(--font-sm);
  border-radius: var(--radius-sm);
}

/* Social login buttons */
.btn-social {
  flex: 1;
  min-height: var(--touch-min);
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}
.btn-social:hover:not(:disabled) {
  background-color: #F7FAFC;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.btn-google svg { flex-shrink: 0; }
.btn-apple svg  { flex-shrink: 0; }

/* ── Form Elements ──────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.form-group label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  min-height: var(--input-min-height);
  font-size: 16px; /* Must be 16px — prevents iOS zoom */
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.18);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--line-height);
}

/* Out-of-range parameter highlighting */
.form-group input.out-of-range,
.form-group input[data-status="high"],
.form-group input[data-status="low"] {
  border-color: var(--color-danger);
  background-color: #FFF5F5;
}

.form-group input.out-of-range:focus,
.form-group input[data-status="high"]:focus,
.form-group input[data-status="low"]:focus {
  box-shadow: 0 0 0 3px rgba(230,57,70,0.20);
}

.range-hint {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.range-hint.warning {
  color: var(--color-danger);
  font-weight: 600;
}

/* Select arrow */
.form-group select {
  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='%234A5568' 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;
}

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.password-toggle svg {
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.password-toggle:hover svg {
  opacity: 1;
}

.forgot-password-link {
  display: block;
  text-align: center;
  margin-top: var(--space-sm);
  font-size: var(--font-sm);
  color: var(--color-primary);
  font-weight: 500;
}

.error-message {
  font-size: var(--font-sm);
  color: var(--color-danger);
  background-color: #FFF5F5;
  border: 1px solid rgba(230,57,70,0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
}

/* ── App Layout ─────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* Status banners */
#offline-banner,
#sync-banner {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-size: var(--font-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

#offline-banner {
  background-color: var(--color-warning);
  color: #1A202C;
}

#sync-banner {
  background-color: var(--color-success);
  color: #fff;
  animation: slideFadeIn var(--transition-base) both;
}

@keyframes slideFadeIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Main content area */
#main-content {
  flex: 1;
  min-height: 0;
  height: 100dvh;
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
  padding-top: var(--safe-top);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Keep fields focused via the on-screen keyboard from landing under the
     sticky visit footer / bottom nav when scrolled into view. */
  scroll-padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 80px);
}

/* ── Screens ────────────────────────────────────────────────── */
.screen {
  padding: var(--space-md);
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0 var(--space-sm);
  min-height: var(--header-height);
}

.screen-header h2 {
  font-size: var(--font-xl);
  color: var(--color-dark);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: var(--space-md);
  transition: box-shadow var(--transition-smooth);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

.card-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.card-body {
  padding: var(--space-md);
}

.card-footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border-light);
  background-color: #F7FAFC;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ── Appointment Cards ──────────────────────────────────────── */
.appointment-card {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-md);
  overflow: hidden;
  border: none;
  border-left: 4px solid var(--color-primary);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-family);
  padding: 0;
  color: #1A202C !important;
}

.appointment-card:hover,
.appointment-card:focus-within {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.appointment-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

.appointment-card.status-completed {
  border-left-color: var(--color-success);
  opacity: 0.85;
}

.appointment-card.status-in-progress {
  border-left-color: var(--color-secondary);
}

.appointment-card.status-overdue {
  border-left-color: var(--color-danger);
}

.appointment-card-inner {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.appointment-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  font-size: var(--font-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

.appointment-details {
  flex: 1;
  min-width: 0;
}

.appointment-time {
  font-size: var(--font-sm);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.appointment-card-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.appointment-card-content {
  flex: 1;
  min-width: 0;
}

.appointment-chevron {
  font-size: 24px;
  color: var(--color-border);
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

.appointment-client {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 2px;
  line-height: 1.3;
}

.last-service {
  font-size: 11px;
  color: var(--color-text-muted);
}

.appointment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Schedule cards are vertical information blocks. The generic appointment-card
   component is also used in Admin, where the flex layout is intentional; scope
   this correction to the technician schedule so extra actions never squeeze
   customer/address text into unusable columns or overflow a phone viewport. */
#schedule-list .appointment-card-inner {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#schedule-list .appointment-card-top {
  width: 100%;
}

#schedule-list .appointment-actions {
  width: 100%;
}

#schedule-list .appointment-actions .card-action-btn {
  min-height: 44px !important;
  box-sizing: border-box;
}

.card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(0,119,182,0.06);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  min-height: 36px;
}

.card-action-btn:hover {
  background: rgba(0,119,182,0.12);
  text-decoration: none;
}

.appointment-address {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  line-height: 1.3;
}

.appointment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.appointment-chevron {
  color: var(--color-border);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.appointment-card:hover .appointment-chevron {
  transform: translateX(2px);
  color: var(--color-primary);
}

/* ── Tank Type Badges ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Reef = Ocean Blue */
.badge-reef,
.badge[data-tank="reef"] {
  background: linear-gradient(135deg, rgba(0,119,182,0.15), rgba(2,62,138,0.12));
  color: var(--color-dark);
  border: 1px solid rgba(0,119,182,0.25);
}

/* Saltwater = Teal/Cyan */
.badge-saltwater,
.badge[data-tank="saltwater"] {
  background: linear-gradient(135deg, rgba(0,180,216,0.15), rgba(0,107,125,0.10));
  color: #005F6B;
  border: 1px solid rgba(0,180,216,0.30);
}

/* Freshwater = Green */
.badge-freshwater,
.badge[data-tank="freshwater"] {
  background: linear-gradient(135deg, rgba(42,157,143,0.15), rgba(26,107,95,0.10));
  color: #1A6B5F;
  border: 1px solid rgba(42,157,143,0.30);
}

/* Status badges */
.badge-success {
  background-color: rgba(42,157,143,0.12);
  color: #1A6B5F;
  border: 1px solid rgba(42,157,143,0.35);
}

.badge-warning {
  background-color: rgba(244,162,97,0.15);
  color: #9A5000;
  border: 1px solid rgba(244,162,97,0.40);
}

.badge-danger {
  background-color: rgba(230,57,70,0.10);
  color: #9B0000;
  border: 1px solid rgba(230,57,70,0.30);
}

/* ── Bottom Tab Navigation ──────────────────────────────────── */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: calc(var(--bottom-nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: stretch;
  box-shadow: 0 -4px 20px rgba(2,62,138,0.08);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--touch-min);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #A0AEC0;
  font-size: 11px;
  font-family: var(--font-family);
  font-weight: 500;
  transition: color var(--transition-fast);
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--transition-fast), color var(--transition-fast);
  stroke-width: 1.8;
}

.nav-btn:active svg {
  transform: scale(0.90);
}

.nav-btn.active {
  color: var(--color-primary);
  font-weight: 700;
}

.nav-btn.active svg {
  color: var(--color-primary);
  stroke-width: 2.2;
}

/* Active indicator bar */
.nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* Badge on nav button (active visit indicator) */
.nav-btn.has-active .nav-badge {
  display: flex;
}

.nav-badge {
  display: none;
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-danger);
  border: 2px solid var(--color-surface);
}

/* ── Login Screen ───────────────────────────────────────────── */
.login-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  padding-top: calc(var(--space-lg) + var(--safe-top));
  background: linear-gradient(165deg, #01296B 0%, #023E8A 25%, #0077B6 55%, #00B4D8 80%, #48CAE4 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle ocean glow effects */
.login-screen::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -15%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144,224,239,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.login-screen::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 50%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.login-logo {
  text-align: center;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.logo-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  border: 1.5px solid rgba(255,255,255,0.25);
}

.login-logo h1 {
  font-size: var(--font-xl);
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.login-subtitle {
  font-size: var(--font-sm);
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  font-weight: 500;
}

.login-form {
  width: 100%;
  max-width: 400px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-elevated);
}

.login-divider {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-sm);
  color: rgba(255,255,255,0.6);
  font-size: var(--font-sm);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: rgba(255,255,255,0.2);
}

.social-login {
  width: 100%;
  max-width: 400px;
  display: flex;
  gap: var(--space-sm);
  position: relative;
  z-index: 1;
}

.social-login .btn-social {
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.social-login .btn-social:hover:not(:disabled) {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.35);
}

.forgot-password-link {
  display: block;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--color-primary);
  margin-top: var(--space-sm);
  font-weight: 500;
  min-height: var(--touch-min);
  line-height: var(--touch-min);
}

.forgot-password-link:hover {
  color: var(--color-dark);
}

/* ── Schedule Screen ────────────────────────────────────────── */
.schedule-screen {
  padding: var(--space-md);
}

.schedule-tabs {
  display: flex;
  background-color: #EDF2F7;
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.tab-btn {
  flex: 1;
  min-height: 36px;
  padding: 0 var(--space-md);
  background: none;
  border: none;
  border-radius: calc(var(--radius-md) - 3px);
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: var(--font-family);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.tab-btn.active {
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-weight: 700;
}

.schedule-date-header {
  font-size: var(--font-xxl);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}

.schedule-day-sub {
  font-size: var(--font-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.schedule-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--color-text-muted);
}

.schedule-empty svg {
  margin: 0 auto var(--space-md);
  color: var(--color-accent);
}

/* Last synced pill */
.last-synced {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-md);
}

.last-synced:not(:empty) {
  background: #EDF2F7;
  display: inline-flex;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  margin-left: 50%;
  transform: translateX(-50%);
}

.sync-warning {
  color: var(--color-warning);
  font-weight: 600;
}

.tank-name {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ── Visit / Checklist Screen ───────────────────────────────── */
/* The sticky "Complete Visit" footer floats just above the bottom nav, so the
   scroll content needs enough bottom clearance for the last checklist fields to
   scroll clear of it (Kyle: footer was covering checklist fields on phones).
   --visit-footer-clearance ~= footer height + its offset above the nav. */
:root { --visit-footer-clearance: 160px; }

.visit-screen {
  padding: var(--space-md);
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--visit-footer-clearance));
}

.visit-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, #012A5E 0%, var(--color-dark) 30%, var(--color-primary) 70%, var(--color-secondary) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  color: #fff;
  margin-bottom: var(--space-md);
  box-shadow: 0 8px 32px rgba(2,62,138,0.25);
  position: relative;
  overflow: hidden;
}

/* Subtle wave pattern overlay */
.visit-header::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -20px;
  right: -20px;
  height: 60px;
  background: radial-gradient(ellipse at 30% 100%, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.visit-client-name {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.visit-address {
  font-size: var(--font-sm);
  opacity: 0.85;
  margin-bottom: var(--space-sm);
}

/* Visit sub-tabs */
.visit-tabs {
  display: flex;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.visit-tabs::-webkit-scrollbar { display: none; }

.visit-tab-btn,
.visit-tab {
  flex: 1;
  min-width: max-content;
  min-height: 40px;
  padding: 0 var(--space-sm);
  background: none;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--font-sm);
  font-weight: 600;
  font-family: var(--font-family);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-smooth);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}

.visit-tab-btn.active,
.visit-tab.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,119,182,0.25);
}

/* ── Checklist ──────────────────────────────────────────────── */
.checklist-section {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.checklist-section-title {
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-sm);
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  min-height: var(--touch-min);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
}

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

.checklist-item:hover {
  background-color: rgba(0,119,182,0.03);
}

.checklist-item.completed .checklist-label {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-success);
}

/* Custom checkbox */
.checklist-checkbox {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-smooth);
  flex-shrink: 0;
  margin-top: 2px;
}

.checklist-item.completed .checklist-checkbox {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

/* Checkmark SVG */
.checklist-item.completed .checklist-checkbox::after {
  content: '';
  width: 13px;
  height: 7px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translateY(-2px);
  display: block;
}

.checklist-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex: 1;
  cursor: pointer;
  min-height: var(--touch-min);
  padding: var(--space-sm) 0;
  font-size: var(--font-base);
  color: var(--color-text);
  line-height: 1.4;
}

.checklist-note {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Checklist input (native hidden, accessible) */
.checklist-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ── Progress Bar ───────────────────────────────────────────── */
.progress-bar-container {
  margin-bottom: var(--space-md);
}

.progress-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  transition: width 400ms ease;
  min-width: 0;
}

.progress-bar-fill[data-progress="100"] {
  background: linear-gradient(90deg, var(--color-success), #48CAB4);
}

/* ── Parameter Form ─────────────────────────────────────────── */
.parameter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.parameter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.parameter-field label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.parameter-field input {
  min-height: var(--input-min-height);
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.parameter-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.18);
}

.parameter-field input.out-of-range {
  border-color: var(--color-danger);
  background-color: #FFF5F5;
}

.parameter-field input.out-of-range:focus {
  box-shadow: 0 0 0 3px rgba(230,57,70,0.20);
}

.parameter-field .range-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.parameter-field .range-label.out-of-range {
  color: var(--color-danger);
  font-weight: 600;
}

/* ── Photo Capture Area ─────────────────────────────────────── */
.photo-capture-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  background-color: #F7FAFC;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.photo-capture-area:hover,
.photo-capture-area:focus-within {
  border-color: var(--color-primary);
  background-color: #EBF8FF;
}

.photo-capture-area svg {
  color: var(--color-secondary);
  width: 40px;
  height: 40px;
}

.photo-capture-area p {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.photo-capture-area input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  min-height: 32px;
}

.photo-thumb {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
  width: 100%;
  background-color: var(--color-border);
  position: relative;
  overflow: hidden;
}

.photo-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.60);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

/* ── Modal Dialog ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn var(--transition-base) both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-backdrop.modal-centered {
  align-items: center;
}

.modal {
  width: 100%;
  max-width: 520px;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  animation: slideUp var(--transition-base) both;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}

.modal-backdrop.modal-centered .modal {
  border-radius: var(--radius-lg);
  animation: scaleIn var(--transition-base) both;
}

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

@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

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

.modal-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-dark);
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: #EDF2F7;
  color: var(--color-text-muted);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background-color var(--transition-fast);
}

.modal-close:hover { background-color: var(--color-border); }

.modal-body {
  padding: var(--space-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.modal-footer {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.modal-footer .btn { flex: 1; }

/* ── Tank Profile Screen ────────────────────────────────────── */
.tank-profile-screen {
  padding: var(--space-md);
}

.tank-hero {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  margin-bottom: var(--space-md);
  display: block;
}

.tank-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tank-info-tile {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.tank-info-tile .tile-value {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-dark);
}

.tank-info-tile .tile-label {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* ── Profile Screen ─────────────────────────────────────────── */
.profile-screen {
  padding: var(--space-md);
}

.profile-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-md);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  font-size: var(--font-xxl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  box-shadow: 0 4px 16px rgba(0,119,182,0.25);
}

.profile-card h3 {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}

.profile-email {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.profile-role {
  font-size: var(--font-sm);
  color: var(--color-primary);
  font-weight: 600;
  text-transform: capitalize;
}

.profile-info {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  min-height: var(--touch-min);
}

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

.info-row-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-base);
  text-align: left;
  transition: background-color var(--transition-fast);
}

.info-row-btn:hover,
.info-row-btn:active {
  background-color: #F7FAFC;
}

.info-chevron {
  font-size: 18px;
  color: var(--color-border);
}

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-size: var(--font-xl);
  font-weight: 800;
  color: var(--color-primary);
}

.stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.profile-section-title {
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-sm);
  padding-left: 2px;
}

.info-label {
  font-size: var(--font-base);
  color: var(--color-text-muted);
}

.info-value {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text);
}

/* ── Notes / Textarea ───────────────────────────────────────── */
.notes-area {
  width: 100%;
  min-height: 120px;
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  resize: vertical;
  line-height: var(--line-height);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.notes-area:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.18);
}

/* ── Loading / Skeleton States ──────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #EDF2F7 25%, #E2E8F0 50%, #EDF2F7 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-full);
}

.skeleton-card {
  height: 100px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

/* ── Divider ────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background-color: var(--color-border-light);
  margin: var(--space-md) 0;
}

/* ── Toast / Snackbar ───────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-md));
  left: var(--space-md);
  right: var(--space-md);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  background-color: #1A202C;
  color: #fff;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn 250ms ease both;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.toast-success { background-color: var(--color-success); }
.toast-error   { background-color: var(--color-danger); }
.toast-warning {
  background-color: var(--color-warning);
  color: var(--color-text);
}

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

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

.toast-icon { flex-shrink: 0; }
.toast-msg { flex: 1; }

/* ── Sync indicator in cards ────────────────────────────────── */
.sync-pending-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-warning);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* ── Section label ──────────────────────────────────────────── */
.section-label {
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-xs);
}

/* ── Floating Action Button ─────────────────────────────────── */
.fab {
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-md));
  right: var(--space-md);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,119,182,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  z-index: 800;
}

.fab:hover { box-shadow: 0 6px 20px rgba(0,119,182,0.55); }
.fab:active { transform: scale(0.93); }

/* ── Responsive adjustments (tablet and up) ──────────────────── */
@media (min-width: 600px) {
  .screen,
  .schedule-screen,
  .visit-screen,
  .tank-profile-screen,
  .profile-screen {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .login-screen {
    padding: var(--space-xl);
  }

  .parameter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  :root {
    --bottom-nav-height: 68px;
  }

  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Print — hide navigation ─────────────────────────────────── */
@media print {
  #bottom-nav,
  #offline-banner,
  #sync-banner,
  .fab { display: none !important; }

  #main-content {
    padding-bottom: 0;
  }
}

/* ── Week View ───────────────────────────────────────────────── */
.week-day-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-top: var(--space-md);
  border-bottom: 2px solid var(--color-primary);
}

.week-day-header:first-child {
  margin-top: 0;
}

.week-day-name {
  font-weight: 700;
  font-size: var(--font-base);
  color: var(--color-dark);
}

.week-day-date {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
}

.week-day-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(0,119,182,0.08);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.week-appt-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.week-appt-time {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-primary);
  min-width: 65px;
}

.week-appt-name {
  flex: 1;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* ── Visit Status Badges ────────────────────────────────────── */
.visit-status {
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.visit-status.in-progress {
  background-color: rgba(255,255,255,0.20);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.30);
}

.visit-status.completed {
  background-color: rgba(42,157,143,0.20);
  color: #fff;
  border: 1px solid rgba(42,157,143,0.40);
}

/* ── Visit Header ───────────────────────────────────────────── */
.visit-header-info {
  flex: 1;
  min-width: 0;
}

.visit-header-info h2 {
  color: #fff;
  margin-bottom: var(--space-xs);
  font-size: var(--font-lg);
}

.back-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.back-btn:hover { background: rgba(255,255,255,0.30); }

/* ── Tank Badge ─────────────────────────────────────────────── */
.tank-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tank-badge-reef {
  background-color: rgba(255,255,255,0.92);
  color: var(--color-dark);
}

.tank-badge-saltwater {
  background-color: rgba(255,255,255,0.92);
  color: #005F6B;
}

.tank-badge-freshwater {
  background-color: rgba(255,255,255,0.92);
  color: #1A6B5F;
}

/* ── Visit Toolbar (timer + notify) ──────────────────────────── */
.visit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) 0;
  flex-wrap: wrap;
}

.timer-pause-btn {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,119,182,0.25);
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--font-sm);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.visit-timer.paused {
  background: rgba(244,162,97,0.14);
  color: #B45309;
}

.sold-items-card {
  background: var(--color-surface);
  border: 1.5px solid rgba(0,119,182,0.16);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.sold-items-card label {
  display: block;
  color: var(--color-dark);
  font-size: var(--font-sm);
  font-weight: 800;
  margin-bottom: var(--space-xs);
}

.sold-items-card textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
}

.sold-items-help {
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  margin-top: 6px;
}

/* ── Collapsible Sections ────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-sm) 0;
  cursor: pointer;
  font-family: var(--font-family);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
  -webkit-tap-highlight-color: transparent;
}

.section-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: #F0F4F8;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.section-count.done {
  background: rgba(42,157,143,0.12);
  color: var(--color-success);
}

.section-chevron {
  font-size: 18px;
  color: var(--color-text-muted);
  transition: transform 200ms ease;
  transform: rotate(-90deg);
}

.section-chevron.open {
  transform: rotate(-270deg);
}

.all-good-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 700;
  font-family: var(--font-family);
  color: var(--color-success);
  background: rgba(42,157,143,0.08);
  border: 2px dashed rgba(42,157,143,0.3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
}

.all-good-btn:hover {
  background: rgba(42,157,143,0.15);
  border-color: var(--color-success);
}

.all-good-btn:active {
  transform: scale(0.98);
  background: rgba(42,157,143,0.2);
}

.section-body {
  overflow: hidden;
  transition: max-height 300ms ease, opacity 200ms ease;
  max-height: 2000px;
  opacity: 1;
}

.section-body.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.checklist-section.section-done .section-title {
  opacity: 0.6;
}

/* ── Visit Timer ────────────────────────────────────────────── */
.visit-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.visit-timer svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: var(--font-sm);
  font-weight: 700;
  font-family: var(--font-family);
  color: #fff;
  background: linear-gradient(135deg, var(--color-warning), #E76F51);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(244,162,97,0.3);
}

.notify-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244,162,97,0.4);
}

.notify-btn:disabled,
.notify-btn.notified {
  background: var(--color-success);
  box-shadow: none;
  cursor: default;
}

/* ── Visit Footer ───────────────────────────────────────────── */
.visit-footer {
  position: sticky;
  /* Hug the bottom nav instead of floating high over checklist fields. */
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
  z-index: 850;
  padding: var(--space-sm);
  margin: var(--space-md) calc(var(--space-md) * -1) 0;
  background: linear-gradient(180deg, rgba(247,250,252,0), var(--color-bg) 18%, var(--color-bg) 100%);
}

/* ── Visit Tab Content ──────────────────────────────────────── */
.visit-tab-content {
  min-height: 200px;
  /* Breathing room so the last checklist field is never flush against the
     sticky Complete Visit footer below it. */
  padding-bottom: var(--space-md);
}

.tab-content {
  padding: var(--space-sm) 0;
}

/* ── Checklist Progress ─────────────────────────────────────── */
.checklist-item,
.visit-screen input,
.visit-screen textarea,
.visit-screen select,
.visit-screen button {
  scroll-margin-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 96px);
}

.checklist-progress {
  margin-bottom: var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #EDF2F7;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ── Checklist Items ────────────────────────────────────────── */
.section-title {
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-icon {
  font-size: var(--font-base);
}

.checklist-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex: 1;
  cursor: pointer;
  min-height: var(--touch-min);
  padding: var(--space-sm) 0;
}

.checklist-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 3px solid #0077B6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  margin-top: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.checklist-item input[type="checkbox"]:checked ~ .checkmark {
  background: linear-gradient(135deg, #2A9D8F, #48CAB4);
  border-color: #2A9D8F;
  box-shadow: 0 2px 10px rgba(42,157,143,0.4);
}

.checklist-item input[type="checkbox"]:checked ~ .checkmark::after {
  content: '';
  width: 14px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg) translateY(-2px);
}

@keyframes checkmark-pop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.checklist-item input[type="checkbox"]:checked ~ .checkmark {
  animation: checkmark-pop 300ms ease;
}

.checklist-item input[type="checkbox"]:checked ~ .checkmark::after {
  content: '';
  width: 12px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.item-content {
  flex: 1;
}

.item-task {
  font-size: var(--font-base);
  color: var(--color-text);
  display: block;
  line-height: 1.4;
}

.checklist-item.checked .item-task {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.item-meta {
  display: flex;
  gap: var(--space-xs);
  margin-top: 3px;
  flex-wrap: wrap;
}

.required-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-danger), #c1121f);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
}

.optional-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  background-color: #EDF2F7;
  padding: 1px 7px;
  border-radius: var(--radius-full);
}

.na-btn {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background-color: #EDF2F7;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
  font-family: var(--font-family);
  transition: all var(--transition-fast);
}

.na-btn:hover {
  background-color: #FFF5E6;
  border-color: var(--color-warning);
  color: #9A5000;
}

.na-reason {
  font-size: var(--font-sm);
  color: var(--color-warning);
  font-style: italic;
}

.completed-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.add-item-btn {
  margin-top: var(--space-md);
  border-style: dashed;
}

/* ── Parameter Form ─────────────────────────────────────────── */
.param-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.parameters-tab h4 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border-light);
  color: var(--color-dark);
  font-size: var(--font-lg);
}

.param-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border-light);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.param-field:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.param-field label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
}

.param-unit {
  font-weight: 400;
  color: var(--color-text-muted);
}

.required-dot {
  color: var(--color-danger);
}

.param-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.param-input-row input {
  flex: 1;
  min-height: var(--input-min-height);
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: #F7FAFC;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  appearance: none;
  -webkit-appearance: none;
  transition: all var(--transition-fast);
}

.param-input-row input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.18);
  background-color: var(--color-surface);
}

.param-range {
  display: none;
}

.range-warning {
  color: var(--color-danger);
  font-size: 20px;
  animation: pulse 2s ease-in-out infinite;
}

.range-error {
  color: var(--color-danger);
  font-size: 18px;
}

.param-field.out-of-range {
  border-color: rgba(230,57,70,0.3);
  background-color: #FFFAFA;
}

.param-last-visit {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  padding-left: 2px;
}

.param-last-visit strong {
  color: var(--color-primary);
}

.trend-up {
  color: var(--color-danger);
  font-weight: 700;
}

.trend-down {
  color: var(--color-success);
  font-weight: 700;
}

.trend-same {
  color: var(--color-text-muted);
}

.param-field.out-of-range .param-input-row input {
  border-color: var(--color-danger);
  background-color: #FFF5F5;
}

.param-field textarea {
  min-height: 80px;
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: #F7FAFC;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  resize: none;
  width: 100%;
  transition: all var(--transition-fast);
}

.param-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.18);
  background-color: var(--color-surface);
}

/* ── Photo Sections ─────────────────────────────────────────── */
.photo-section {
  margin-bottom: var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

.photo-section h4 {
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-dark);
}

.photo-capture-btn {
  margin-top: var(--space-sm);
  width: 100%;
  min-height: 56px;
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-md);
  background-color: rgba(0,119,182,0.04);
  color: var(--color-primary);
  font-size: var(--font-base);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.photo-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.photo-choice-row .photo-capture-btn {
  margin-top: 0;
  min-height: 52px;
  font-size: var(--font-sm);
}

.photo-capture-btn:hover {
  background-color: rgba(0,119,182,0.08);
  border-color: var(--color-dark);
}

.photo-capture-btn svg {
  display: inline;
  width: 22px;
  height: 22px;
}

@media (max-width: 380px) {
  .photo-choice-row {
    grid-template-columns: 1fr;
  }
}

.photo-count {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}

.photo-empty {
  text-align: center;
  padding: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-style: italic;
}

/* ── Modal Overlay ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.55);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn var(--transition-base) both;
}

.modal-overlay .modal {
  border-radius: var(--radius-lg);
  max-width: 500px;
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
  padding-bottom: max(var(--space-md), var(--safe-bottom));
  box-shadow: var(--shadow-elevated);
}

/* ── Quick Notes ─────────────────────────────────────────────── */
.quick-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.quick-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-family);
  color: var(--color-primary);
  background: rgba(0,119,182,0.06);
  border: 1.5px solid rgba(0,119,182,0.15);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.quick-note-btn:hover {
  background: rgba(0,119,182,0.12);
  border-color: var(--color-primary);
}

.quick-note-btn:active {
  transform: scale(0.95);
}

/* ── Chatbot ─────────────────────────────────────────────────── */
.chat-msg {
  margin-bottom: 12px;
  display: flex;
}

.chat-msg.user {
  justify-content: flex-end;
}

.chat-msg.bot {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.bot-bubble {
  background: #fff;
  color: var(--color-text);
  border: 1px solid #E2E8F0;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.user-bubble {
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bot-bubble.typing {
  color: #999;
  animation: pulse 1s infinite;
}

.bot-bubble.error {
  background: #FFF5F5;
  border-color: rgba(230,57,70,0.2);
  color: #9B0000;
}

.chat-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-family);
  color: var(--color-primary);
  background: rgba(0,119,182,0.06);
  border: 1.5px solid rgba(0,119,182,0.15);
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
}

.chat-quick:active {
  transform: scale(0.95);
  background: rgba(0,119,182,0.12);
}

/* ── Loading Spinner ────────────────────────────────────────── */
.loading-spinner {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-muted);
  font-size: var(--font-base);
}

/* ── App boot splash (shown until first render replaces #main-content) ── */
.app-boot {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  background: linear-gradient(165deg, #01296B 0%, #023E8A 25%, #0077B6 55%, #00B4D8 80%, #48CAE4 100%);
}

.app-boot-logo {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-full);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(1,41,107,0.35);
}

.app-boot-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

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

/* ── Empty State ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--color-text-muted);
}

.empty-state svg {
  margin: 0 auto var(--space-md);
  color: var(--color-accent);
}

/* ── Tank Profile Cards ─────────────────────────────────────── */
.tank-profile .profile-section {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-md);
}

.tank-profile .profile-section h4 {
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tank-profile .fact-sheet-card {
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.tank-profile .alert-card.warning {
  background: linear-gradient(135deg, #FFF8F0, #FFF5E6) !important;
  border-left: 4px solid var(--color-warning) !important;
  box-shadow: var(--shadow-card);
}

.tank-profile .alert-card.warning .alert-icon {
  font-size: 24px;
}

.tank-profile .info-card {
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--color-secondary);
}

.tank-profile .livestock-item {
  transition: background-color var(--transition-fast);
  padding: 10px var(--space-sm) !important;
  border-radius: var(--radius-sm);
}

.tank-profile .livestock-item:hover {
  background-color: #F7FAFC;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Toggle switch for settings */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #CBD5E0;
  border-radius: 26px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: #0077B6;
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}



/* orphaned dark mode removed */


/* ── Touch Targets for Wet Hands ─────────────────────────────── */
.visit-tab { min-height: 48px !important; padding: 0 12px !important; }
.checkmark { width: 36px !important; height: 36px !important; min-width: 36px !important; }
.checklist-item { min-height: 52px !important; padding: 10px 4px !important; }
.all-good-btn { min-height: 48px !important; font-size: 15px !important; }
.back-btn { width: 44px !important; height: 44px !important; }
.card-action-btn { min-height: 40px !important; padding: 8px 14px !important; }
.na-btn { min-height: 40px !important; padding: 8px 14px !important; }
.start-service-btn { min-height: 44px !important; font-size: 15px !important; }

/* ── Premium Rounded Corners ─────────────────────────────────── */
.btn { border-radius: 14px !important; }
.btn-sm { border-radius: 10px !important; }
.modal-overlay .modal { border-radius: 24px 24px 0 0 !important; }
@media (min-width: 600px) { .modal-overlay .modal { border-radius: 24px !important; } }

/* ── Smooth Animations ───────────────────────────────────────── */
.screen { animation: pageSlideIn 300ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pageSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.appointment-card:active { transform: scale(0.98) !important; }

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  #bottom-nav, #offline-banner, #sync-banner, .fab { display: none !important; }
  #main-content { padding-bottom: 0; }
}

/* ── Admin Console shell ─────────────────────────────────────── */
.admin-screen { padding-top: 0; }
/* Reset .screen-header flex defaults — the admin shell stacks title row +
   banner + tabs vertically, not horizontally. */
.admin-shell-header.screen-header,
.admin-shell-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, #01296B 0%, #023E8A 100%);
  color: #F0F8FF;
  margin: -16px -16px 12px;
  padding: 14px 16px 0;
  min-height: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 16px rgba(1,41,107,0.18);
  align-items: initial;
  justify-content: initial;
}
.admin-shell-header h2 { color: #FFFFFF; }
.admin-shell-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.admin-shell-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: #FFFFFF;
  letter-spacing: 0.2px;
}
.admin-shell-sub {
  font-size: 12px;
  color: rgba(240,248,255,0.78);
  margin-top: 2px;
  font-weight: 500;
}
.admin-shell-actions { display: flex; align-items: center; gap: 8px; }
.admin-shell-refresh {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, transform 150ms ease;
}
.admin-shell-refresh:hover { background: rgba(255,255,255,0.18); }
.admin-shell-refresh:active { transform: rotate(180deg); }

.admin-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.22);
}
.admin-source-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBD5E0;
}
.admin-source-pill[data-state="authed"] { background: rgba(42,157,143,0.28); border-color: rgba(154,230,180,0.40); }
.admin-source-pill[data-state="authed"]::before { background: #9AE6B4; box-shadow: 0 0 6px #9AE6B4; }
.admin-source-pill[data-state="unauthenticated"] { background: rgba(244,162,97,0.28); border-color: rgba(254,213,164,0.50); }
.admin-source-pill[data-state="unauthenticated"]::before { background: #F6AD55; }
.admin-source-pill[data-state="unknown"] { background: rgba(160,174,192,0.30); }
.admin-source-pill[data-state="unknown"]::before { background: #A0AEC0; }
.admin-source-pill[data-state="loading"]::before { background: #90E0EF; }
.admin-source-pill[data-state="demo"] {
  background: linear-gradient(120deg, rgba(159,122,234,0.45), rgba(99,179,237,0.45));
  border-color: rgba(214,188,250,0.50);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(214,188,250,0.18) inset;
}
.admin-source-pill[data-state="demo"]::before { background: #D6BCFA; box-shadow: 0 0 8px #D6BCFA; }

.admin-connection-banner {
  margin: 10px 0 6px;
}
.admin-conn-msg {
  background: rgba(255,255,255,0.92);
  color: #1A202C;
  border-left: 4px solid #F4A261;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.admin-conn-msg strong { color: #023E8A; }
.admin-conn-msg a { color: #0077B6; font-weight: 700; text-decoration: underline; }
.admin-conn-msg[data-state="unknown"] { border-left-color: #A0AEC0; }
.admin-conn-msg[data-state="unauthenticated"] { border-left-color: #F4A261; }
.admin-conn-msg[data-state="demo"] {
  border-left-color: #9F7AEA;
  background: linear-gradient(90deg, rgba(214,188,250,0.18), rgba(255,255,255,0.92) 30%);
}
.admin-conn-msg[data-state="demo"] strong { color: #553C9A; }
.admin-conn-msg[data-state="demo"] em {
  color: #553C9A;
  font-style: normal;
  font-weight: 600;
}
.admin-conn-msg[data-state="error"] { border-left-color: #E53E3E; }
.admin-conn-msg[data-state="error"] strong { color: #9B2C2C; }
/* Inline hint shown when demo mode auto-resumed from a previous session.
   Subtle, non-emergency styling — the operator already has the loud DEMO
   pill + banner; this just answers "why am I in demo right now?". */
.admin-conn-resume {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #553C9A;
  background: rgba(214,188,250,0.45);
}

/* Soft-empty variant when the operator is in demo mode and the demo data
   module didn't ship a sample for that section yet. Visually identical to
   the auth soft-empty but with a subtle purple accent so it reads as
   "demo gap" not "permission problem". */
.empty-state-soft[data-demo="true"] svg {
  stroke: #B794F4;
}
.empty-state-soft[data-demo="true"] p {
  color: #553C9A;
}

.admin-shell-header .admin-tabs {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 4px;
  margin: 10px -2px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  gap: 4px;
  border-radius: 12px;
}
.admin-shell-header .admin-tabs::-webkit-scrollbar { display: none; }
.admin-shell-header .admin-tab-btn {
  flex: 0 0 auto;
  color: rgba(240,248,255,0.78);
  background: transparent;
  border-radius: 8px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.admin-shell-header .admin-tab-btn:hover { color: #FFFFFF; background: rgba(255,255,255,0.08); }
.admin-shell-header .admin-tab-btn.active {
  background: #FFFFFF;
  color: #01296B;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
/* Bottom padding inside the sticky header so the tabs don't crowd the edge. */
.admin-shell-header { padding-bottom: 10px; }

/* Attention chip rendered after a tab label (e.g. "Action Center · 5").
   Severity colors mirror the existing analytics palette: red high, amber
   medium, blue low, neutral info. Chip stays compact so it never wraps a
   tab onto a second line on the narrow mobile breakpoint. */
.admin-shell-header .admin-tab-btn .admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 0 7px;
  min-width: 20px;
  height: 18px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.16);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.20);
}
.admin-shell-header .admin-tab-btn .admin-tab-badge[data-severity="high"] {
  background: #E53E3E;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0.16);
}
.admin-shell-header .admin-tab-btn .admin-tab-badge[data-severity="medium"] {
  background: #DD6B20;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0.16);
}
.admin-shell-header .admin-tab-btn .admin-tab-badge[data-severity="low"] {
  background: #3182CE;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0.16);
}
/* On the active (white) tab, neutral/info chips need a darker tone for
   contrast against the white pill. Severity-colored chips keep their fill
   so the red/amber/blue signal still reads at a glance. */
.admin-shell-header .admin-tab-btn.active .admin-tab-badge {
  background: #EDF2F7;
  color: #1A202C;
  border-color: #CBD5E0;
}
.admin-shell-header .admin-tab-btn.active .admin-tab-badge[data-severity="high"] {
  background: #E53E3E;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0.12);
}
.admin-shell-header .admin-tab-btn.active .admin-tab-badge[data-severity="medium"] {
  background: #DD6B20;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0.12);
}
.admin-shell-header .admin-tab-btn.active .admin-tab-badge[data-severity="low"] {
  background: #3182CE;
  color: #FFFFFF;
  border-color: rgba(0,0,0,0.12);
}

/* ── Today snapshot strip ───────────────────────────────────────
   Compact KPI ribbon between the connection banner and the tab bar so Dalton
   sees stuck visits / unassigned slots / follow-ups due from every tab, not
   just Overview. Tiles share the dark-bordered card language of the rest of
   the admin shell and stay readable down to 360px viewports by horizontal-
   scrolling rather than wrapping. */
.admin-snapshot-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 10px -2px 0;
  padding: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-snapshot-strip::-webkit-scrollbar { display: none; }
.admin-snapshot-strip[hidden] { display: none; }

.admin-snapshot-tile {
  flex: 1 1 0;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #F0F8FF;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 80ms ease;
}
.admin-snapshot-tile:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
}
.admin-snapshot-tile:active { transform: translateY(1px); }
.admin-snapshot-tile:focus-visible {
  outline: 2px solid #9AE6B4;
  outline-offset: 2px;
}
.admin-snapshot-tile-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.admin-snapshot-tile-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(240,248,255,0.78);
}
/* Severity tints: a left-edge accent stripe plus a slightly stronger fill.
   Keeping the accent on the left edge instead of saturating the whole tile
   means the white value/label stays high-contrast on the dark gradient. */
.admin-snapshot-tile[data-severity="ok"]    { border-left: 4px solid #38A169; }
.admin-snapshot-tile[data-severity="info"]  { border-left: 4px solid #A0AEC0; }
.admin-snapshot-tile[data-severity="low"]   { border-left: 4px solid #3182CE; background: rgba(49,130,206,0.18); }
.admin-snapshot-tile[data-severity="medium"]{ border-left: 4px solid #DD6B20; background: rgba(221,107,32,0.20); }
.admin-snapshot-tile[data-severity="high"]  { border-left: 4px solid #E53E3E; background: rgba(229,62,62,0.22); }

.admin-snapshot-meta {
  flex: 0 0 auto;
  align-self: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(240,248,255,0.70);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.admin-snapshot-meta-source { text-transform: uppercase; color: rgba(240,248,255,0.86); }
.admin-snapshot-strip[data-source="demo"] .admin-snapshot-meta {
  background: rgba(159,122,234,0.22);
  color: #E9D8FD;
}
.admin-snapshot-strip[data-source="demo"] .admin-snapshot-meta-source { color: #FAF5FF; }

/* Mobile (≤480px): tiles get a smaller fixed minimum and the meta chip moves
   below the row to keep tiles tap-target-sized without horizontal scroll. */
@media (max-width: 480px) {
  .admin-snapshot-strip {
    flex-wrap: wrap;
  }
  .admin-snapshot-tile {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .admin-snapshot-meta {
    flex: 1 1 100%;
    text-align: center;
  }
}

.admin-tab-content { padding: 0; }

/* Soft empty state used when an admin panel can't load because the user
   isn't authenticated. The full red error state is reserved for transient
   network failures. */
.empty-state-soft {
  background: rgba(144,224,239,0.10);
  border: 1px dashed rgba(2,62,138,0.22);
  border-radius: 12px;
  padding: 20px 16px;
  margin: 8px 0;
}
.empty-state-soft p { margin: 8px 0 0; color: #4A5568; font-size: 13px; }
.empty-state-soft svg { color: #0077B6 !important; }

/* Tighter spacing inside admin tab content so the new header doesn't push
   everything down too far. */
.admin-tab-content > .empty-state,
.admin-tab-content > .loading-spinner { padding: 24px 16px; }

/* Header "?" affordance — mirrors .admin-shell-refresh so the two header
   buttons read as a matched pair. Discoverability: gives Dalton a visible
   entry point to the keyboard shortcuts without expecting him to type "?". */
.admin-shell-help {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, transform 150ms ease;
}
.admin-shell-help:hover { background: rgba(255,255,255,0.18); }
.admin-shell-help:active { transform: scale(0.94); }

/* Keyboard-shortcut help overlay. Centered modal on a dimmed backdrop.
   Visually consistent with the admin shell: dark card, soft shadow, the
   same accent palette as the rest of the console. */
.admin-shortcut-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 12, 28, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: admin-shortcut-help-fade 140ms ease-out;
}
@keyframes admin-shortcut-help-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.admin-shortcut-help-card {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #0F172A;
  color: #E2E8F0;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.20);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.admin-shortcut-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
}
.admin-shortcut-help-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: 0.2px;
}
.admin-shortcut-help-close {
  background: transparent;
  border: 1px solid rgba(148,163,184,0.30);
  color: #CBD5E0;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-shortcut-help-close:hover { background: rgba(148,163,184,0.16); color: #FFFFFF; }
.admin-shortcut-help-body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-shortcut-help-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 6px;
}
.admin-shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.admin-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #F1F5F9;
  background: #1E293B;
  border: 1px solid rgba(148,163,184,0.32);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.admin-shortcut-label {
  font-size: 13px;
  color: #E2E8F0;
}
.admin-shortcut-help-note {
  font-size: 11px;
  color: #94A3B8;
  border-top: 1px solid rgba(148,163,184,0.16);
  padding-top: 10px;
  line-height: 1.4;
}

/* Mobile/tablet: full-width card, slightly smaller text. */
@media (max-width: 480px) {
  .admin-shortcut-help-card { max-width: 100%; }
  .admin-shortcut-help-head { padding: 12px 14px 8px; }
  .admin-shortcut-help-body { padding: 10px 14px 14px; }
  .admin-shortcut-label { font-size: 12.5px; }
}

/* ---- Command palette (⌘K / Ctrl+K) -------------------------------------
   Power-user launcher styled as a compact dark card with a soft glow. Keeps
   visual continuity with .admin-shortcut-help so the two overlays read as a
   matched pair, but sits a bit higher on screen so it doesn't collide with
   the mobile soft keyboard. */
.admin-shell-cmdk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.admin-shell-cmdk:hover { background: rgba(255,255,255,0.18); }
.admin-shell-cmdk:active { transform: scale(0.94); }

.admin-command-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 12, 28, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  animation: admin-command-palette-fade 120ms ease-out;
}
@keyframes admin-command-palette-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.admin-command-palette-card {
  width: 100%;
  max-width: 560px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: #0F172A;
  color: #E2E8F0;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 32px 80px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
}
.admin-command-palette-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.admin-command-palette-search-icon {
  color: #94A3B8;
  flex: 0 0 auto;
}
.admin-command-palette-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: #F8FAFC;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.admin-command-palette-input::placeholder { color: #64748B; }
.admin-command-palette-hint-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #CBD5E0;
  background: #1E293B;
  border: 1px solid rgba(148,163,184,0.30);
  border-bottom-width: 2px;
  border-radius: 6px;
}
.admin-command-palette-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
}
.admin-command-palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.admin-command-palette-item.selected {
  background: rgba(56,189,248,0.18);
  outline: 1px solid rgba(56,189,248,0.45);
}
.admin-command-palette-item-label {
  font-size: 13.5px;
  color: #F1F5F9;
}
.admin-command-palette-item-hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #94A3B8;
  letter-spacing: 0.3px;
}
.admin-command-palette-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12.5px;
  color: #94A3B8;
}
.admin-command-palette-foot {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid rgba(148,163,184,0.18);
  font-size: 11px;
  color: #94A3B8;
}
.admin-command-palette-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 18px;
  padding: 0 4px;
  margin-right: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #CBD5E0;
  background: #1E293B;
  border: 1px solid rgba(148,163,184,0.30);
  border-radius: 4px;
}

@media (max-width: 480px) {
  .admin-command-palette-overlay { padding: 8vh 12px 16px; }
  .admin-command-palette-card { max-height: 80vh; }
  .admin-command-palette-input { font-size: 14px; }
  .admin-shell-cmdk { padding: 0 8px; font-size: 11px; }
}