/* Cardapio Quatinga v2 - styles.css
   CSS custom extraido fielmente do <style> do index.html v1.x.

   NOTA: o layout/comportamento visual dependem majoritariamente do Tailwind CDN
   (carregado no index.html). Este arquivo reune apenas o CSS custom escrito a mao.
*/

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; }

.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.3s ease; }
.modal-content { padding: 2rem; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); max-height: 90vh; overflow-y: auto; width: 90%; max-width: 500px; }

html.dark { background-color: #000000; color: #f4f4f5; }
.dark .modal-content { background-color: #09090b; border: 1px solid #27272a; color: #f4f4f5; }
html:not(.dark) .modal-content { background-color: white; color: #1f2937; }

#image-zoom-modal .modal-content { width: auto; max-width: 95%; padding: 0.5rem; background: none !important; box-shadow: none; border: none; }
#zoomed-image { max-width: 90vw; max-height: 85vh; border-radius: 0.75rem; }

input:read-only { cursor: not-allowed; }
html:not(.dark) input:read-only { background-color: #f3f4f6; }
.dark input:read-only { background-color: #18181b !important; color: #a1a1aa; border-color: #27272a; }

/* Wizard Buttons */
.wizard-btn { transition: all 0.2s ease-in-out; }
.wizard-btn:hover { transform: scale(1.03); border-color: #3b82f6; }
.wizard-btn:active { transform: scale(0.98); }
.dark .wizard-btn:active { background-color: #1e3a8a; }
html:not(.dark) .wizard-btn:active { background-color: #eff6ff; }

#cropper-container { max-height: 50vh; width: 100%; display: flex; justify-content: center; align-items: center; background-color: #f3f4f6; }
.dark #cropper-container { background-color: #18181b; }
#cropper-image { display: block; max-width: 100%; max-height: 100%; }

/* Toast Notifications */
#app-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 12px 24px; border-radius: 8px; z-index: 2000; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; pointer-events: none; transform: translateX(-50%) translateY(20px); }
#app-toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#app-toast.success { background-color: #22c55e; }
#app-toast.error { background-color: #ef4444; }
#app-toast.info { background-color: #3b82f6; }

@media print {
  .no-print { display: none !important; }
}