/* PTO Manager Custom Styles */

/* Icon transitions */
.bi::before {
  display: inline-block;
  transition: transform 0.2s ease;
}

.rotated::before {
  transform: rotate(45deg);
}

/* Background sections */
.bg-section-2 {
  background-color: rgb(242 242 245);
}

.bg-section-3 {
  background: rgb(234, 234, 240);
}

.bg-gradient {
  background: linear-gradient(to right, #eef2f3, #e2e9ef) !important;
}

.bg-form {
  background-color: rgb(223, 224, 225);
}

/* Shadows */
.inset-shadow {
  box-shadow: inset 0 6px 6px -4px rgba(0, 0, 0, 0.4), 
              inset 0 -5px 6px -4px rgba(0, 0, 0, 0.4);
}

.inset-top-shadow {
  box-shadow: inset 0 6px 6px -4px rgba(0, 0, 0, 0.4);
}

/* Alert animations */
.show-alert {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

/* Loading spinner styles */
.spinner-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Instance card styles */
.instance-card {
  transition: all 0.2s ease;
}

.instance-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.instance-status-active {
  border-left: 4px solid #28a745;
}

.instance-status-inactive {
  border-left: 4px solid #6c757d;
}

.instance-status-error {
  border-left: 4px solid #dc3545;
}

/* Header logo animation */
.header-logo {
  transition: transform 0.3s ease;
}

.header-logo:hover {
  transform: scale(1.05);
}

/* Subscription status badges */
.subscription-active {
  color: #28a745;
}

.subscription-inactive {
  color: #6c757d;
}

.subscription-cancelled {
  color: #dc3545;
}

.subscription-past-due {
  color: #ffc107;
}

/* Usage meter styles */
.usage-meter {
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.usage-meter-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.usage-meter-fill.under-limit {
  background-color: #28a745;
}

.usage-meter-fill.over-soft-limit {
  background-color: #ffc107;
}

.usage-meter-fill.at-hard-limit {
  background-color: #dc3545;
}

/* Telemetry chart container */
.telemetry-chart {
  height: 300px;
  position: relative;
}

/* Admin dashboard styles */
.stat-card {
  border-radius: 10px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  opacity: 0.8;
}

/* Responsive helpers */
@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
  }
  
  .mobile-center {
    text-align: center !important;
  }
  
  .mobile-full-width {
    width: 100% !important;
  }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  .bg-section-2 {
    background-color: rgb(50, 50, 55);
  }
  
  .bg-section-3 {
    background-color: rgb(45, 45, 50);
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .card {
    break-inside: avoid;
  }
}

/* Focus styles for accessibility */
.btn:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Loading states */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Connection status indicators */
.connection-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.connection-status.connected {
  background-color: #28a745;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

.connection-status.disconnected {
  background-color: #dc3545;
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

.connection-status.unknown {
  background-color: #6c757d;
}