/**
 * TrackTms - App Styles
 * Style dla komponentów JavaScript
 */

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--text-inverse);
  font-weight: 500;
  animation: slideIn 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 350px;
}

.toast-success {
  background-color: #22c55e;
}

.toast-error {
  background-color: var(--danger);
}

.toast-info {
  background-color: var(--primary, var(--primary));
}

.toast-warning {
  background-color: var(--warning);
}

.toast.fade-out {
  animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Page loader */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e2e8f0;
  border-top-color: var(--primary, var(--primary));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-active,
.status-moving,
.status-driving {
  background-color: #dcfce7;
  color: #166534;
}

.status-idle,
.status-parked,
.status-available,
.status-resting {
  background-color: #fef9c3;
  color: #854d0e;
}

.status-inactive,
.status-unavailable,
.status-off_duty {
  background-color: var(--secondary-light);
  color: var(--secondary-hover);
}

.status-maintenance,
.status-out_of_service {
  background-color: var(--danger-light);
  color: var(--danger-hover);
}

.status-new {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-acknowledged {
  background-color: #fef9c3;
  color: #854d0e;
}

.status-resolved {
  background-color: #dcfce7;
  color: #166534;
}

.status-dismissed {
  background-color: var(--secondary-light);
  color: var(--secondary);
}

.status-scheduled {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-in_progress {
  background-color: #fef9c3;
  color: #854d0e;
}

.status-completed {
  background-color: #dcfce7;
  color: #166534;
}

.status-overdue,
.status-cancelled {
  background-color: var(--danger-light);
  color: var(--danger-hover);
}

.status-ok {
  background-color: #dcfce7;
  color: #166534;
}

.status-warning {
  background-color: #fef9c3;
  color: #854d0e;
}

.status-expired {
  background-color: var(--danger-light);
  color: var(--danger-hover);
}

/* Severity badges */
.severity-badge,
.alert-severity {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.severity-low {
  background-color: #dcfce7;
  color: #166534;
}

.severity-medium {
  background-color: #fef9c3;
  color: #854d0e;
}

.severity-high {
  background-color: #fed7aa;
  color: #c2410c;
}

.severity-critical {
  background-color: var(--danger-light);
  color: var(--danger-hover);
}

/* Alert items */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-left: 4px solid #e2e8f0;
}

.alert-item:hover {
  background-color: #f8fafc;
}

.alert-item.alert-low {
  border-left-color: #22c55e;
}

.alert-item.alert-medium {
  border-left-color: var(--warning);
}

.alert-item.alert-high {
  border-left-color: #f97316;
}

.alert-item.alert-critical {
  border-left-color: var(--danger);
}

.alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--secondary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alert-title {
  font-weight: 600;
  color: #1e293b;
}

.alert-message {
  font-size: 13px;
  color: var(--secondary);
}

.alert-time {
  font-size: 12px;
  color: #94a3b8;
}

/* Trip items */
.trip-item {
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #e2e8f0;
  margin-bottom: 8px;
}

.trip-item:hover {
  background-color: #f8fafc;
}

.trip-route {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trip-origin,
.trip-destination {
  font-weight: 500;
  color: #1e293b;
}

.trip-info {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--secondary);
}

/* Vehicle cards */
.vehicle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #e2e8f0;
}

.vehicle-card:hover {
  border-color: var(--primary, var(--primary));
  box-shadow: 0 2px 8px rgba(0, 82, 255, 0.1);
}

.vehicle-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.vehicle-icon.active,
.vehicle-icon.moving {
  background-color: #dcfce7;
  color: #16a34a;
}

.vehicle-icon.idle,
.vehicle-icon.parked {
  background-color: #fef9c3;
  color: #ca8a04;
}

.vehicle-icon.inactive {
  background-color: var(--secondary-light);
  color: var(--secondary);
}

.vehicle-card .plate {
  font-weight: 600;
  color: #1e293b;
}

.vehicle-card .status {
  font-size: 13px;
  color: var(--secondary);
}

/* Notification items */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  transition: background-color 0.2s;
}

.notification-item.unread {
  background-color: #f0f9ff;
}

.notification-item:hover {
  background-color: #f8fafc;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-title {
  font-weight: 600;
  color: #1e293b;
}

.notification-message {
  font-size: 14px;
  color: var(--secondary);
}

.notification-time {
  font-size: 12px;
  color: #94a3b8;
}

/* Tables */
.vehicles-table tbody tr,
.drivers-table tbody tr,
.alerts-table tbody tr,
.maintenance-table tbody tr,
.geofences-table tbody tr,
.routes-table tbody tr,
.users-table tbody tr,
.documents-table tbody tr {
  cursor: pointer;
  transition: background-color 0.2s;
}

.vehicles-table tbody tr:hover,
.drivers-table tbody tr:hover,
.alerts-table tbody tr:hover,
.maintenance-table tbody tr:hover,
.geofences-table tbody tr:hover,
.routes-table tbody tr:hover,
.users-table tbody tr:hover,
.documents-table tbody tr:hover {
  background-color: #f8fafc;
}

/* Vehicle info in table */
.vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vehicle-plate {
  font-weight: 600;
  color: #1e293b;
}

.vehicle-brand {
  font-size: 13px;
  color: var(--secondary);
}

/* Driver info in table */
.driver-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.driver-info .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #6366F1);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.driver-name {
  font-weight: 600;
  color: #1e293b;
}

.driver-phone {
  font-size: 13px;
  color: var(--secondary);
  display: block;
}

/* User info in table */
.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-weight: 600;
  color: #1e293b;
}

.user-email {
  font-size: 13px;
  color: var(--secondary);
}

/* Actions buttons */
.actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--secondary-light);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #e2e8f0;
}

/* Expiring documents list */
.expiring-documents {
  background: #fef9c3;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.expiring-documents h4 {
  margin: 0 0 12px 0;
  color: #854d0e;
}

.expiring-documents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.expiring-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.expiring-item:last-child {
  border-bottom: none;
}

.doc-name {
  font-weight: 500;
  color: #854d0e;
}

.doc-expiry {
  font-size: 13px;
  color: #92400e;
}

/* Helper classes */
.text-center {
  text-align: center;
}

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

/* Simple icons (placeholder) */
[class^="icon-"]::before {
  font-family: sans-serif;
}

.icon-eye::before { content: "👁"; }
.icon-edit::before { content: "✏"; }
.icon-chart::before { content: "📊"; }
.icon-bell::before { content: "🔔"; }
.icon-info::before { content: "ℹ"; }
.icon-truck::before { content: "🚚"; }
.icon-arrow-right::before { content: "→"; }
.icon-speedometer::before { content: "⚡"; }
.icon-warning::before { content: "⚠"; }
.icon-fuel::before { content: "⛽"; }
.icon-wrench::before { content: "🔧"; }
.icon-map-marker::before { content: "📍"; }