@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@500;600;700;800&display=swap');

/* Local FontAwesome & LineAwesome Font Face Definitions */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../plugins/global/fonts/fa-solid-900.woff2') format('woff2'),
       url('../plugins/global/fonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../plugins/global/fonts/fa-regular-400.woff2') format('woff2'),
       url('../plugins/global/fonts/fa-regular-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../plugins/global/fonts/fa-brands-400.woff2') format('woff2'),
       url('../plugins/global/fonts/fa-brands-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Line Awesome Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('../plugins/global/fonts/la-solid-900.woff2') format('woff2'),
       url('../plugins/global/fonts/la-solid-900.ttf') format('truetype');
}

.fa-solid, .fas, .fa, .la, .las {
  font-family: 'Font Awesome 5 Free', 'Line Awesome Free' !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

.fa-regular, .far, .lar {
  font-family: 'Font Awesome 5 Free', 'Line Awesome Free' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

.fa-brands, .fab, .lab {
  font-family: 'Font Awesome 5 Brands', 'Line Awesome Brands' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

:root {
  --konekt-orange: #FF9800;
  --konekt-orange-hover: #FFB74D;
  --konekt-black: #000000;
  --konekt-white: #FFFFFF;
  --konekt-gray-light: #f8f8f8;
  --konekt-gray-dark: #1a1a1a;
  --konekt-text-main-light: #000000;
  --konekt-text-muted-light: #666666;
  --konekt-border-light: #e0e0e0;

  --konekt-text-main-dark: #FFFFFF;
  --konekt-text-muted-dark: #A1A1A1;
  --konekt-border-dark: rgba(255, 255, 255, 0.1);

  --konekt-success: #4CAF50;
  --konekt-warning: #F5A524;
  --konekt-error: #E5484D;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--konekt-gray-light);
  color: var(--konekt-text-main-light);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .nav-link, .card-title {
  font-family: 'Manrope', sans-serif !important;
}

/* Light & Dark Modes */
body.dark-version {
  background-color: var(--konekt-black) !important;
  color: var(--konekt-text-main-dark) !important;
}

body.dark-version .card {
  background-color: var(--konekt-gray-dark) !important;
  border: 1px solid var(--konekt-border-dark) !important;
  color: var(--konekt-text-main-dark) !important;
}

body.dark-version .table, body.dark-version th, body.dark-version td {
  color: var(--konekt-text-main-dark) !important;
  border-color: var(--konekt-border-dark) !important;
}

body.dark-version .form-control, body.dark-version .form-select {
  background-color: #121212 !important;
  border-color: var(--konekt-border-dark) !important;
  color: var(--konekt-white) !important;
}

body.dark-version .sidenav {
  background-color: var(--konekt-gray-dark) !important;
  border-right: 1px solid var(--konekt-border-dark) !important;
}

/* Buttons Primary KOnekt */
.btn-primary, .bg-gradient-primary, .bg-primary {
  background-color: var(--konekt-orange) !important;
  background-image: none !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--konekt-orange-hover) !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4) !important;
}

.btn-outline-primary {
  border: 2px solid var(--konekt-orange) !important;
  color: var(--konekt-orange) !important;
  background: transparent !important;
  border-radius: 8px !important;
}

.btn-outline-primary:hover {
  background-color: var(--konekt-orange) !important;
  color: #000000 !important;
}

/* Badges */
.badge-konekt-success {
  background-color: rgba(76, 175, 80, 0.15) !important;
  color: var(--konekt-success) !important;
  border: 1px solid var(--konekt-success) !important;
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 600;
}

.badge-konekt-warning {
  background-color: rgba(245, 165, 36, 0.15) !important;
  color: var(--konekt-warning) !important;
  border: 1px solid var(--konekt-warning) !important;
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 600;
}

.badge-konekt-error {
  background-color: rgba(229, 72, 77, 0.15) !important;
  color: var(--konekt-error) !important;
  border: 1px solid var(--konekt-error) !important;
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 600;
}

.badge-konekt-active {
  background-color: rgba(255, 152, 0, 0.15) !important;
  color: var(--konekt-orange) !important;
  border: 1px solid var(--konekt-orange) !important;
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 600;
}

/* Sidebar Styling */
.sidenav .nav-link.active {
  background-color: var(--konekt-orange) !important;
  color: #000000 !important;
  border-radius: 8px !important;
}

.sidenav .nav-link.active .nav-link-text, .sidenav .nav-link.active i {
  color: #000000 !important;
}

.card {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}