/* Tema je u podešavanjima, pravna napomena samo u Uputstvu, a TachoDuck je početni znak. */
#themeToggle { display: none !important; }
#appSettingsPanel #manualActivityPanel { display: none !important; }
.legal-note { display: none !important; }

.settings-theme-field { min-width: 0; }

.tachoduck-empty-state {
  display: grid;
  place-items: center;
  min-height: clamp(300px, 58vh, 660px);
  padding: 24px;
}
.tachoduck-empty-state[hidden] { display: none !important; }

.tachoduck-empty-frame {
  width: min(560px, 100%);
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid var(--theme-border, var(--border));
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(5, 44, 77, .12);
}

.tachoduck-empty-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.loading-tachograph {
  width: 82px !important;
  height: 82px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  animation: none !important;
}

.loading-tachograph::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 5px solid var(--theme-border, var(--border));
  border-top-color: var(--accent, #0b8bd6);
  border-radius: 50%;
  animation: analysis-spin 1s linear infinite;
}

.loading-tachograph .loading-tachoduck-clip {
  position: absolute;
  inset: 0 !important;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: #fff !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent, #0b8bd6) 35%, transparent) !important;
}

.loading-tachoduck {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(2.15) translateY(-3%);
}

.settings-grid > *,
.settings-field,
.settings-field select,
.vehicle-settings-section,
.vehicle-settings-fields,
.instructions-settings-section {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 390px) {
  .settings-backdrop { align-items: stretch; }
  .settings-panel {
    width: 100vw;
    max-width: 100vw;
    padding: 12px max(12px, env(safe-area-inset-right)) 16px max(12px, env(safe-area-inset-left));
    overflow-x: hidden;
  }
  .settings-panel > header { padding-bottom: 12px; }
  .settings-panel h2 { font-size: 1.28rem; }
  .settings-grid { gap: 10px; padding-block: 12px; }
  .settings-field { gap: 5px; }
  .settings-field select,
  .vehicle-setting-columns input,
  .vehicle-setting-columns select {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .vehicle-settings-toggle,
  .instructions-settings-toggle {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    gap: 8px;
    padding: 10px;
  }
  .vehicle-settings-toggle strong,
  .instructions-settings-toggle strong { font-size: .88rem; }
  .vehicle-settings-toggle small,
  .instructions-settings-toggle small {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .7rem;
  }
  .vehicle-settings-fields { padding: 10px; }
  .vehicle-setting-columns,
  .vehicle-setting-columns.two { grid-template-columns: minmax(0, 1fr); }
  .instructions-settings-content { padding: 0 10px 10px; }
  .instructions-settings-content p { padding: 10px; font-size: .78rem; }
  .tachoduck-empty-state { min-height: 50vh; padding: 14px; }
  .tachoduck-empty-frame { width: min(280px, 100%); border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-tachograph::before { animation-duration: 2.2s; }
}