/**
 * ALLEGRO FLEET — Global Dark Theme Overrides
 * Centralizirani override za Bootstrap i third-party komponente.
 * Cilj: nema bijelih tablica, formi, dropdowna unutar dark layouta.
 */

/* ============================================
   DARK TABLES
   ============================================ */
.table,
.table-responsive .table,
.table-striped,
.table-hover {
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.1) !important;
  --bs-table-hover-bg: var(--bg-hover) !important;
  --bs-table-border-color: var(--border-muted) !important;
}

.table-responsive {
  background-color: var(--bg-elevated) !important;
  border-radius: var(--radius-lg);
}

.table,
.table thead,
.table tbody,
.table tr,
.table td,
.table th {
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-muted) !important;
}

.table thead th {
  background-color: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

.table-danger,
tr.table-danger td {
  background-color: var(--danger-muted) !important;
  color: var(--text-primary) !important;
}

.table-warning,
tr.table-warning td {
  background-color: var(--warning-muted) !important;
  color: var(--text-primary) !important;
}

/* Badge readability on dark - Zamjena, QR, RUČNO, Utovareno, Istovareno */
.badge.bg-warning,
.badge.bg-warning.text-dark {
  color: #1a1a1a !important;
}
.badge.bg-info,
.badge.bg-success,
.badge.bg-secondary,
.badge.bg-danger,
.badge.bg-dark {
  color: #fff !important;
}

/* Row state highlights — Zamjena, QR, RUČNO (equipment table) */
.badge.badge-sm,
.badge-sm {
  font-size: 0.7rem;
  padding: 0.2em 0.4em;
}

/* ============================================
   DARK FORMS
   ============================================ */
.form-control,
.form-select,
.form-control:not([type="file"]),
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.input-group-text {
  background-color: var(--bg-elevated) !important;
  color: var(--form-control-color, #e2e8f0) !important;
  border-color: var(--border-default) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--form-placeholder-color, #94a3b8) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  background-color: var(--bg-elevated) !important;
  border-color: var(--form-focus-ring, #3b82f6) !important;
  color: var(--form-control-color, #e2e8f0) !important;
  box-shadow: 0 0 0 1px var(--form-focus-ring, #3b82f6) !important;
}

/* Native date/datetime picker ikona — vidljiva na tamnoj pozadini (Chromium, Safari, Edge) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
  cursor: pointer;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
  cursor: pointer;
}

.form-control:disabled,
.form-select:disabled,
input:disabled {
  background-color: var(--bg-base) !important;
  color: var(--text-muted) !important;
  opacity: 0.8;
}

.input-group-text {
  color: var(--text-secondary) !important;
}

.form-check-input {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}

.form-check-input:checked {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}

.form-check-label {
  color: var(--text-primary) !important;
}

.form-label {
  color: var(--text-secondary) !important;
}

/* ============================================
   DARK DROPDOWNS
   ============================================ */
.dropdown-menu {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
}

.dropdown-item {
  color: var(--text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider {
  border-color: var(--border-muted) !important;
}

.dropdown-header {
  color: #94a3b8 !important;
}

/* Voting notifications dropdown - čitljiv tekst (fallback ako inline u JS ne radi) */
#voting-notifications-dropdown li,
#voting-notifications-dropdown li .fw-bold,
#voting-notifications-dropdown li .small,
#voting-notifications-dropdown li div[style*="font-size:0.75rem"] {
  color: #e2e8f0 !important;
}
#voting-notifications-dropdown li .text-muted,
#voting-notifications-dropdown #voting-notifications-list .text-muted {
  color: #94a3b8 !important;
}
#voting-notifications-dropdown .dropdown-item {
  color: #e2e8f0 !important;
}

/* ============================================
   DARK MODALS
   ============================================ */
.modal-content {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}

.modal-header {
  border-bottom-color: var(--border-muted) !important;
  color: var(--text-primary) !important;
}

.modal-footer {
  border-top-color: var(--border-muted) !important;
}

.modal-body {
  color: var(--text-primary) !important;
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================
   DARK PAGINATION
   ============================================ */
.pagination .page-link {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

.pagination .page-link:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--accent-primary) !important;
  color: white !important;
  border-color: var(--accent-primary) !important;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--bg-base) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-muted) !important;
}

/* ============================================
   DARK LIST GROUP
   ============================================ */
.list-group-item {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-muted) !important;
  color: var(--text-primary) !important;
}

.list-group-item:hover {
  background-color: var(--bg-hover) !important;
}

.list-group-item-action:focus {
  background-color: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.dark-table {
  background-color: var(--bg-elevated) !important;
}

.dark-panel {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

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

.clickable-card {
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.clickable-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* FAZA 8: Card hover polish */
.card.clickable-card:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.card {
  transition: all 0.2s ease;
}

/* Hover underline za klikabilne linkove */
a.equipment-link:hover,
a.text-decoration-none.text-body:hover {
  text-decoration: underline !important;
}

/* Oprema (lista / grid): Bootstrap .text-body na tamnoj kartici = gotovo crn tekst — čitljiv naslov */
.card-body h5 a.text-body,
.card-body a.text-body.text-decoration-none,
.card .card-title,
.card-body .card-title {
  color: var(--text-primary, #e2e8f0) !important;
}

.card-body h5 a.text-body:hover,
.card-body a.text-body.text-decoration-none:hover {
  color: var(--bs-primary, #60a5fa) !important;
}

/* Tablica unutar kartice (npr. Sadržaj Casea): linkovi i općenito čitljiv tekst */
.card .table td,
.card .table td a {
  color: var(--text-primary, #e2e8f0) !important;
}

.card .table td a:hover {
  color: var(--bs-primary, #60a5fa) !important;
}

.card .table .text-muted,
.card .table small.text-muted {
  color: var(--text-muted, #94a3b8) !important;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.table-wrapper-dark {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.empty-state-dark {
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-8);
}

/* bg-light u card/panel kontekstu — dark varijanta (ne za image placeholdere) */
.card .bg-light:not(.card-img-top):not([style*="height"]),
.list-group-item .bg-light {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-muted);
}

/* ============================================
   EVENT EQUIPMENT TABLE (operativni panel)
   ============================================ */
.equipment-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .equipment-table-wrapper {
    max-height: 300px;
  }
}

.equipment-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface, #0f172a) !important;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border-muted, rgba(255,255,255,0.1));
}

.equipment-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg-surface, #1e293b) !important;
  padding: 0.75rem;
  border-top: 1px solid var(--border-muted);
}

/* FullCalendar dark mode — učitava se u calendar/index @push('styles') nakon FC CDN */