/* ============================================
   TAMMKREIZ GLOBAL STYLES
   Main entry point for all styles
   ============================================ */

/* Bootstrap base styles */
@import 'bootstrap/dist/css/bootstrap.min.css';

/* TammKreiz Design System - Custom overrides and components */
@import './tammkreiz.css';

/* TammKreiz Pages Styles */
@import './pages.css';

/* ============================================
   ADDITIONAL GLOBAL OVERRIDES
   These styles apply after Bootstrap and TK styles
   ============================================ */

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remove default focus outline and add custom one */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 3px solid var(--tk-orange-light);
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background-color: var(--tk-orange);
  color: var(--tk-white);
}

/* ============================================
   BOOTSTRAP OVERRIDES
   ============================================ */

/* Cards */
.card {
  border-radius: var(--tk-radius-xl);
  border: 1px solid var(--tk-gray-100);
  box-shadow: var(--tk-shadow-sm);
  transition: all var(--tk-transition-base);
}

.card:hover {
  box-shadow: var(--tk-shadow-md);
}

/* Buttons */
.btn {
  font-family: var(--tk-font-primary);
  font-weight: var(--tk-font-weight-semibold);
  border-radius: var(--tk-radius-lg);
  transition: all var(--tk-transition-base);
}

.btn-primary {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-dark) 100%);
  border-color: var(--tk-blue);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--tk-blue-light) 0%, var(--tk-blue) 100%);
  border-color: var(--tk-blue-light);
  transform: translateY(-1px);
}

.btn-warning {
  background: linear-gradient(135deg, var(--tk-orange) 0%, var(--tk-orange-dark) 100%);
  border-color: var(--tk-orange);
  color: var(--tk-white);
}

.btn-warning:hover {
  background: linear-gradient(135deg, var(--tk-orange-light) 0%, var(--tk-orange) 100%);
  border-color: var(--tk-orange-light);
  color: var(--tk-white);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, var(--tk-green) 0%, var(--tk-green-dark) 100%);
  border-color: var(--tk-green);
}

.btn-success:hover {
  background: linear-gradient(135deg, var(--tk-green-light) 0%, var(--tk-green) 100%);
  border-color: var(--tk-green-light);
  transform: translateY(-1px);
}

/* Form controls */
.form-control,
.form-select {
  font-family: var(--tk-font-primary);
  border-radius: var(--tk-radius-md);
  border-color: var(--tk-gray-200);
  transition: all var(--tk-transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tk-orange);
  box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.15);
}

/* Badges */
.badge {
  font-family: var(--tk-font-primary);
  font-weight: var(--tk-font-weight-semibold);
  border-radius: var(--tk-radius-pill);
  padding: var(--tk-space-1) var(--tk-space-3);
}

.badge.bg-primary {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-dark) 100%) !important;
}

.badge.bg-success {
  background: linear-gradient(135deg, var(--tk-green) 0%, var(--tk-green-dark) 100%) !important;
}

.badge.bg-warning {
  background: linear-gradient(135deg, var(--tk-orange) 0%, var(--tk-orange-dark) 100%) !important;
  color: var(--tk-white) !important;
}

/* Alerts */
.alert {
  border-radius: var(--tk-radius-lg);
  border: none;
}

.alert-warning {
  background: rgba(243, 156, 18, 0.1);
  color: var(--tk-orange-dark);
}

.alert-success {
  background: rgba(139, 195, 74, 0.1);
  color: var(--tk-green-dark);
}

.alert-info {
  background: rgba(95, 195, 231, 0.1);
  color: var(--tk-blue-dark);
}

.alert-danger {
  background: rgba(231, 76, 60, 0.1);
  color: #c0392b;
}

/* List groups */
.list-group-item {
  border-color: var(--tk-gray-100);
  transition: all var(--tk-transition-fast);
}

.list-group-item:hover,
.list-group-item-action:hover {
  background-color: var(--tk-gray-50);
}

.list-group-item-action:focus {
  background-color: rgba(243, 156, 18, 0.05);
}

/* Spinners */
.spinner-border {
  color: var(--tk-orange);
}

/* ============================================
   LEAFLET MAP OVERRIDES
   ============================================ */
.leaflet-container {
  border-radius: var(--tk-radius-xl);
  z-index: 1;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-lg);
}

.leaflet-popup-tip {
  box-shadow: var(--tk-shadow-sm);
}

/* ============================================
   REACT-SELECT OVERRIDES
   ============================================ */
.css-13cymwt-control,
.css-t3ipsp-control {
  border-radius: var(--tk-radius-md) !important;
  border-color: var(--tk-gray-200) !important;
  min-height: 44px !important;
}

.css-t3ipsp-control {
  border-color: var(--tk-orange) !important;
  box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.15) !important;
}

.css-1dimb5e-singleValue {
  color: var(--tk-gray-800) !important;
}

.css-1n7v3ny-option {
  background-color: rgba(243, 156, 18, 0.1) !important;
}

.css-d7l1ni-option {
  background-color: rgba(243, 156, 18, 0.15) !important;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--tk-orange);
  color: var(--tk-white);
  padding: var(--tk-space-2) var(--tk-space-4);
  z-index: 1000;
  transition: top var(--tk-transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .card,
  .btn,
  .form-control,
  .badge {
    border: 2px solid currentColor;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .header,
  .footer,
  .tk-btn,
  .btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .tk-card,
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}