/* Glassmorphism card styles */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.glass-card:hover {
  box-shadow: 0 8px 32px 0 var(--accent-glow);
}

/* Bulma dark mode overrides */
.card {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.card-content {
  background-color: transparent !important;
  color: var(--text-main) !important;
}

.navbar-dashboard {
  background: rgba(15, 23, 42, 0.9) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
}

.navbar-dashboard .navbar-item, .navbar-dashboard .navbar-link {
  color: var(--text-main) !important;
  font-weight: 500;
}

.navbar-dashboard .navbar-link:hover, .navbar-dashboard .navbar-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--accent) !important;
}

.tabs.is-toggle a {
  background-color: rgba(30, 41, 59, 0.6);
  border-color: var(--border-color);
  color: var(--text-muted);
  font-weight: 500;
  transition: all 0.3s;
}

.tabs.is-toggle li.is-active a {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 0 15px var(--accent-glow);
}

.tabs.is-toggle a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-bright);
}

/* Inputs styled for dark mode */
.input, .select select, .textarea {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-bright) !important;
  border-radius: 6px;
}

.input::placeholder {
  color: #94a3b8 !important;
}

.input:focus, .select select:focus, .textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

/* High contrast text overrides */
.label {
  color: var(--text-bright) !important;
}

strong {
  color: var(--text-bright) !important;
}

.title {
  color: var(--text-bright) !important;
}

.subtitle {
  color: var(--text-muted) !important;
}

.title + .subtitle {
  margin-top: 0.5rem !important;
}

.help {
  color: #e2e8f0 !important;
  font-size: 0.85rem !important;
}

.help.is-danger {
  color: var(--danger) !important;
  font-weight: 500;
}

.help.is-success {
  color: var(--success) !important;
}

/* Custom badges */
.status-tag {
  font-weight: 600;
  border-radius: 4px;
  padding: 0.25em 0.75em;
  font-size: 0.8rem;
  text-transform: uppercase;
  display: inline-block;
}

.status-success {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.status-error {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.status-pending {
  background-color: rgba(245, 158, 11, 0.2);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.status-missing {
  background-color: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.button-accent {
  background-color: var(--accent) !important;
  color: #fff !important;
  border: none !important;
}
.button-accent:hover {
  background-color: #2563eb !important;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Postgres raw data modal styling */
.data-viewer-modal .modal-card {
  width: 90% !important;
  max-width: 1400px;
}

.data-viewer-modal .modal-card-head,
.data-viewer-modal .modal-card-foot {
  background-color: #1e293b !important;
  border-color: var(--border-color) !important;
}

.data-viewer-modal .modal-card-body {
  background-color: var(--bg-dark) !important;
  color: var(--text-main) !important;
}

.modal-card-title {
  color: var(--text-bright) !important;
}

/* Custom Autocomplete Dropdown Styling */
.dropdown-content {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item {
  color: var(--text-main) !important;
  transition: background-color 0.2s, color 0.2s;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-bright) !important;
}

.dropdown-item.is-active-item {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* Responsive Action Buttons and Level Overflow Prevention */
.glass-card {
  max-width: 100%;
  box-sizing: border-box;
}

.level {
  flex-wrap: wrap !important;
  gap: 1rem;
}

.level-left, .level-right {
  max-width: 100%;
  flex-shrink: 1;
}

.level-right {
  margin-top: 0 !important;
}

.buttons {
  flex-wrap: wrap !important;
  max-width: 100%;
  gap: 0.5rem;
}

.buttons .button {
  margin-bottom: 0.25rem !important;
  margin-right: 0 !important;
}

.button {
  max-width: 100%;
  white-space: normal !important;
  height: auto !important;
  min-height: 2.25rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  line-height: 1.2;
}

.button span {
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}