/* Modern Azure-Inspired Design Overhaul for EasyUptime */
/* This file modernizes the entire application with Azure design principles */

/* Local font stack - no external dependencies */
/* Using system fonts that are available on most devices */

/* CSS Variables for Azure Design System */
:root {
  /* Azure Colors */
  --azure-blue: #0078d4;
  --azure-blue-dark: #106ebe;
  --azure-blue-light: #40e0d0;
  --azure-blue-lighter: #deecf9;
  --azure-blue-lightest: #f3f9fd;
  
  /* Neutral Colors */
  --neutral-gray-0: #ffffff;
  --neutral-gray-10: #faf9f8;
  --neutral-gray-20: #f3f2f1;
  --neutral-gray-30: #edebe9;
  --neutral-gray-40: #e1dfdd;
  --neutral-gray-50: #d2d0ce;
  --neutral-gray-60: #c8c6c4;
  --neutral-gray-70: #a19f9d;
  --neutral-gray-80: #605e5c;
  --neutral-gray-90: #323130;
  --neutral-gray-100: #201f1e;
  
  /* Semantic Colors */
  --success-green: #107c10;
  --success-green-light: #dff6dd;
  --warning-orange: #ff8c00;
  --warning-orange-light: #fff4ce;
  --error-red: #d13438;
  --error-red-light: #fde7e9;
  
  /* Typography */
  --font-family-primary: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
  
  /* Spacing Scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.16);
  --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.24);
}

/* Base Typography */
body {
  font-family: var(--font-family-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--neutral-gray-90) !important;
  background: var(--neutral-gray-10) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary) !important;
  font-weight: 600 !important;
  color: var(--neutral-gray-100) !important;
  margin-bottom: var(--spacing-md) !important;
}

h1 { font-size: 32px !important; font-weight: 700 !important; }
h2 { font-size: 24px !important; font-weight: 600 !important; }
h3 { font-size: 20px !important; font-weight: 600 !important; }
h4 { font-size: 16px !important; font-weight: 600 !important; }
h5 { font-size: 14px !important; font-weight: 600 !important; }
h6 { font-size: 12px !important; font-weight: 600 !important; }

/* Navigation Bar */
.navbar {
  background: var(--neutral-gray-0) !important;
  border-bottom: 1px solid var(--neutral-gray-30) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--spacing-sm) 0 !important;
}

.navbar-brand {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--azure-blue) !important;
}

.navbar-nav .nav-link {
  color: var(--neutral-gray-80) !important;
  font-weight: 500 !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.2s ease !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--azure-blue) !important;
  background: var(--azure-blue-lightest) !important;
}

