/* PilotM Tools - Minimal Bulma Customization */

/* Font imports and declarations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --pilotm-primary: #058bfd;
  --pilotm-primary-hover: #0277e8;
}

/* Global font settings */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-weight: 600;
}

/* Primary color overrides */
.is-primary { background-color: var(--pilotm-primary) !important; }
.button.is-primary { background-color: var(--pilotm-primary); border-color: var(--pilotm-primary); }
.button.is-primary:hover { background-color: var(--pilotm-primary-hover); border-color: var(--pilotm-primary-hover); }
.navbar-item.is-active { background-color: var(--pilotm-primary) !important; color: white !important; }

/* Essential tool styling */
.tool-section { 
  padding: 2rem; 
  margin: 2rem auto; 
  max-width: 1200px; 
  background: white; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}

.tool-section h2 { color: var(--pilotm-primary); margin-bottom: 1.5rem; }

.result-section { 
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
  border: 2px solid var(--pilotm-primary); 
  border-radius: 8px; 
  padding: 1.5rem; 
  margin-top: 2rem; 
}

/* Card hover effects */
.card.is-clickable { cursor: pointer; transition: all 0.3s ease; }
.card.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* Loading indicator */
.htmx-indicator { display: none; }
.htmx-indicator.htmx-request { display: block; }

/* Status animations */
.status-indicator.is-warning { animation: pulse 2s infinite; }
.status-indicator.is-success { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Explanation Modal Styling */
.explanation-modal .modal-content { max-width: 800px; max-height: 90vh; overflow-y: auto; }
.explanation-content { padding: 2rem; }
.explanation-content h5 { color: var(--pilotm-primary); margin-bottom: 1.5rem; }
.explanation-content h6 { color: var(--pilotm-primary); margin-top: 1.5rem; margin-bottom: 0.75rem; }
.explanation-content ul { margin-bottom: 1.5rem; }
.explanation-content .formula-container { background: #f8f9fa; padding: 1rem; border-radius: 6px; margin: 1rem 0; text-align: center; font-family: monospace; }

/* Always show hamburger menu (override Bulma's default responsive behavior) */
.navbar-burger {
  display: block !important;
}

.navbar-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: white;
  box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
}

.navbar-menu.is-active {
  display: block;
}

/* Force vertical layout on all devices */
.navbar-start {
  flex-direction: column !important;
  width: 100%;
}

.navbar-start .navbar-item {
  width: 100%;
  justify-content: flex-start;
  border-radius: 0;
}

.navbar-start .navbar-item:hover {
  background-color: #f5f5f5;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .tool-section { padding: 1rem; margin: 1rem; }
  .field.is-grouped { flex-direction: column; }
  .field.is-grouped .control { margin-right: 0 !important; margin-bottom: 0.75rem; }
  .explanation-modal .modal-content { max-width: 95vw; margin: 1rem; }
  .explanation-content { padding: 1rem; }
}