/* Buttons */
.btn {
  font-family: var(--font-family-primary) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.btn-primary {
  background: var(--azure-blue) !important;
  border-color: var(--azure-blue) !important;
  color: var(--neutral-gray-0) !important;
}

.btn-primary:hover {
  background: var(--azure-blue-dark) !important;
  border-color: var(--azure-blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-outline-primary {
  background: transparent !important;
  border-color: var(--azure-blue) !important;
  color: var(--azure-blue) !important;
}

.btn-outline-primary:hover {
  background: var(--azure-blue) !important;
  border-color: var(--azure-blue) !important;
  color: var(--neutral-gray-0) !important;
}

.btn-success {
  background: var(--success-green) !important;
  border-color: var(--success-green) !important;
}

.btn-success:hover {
  background: #0e6e0e !important;
  border-color: #0e6e0e !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-danger {
  background: var(--error-red) !important;
  border-color: var(--error-red) !important;
}

.btn-danger:hover {
  background: #b92b2f !important;
  border-color: #b92b2f !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-warning {
  background: var(--warning-orange) !important;
  border-color: var(--warning-orange) !important;
  color: var(--neutral-gray-0) !important;
}

.btn-warning:hover {
  background: #e67c00 !important;
  border-color: #e67c00 !important;
  color: var(--neutral-gray-0) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-light {
  background: var(--neutral-gray-20) !important;
  border-color: var(--neutral-gray-30) !important;
  color: var(--neutral-gray-80) !important;
}

.btn-light:hover {
  background: var(--neutral-gray-30) !important;
  border-color: var(--neutral-gray-40) !important;
  color: var(--neutral-gray-90) !important;
}

/* Cards */
.card {
  background: var(--neutral-gray-0) !important;
  border: 1px solid var(--neutral-gray-30) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
}

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

.card-header {
  background: var(--neutral-gray-10) !important;
  border-bottom: 1px solid var(--neutral-gray-30) !important;
  padding: var(--spacing-lg) !important;
  font-weight: 600 !important;
  color: var(--neutral-gray-100) !important;
}

.card-body {
  padding: var(--spacing-lg) !important;
}

.card-footer {
  background: var(--neutral-gray-10) !important;
  border-top: 1px solid var(--neutral-gray-30) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
}

/* Tables */
.table {
  background: var(--neutral-gray-0) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

.table th {
  background: var(--neutral-gray-10) !important;
  border-bottom: 1px solid var(--neutral-gray-30) !important;
  font-weight: 600 !important;
  color: var(--neutral-gray-100) !important;
  padding: var(--spacing-md) !important;
}

.table td {
  padding: var(--spacing-md) !important;
  border-bottom: 1px solid var(--neutral-gray-20) !important;
  color: var(--neutral-gray-80) !important;
}

.table tbody tr:hover {
  background: var(--neutral-gray-10) !important;
}

/* Forms */
.form-control {
  font-family: var(--font-family-primary) !important;
  border: 1px solid var(--neutral-gray-50) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  transition: all 0.2s ease !important;
  background: var(--neutral-gray-0) !important;
}

.form-control:focus {
  border-color: var(--azure-blue) !important;
  box-shadow: 0 0 0 2px var(--azure-blue-lighter) !important;
  outline: none !important;
}

.form-label {
  font-weight: 500 !important;
  color: var(--neutral-gray-100) !important;
  margin-bottom: var(--spacing-xs) !important;
}

.form-select {
  font-family: var(--font-family-primary) !important;
  border: 1px solid var(--neutral-gray-50) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  background: var(--neutral-gray-0) !important;
}

/* Alerts */
.alert {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  font-weight: 500 !important;
}

.alert-success {
  background: var(--success-green-light) !important;
  color: var(--success-green) !important;
}

.alert-danger {
  background: var(--error-red-light) !important;
  color: var(--error-red) !important;
}

.alert-warning {
  background: var(--warning-orange-light) !important;
  color: var(--warning-orange) !important;
}

.alert-info {
  background: var(--azure-blue-lightest) !important;
  color: var(--azure-blue) !important;
}

/* Status Badges */
.badge {
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
}

.badge.bg-success {
  background: var(--success-green) !important;
}

.badge.bg-danger {
  background: var(--error-red) !important;
}

.badge.bg-warning {
  background: var(--warning-orange) !important;
  color: var(--neutral-gray-0) !important;
}

.badge.bg-primary {
  background: var(--azure-blue) !important;
}

/* Modern Dashboard Overrides */
.dashboard-container {
  background: var(--neutral-gray-10) !important;
  padding: var(--spacing-2xl) !important;
}

/* Stats Grid Modernization */
.stats-grid {
  gap: var(--spacing-lg) !important;
  margin-bottom: var(--spacing-2xl) !important;
}

.stat-card {
  background: var(--neutral-gray-0) !important;
  border: 1px solid var(--neutral-gray-30) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--spacing-xl) !important;
  transition: all 0.3s ease !important;
}

.stat-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
  border-color: var(--azure-blue) !important;
}

.stat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: var(--spacing-md) !important;
}

.stat-card.total-monitors .stat-icon {
  background: var(--azure-blue-lightest) !important;
  color: var(--azure-blue) !important;
}

.stat-card.up-monitors .stat-icon {
  background: var(--success-green-light) !important;
  color: var(--success-green) !important;
}

.stat-card.down-monitors .stat-icon {
  background: var(--error-red-light) !important;
  color: var(--error-red) !important;
}

.stat-card.uptime-stat .stat-icon {
  background: var(--azure-blue-lightest) !important;
  color: var(--azure-blue) !important;
}

.stat-number {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--neutral-gray-100) !important;
  margin: 0 0 var(--spacing-xs) 0 !important;
}

.stat-label {
  color: var(--neutral-gray-70) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin: 0 0 var(--spacing-sm) 0 !important;
}

.stat-trend {
  font-size: 12px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important;
}

.stat-trend.success {
  color: var(--success-green) !important;
}

.stat-trend.danger {
  color: var(--error-red) !important;
}

.stat-trend.warning {
  color: var(--warning-orange) !important;
}

/* Monitor Cards */
.monitor-card {
  background: var(--neutral-gray-0) !important;
  border: 1px solid var(--neutral-gray-30) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--spacing-xl) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.monitor-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
  border-color: var(--azure-blue) !important;
}

.monitor-type-badge {
  background: var(--azure-blue-lightest) !important;
  color: var(--azure-blue) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.monitor-title {
  color: var(--neutral-gray-100) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  margin: var(--spacing-md) 0 var(--spacing-xs) 0 !important;
}

.monitor-url {
  color: var(--neutral-gray-70) !important;
  font-size: 14px !important;
  font-family: var(--font-family-mono) !important;
  word-break: break-all !important;
}

.status-badge {
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.status-badge.up {
  background: var(--success-green-light) !important;
  color: var(--success-green) !important;
}

.status-badge.down {
  background: var(--error-red-light) !important;
  color: var(--error-red) !important;
}

.status-badge.paused {
  background: var(--neutral-gray-30) !important;
  color: var(--neutral-gray-70) !important;
}

/* Quick Stats */
.monitor-quick-stats {
  border-top: 1px solid var(--neutral-gray-20) !important;
  padding-top: var(--spacing-md) !important;
  margin-top: var(--spacing-md) !important;
}

.quick-stat {
  color: var(--neutral-gray-70) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.quick-stat i {
  color: var(--azure-blue) !important;
}

/* Filter Tabs */
.filter-tabs {
  background: var(--neutral-gray-0) !important;
  border: 1px solid var(--neutral-gray-30) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-xs) !important;
  box-shadow: var(--shadow-sm) !important;
}

.filter-tab {
  border: none !important;
  background: transparent !important;
  color: var(--neutral-gray-70) !important;
  font-weight: 500 !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.2s ease !important;
}

.filter-tab:hover,
.filter-tab.active {
  background: var(--azure-blue) !important;
  color: var(--neutral-gray-0) !important;
}

/* Modern Activity Feed */
.activity-feed {
  background: var(--neutral-gray-0) !important;
  border: 1px solid var(--neutral-gray-30) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}

.activity-item {
  padding: var(--spacing-md) !important;
  border-bottom: 1px solid var(--neutral-gray-20) !important;
}

.activity-item:last-child {
  border-bottom: none !important;
}

.activity-item:hover {
  background: var(--neutral-gray-10) !important;
}

/* Footer */
.footer {
  background: var(--neutral-gray-0) !important;
  border-top: 1px solid var(--neutral-gray-30) !important;
  color: var(--neutral-gray-70) !important;
}

/* Modal Updates */
.modal-content {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-2xl) !important;
}

.modal-header {
  border-bottom: 1px solid var(--neutral-gray-30) !important;
  padding: var(--spacing-xl) !important;
}

.modal-body {
  padding: var(--spacing-xl) !important;
}

.modal-footer {
  border-top: 1px solid var(--neutral-gray-30) !important;
  padding: var(--spacing-xl) !important;
}

/* Text Colors */
.text-primary {
  color: var(--azure-blue) !important;
}

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

.text-danger {
  color: var(--error-red) !important;
}

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

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

/* Background Colors */
.bg-primary {
  background-color: var(--azure-blue) !important;
}

.bg-success {
  background-color: var(--success-green) !important;
}

.bg-danger {
  background-color: var(--error-red) !important;
}

.bg-warning {
  background-color: var(--warning-orange) !important;
}

.bg-light {
  background-color: var(--neutral-gray-10) !important;
}

/* Responsive Design Improvements */
@media (max-width: 768px) {
  .dashboard-container {
    padding: var(--spacing-lg) !important;
  }
  
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md) !important;
  }
  
  .stat-card {
    padding: var(--spacing-lg) !important;
  }
  
  .monitor-card {
    padding: var(--spacing-lg) !important;
  }
}

/* Focus States for Accessibility */
.btn:focus,
.form-control:focus,
.form-select:focus {
  outline: 2px solid var(--azure-blue) !important;
  outline-offset: 2px !important;
}

/* Loading States */
.btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Smooth Animations */
* {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --neutral-gray-0: #1a1a1a;
    --neutral-gray-10: #2d2d2d;
    --neutral-gray-20: #404040;
    --neutral-gray-30: #545454;
    --neutral-gray-40: #676767;
    --neutral-gray-50: #7a7a7a;
    --neutral-gray-60: #8d8d8d;
    --neutral-gray-70: #a0a0a0;
    --neutral-gray-80: #b3b3b3;
    --neutral-gray-90: #e6e6e6;
    --neutral-gray-100: #ffffff;
  }
}