/* 1. Configuration & Variables */
:root {
  /* Base Color Palettes (RGBA components for flexibility) */
  --color-base-primary: 40, 50, 60;
  --color-base-secondary: 50, 60, 70;
  --color-base-tertiary: 45, 55, 65;
  --color-base-border: 75, 75, 75;
  --color-base-text: 255, 255, 255;
  --color-base-text-muted: 200, 200, 200;
  --color-base-black: 0, 0, 0;

  /* Accent Colors (RGBA components) */
  --color-accent-green: 40, 167, 69;
  --color-accent-blue: 100, 200, 255;
  --color-accent-red: 255, 77, 77; /* From .remove-button */
  --color-accent-warning: 255, 193, 7; /* From alerts */
  --color-accent-danger: 220, 53, 69; /* From alerts */
  --color-accent-success: 25, 135, 84; /* From alerts */
  --color-accent-info: 23, 162, 184; /* From pages.css info-button */
  --color-accent-purple: 147, 112, 219; /* From profile.view.php */
  --color-accent-pink: 255, 182, 193; /* From diary.view.php */
  --color-accent-lightblue: 173, 216, 230; /* From document.view.php */
  --color-accent-lightgreen: 144, 238, 144; /* From grade.view.php */
  --color-accent-orange: 255, 218, 185; /* From kriterier.view.php */
  --color-accent-cyan: 175, 238, 238; /* From visit.view.php */

  /* Semantic Backgrounds */
  --bg-primary: rgba(var(--color-base-primary), 1);
  --bg-secondary: rgba(var(--color-base-secondary), 1); /* Used for cards, list items */
  --bg-tertiary: rgba(var(--color-base-tertiary), 1); /* Used for card headers, specific list items */
  --bg-input: rgba(60, 70, 80, 1);
  --bg-input-focus: rgba(70, 80, 90, 1);
  --bg-input-group-text: rgba(80, 90, 100, 1);
  --bg-input-group-text-focus: rgba(90, 100, 110, 1);
  --bg-list-item-hover: rgba(60, 70, 80, 1);
  --bg-kontrollPanel: rgba(var(--color-base-secondary), 0.85);

  /* Semantic Text Colors */
  --text-primary: rgba(var(--color-base-text), 0.9);
  --text-secondary: rgba(var(--color-base-text), 0.7);
  --text-muted: rgba(var(--color-base-text-muted), 1);
  --text-white: rgba(var(--color-base-text), 1); /* Explicitly white text */
  --text-black: rgba(var(--color-base-black), 1); /* Explicitly black text */
  --text-accent-blue: rgba(var(--color-accent-blue), 1);
  --text-accent-green: rgba(var(--color-accent-green), 1);
  --text-input: #fff;
  --text-input-placeholder: rgba(var(--color-base-text), 0.5);
  --text-label: rgba(var(--color-base-text), 1);
  --text-label-muted: rgba(var(--color-base-text), 0.7);

  /* Semantic Borders */
  --border-primary: rgba(var(--color-base-border), 1);
  --border-input: rgba(100, 110, 120, 0.5);
  --border-input-focus: rgba(var(--color-accent-blue), 1);
  --border-list-item-hover: rgba(100, 150, 200, 1);
  --border-nav-tabs: rgba(var(--color-base-border), 1);
  --border-hr: rgba(100, 110, 120, 0.3);

  /* Semantic Shadows */
  --shadow-base: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.3);
  --shadow-input-focus: 0 0 0 3px rgba(var(--color-accent-blue), 0.15);

  /* Semantic Gradients */
  --gradient-body: linear-gradient(135deg, var(--bg-primary) 0%, rgba(45, 58, 72, 0.6) 20%, rgba(42, 52, 70, 0.5) 40%, rgba(48, 56, 68, 0.55) 60%, rgba(43, 51, 65, 0.5) 80%, var(--bg-primary) 100%);
  --gradient-card-header: linear-gradient(135deg, rgba(60, 70, 80, 1) 0%, rgba(70, 85, 100, 1) 100%);
  --gradient-button-primary: linear-gradient(135deg, rgba(173, 216, 230, 0.8), rgba(135, 206, 235, 0.6));
  --gradient-button-primary-hover: linear-gradient(135deg, rgba(135, 206, 235, 0.9), rgba(173, 216, 230, 0.7));
  --gradient-alert-success: linear-gradient(135deg, rgba(var(--color-accent-success), 0.95), rgba(var(--color-accent-green), 1));
  --gradient-alert-danger: linear-gradient(135deg, rgba(105, 30, 30, 0.95), rgba(139, 35, 35, 0.95));
}

/* 2. Global Inheritance (The "Magic" part) */
body {
  background-color: var(--bg-primary);
  background-image: var(--gradient-body);
  background-attachment: fixed;
  color: var(--text-primary); /* Most elements will now inherit 'white' automatically */
}

/* Fix Bootstrap's override on specific elements without using !important */
body .table, 
body .card, 
body .list-group-item, 
body .form-control,
body .nav-link {
  color: inherit; 
}

/* 3. Global Resets (Links & Icons) */
a, button, i, .fas, .fa-solid {
  color: inherit;
  text-decoration: none;
}

/* 4. Inputs & Forms (Targeted Specificity) */
.form-control, .form-select, textarea {
  background-color: var(--bg-input);
  border: 2px solid var(--border-input);
  color: var(--text-input);
}

.form-control:focus {
  background-color: var(--bg-input-focus);
  border-color: var(--border-input-focus);
  color: var(--text-input);
}

.form-check-label {
  color: var(--text-label) !important;
}

/* 5. Components */
.card, .modal-content, .list-group-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.card-header, .card-footer {
  background-color: var(--bg-tertiary);
}

/* 6. Specific Overrides (Where !important is actually useful) */
.text-white, .text-light { color: var(--text-white) !important; }
.text-muted { color: var(--text-muted) !important; }
.remove-button, .close-icon:hover { color: #ff4d4d !important; }
.map-display span, .table-warning { color: #000 !important; }

.nav-icon {
  color: var(--text-white) !important;
}

.kontrollpanelItem.nav-tabs .nav-link.active {
  color: var(--accent-blue);
  border-bottom: 3px solid var(--accent-blue);
  background: none;
}

/* 8. Alerts (Cleaned Gradients) */
.alert-success { background: var(--gradient-alert-success) !important; }
.alert-danger  { background: var(--gradient-alert-danger) !important; }

/* Module/Control Panel Item Styles */
.kontrollpanelItem {
  background-color: var(--bg-kontrollPanel) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-base) !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-bottom: 2rem !important;
}

.kontrollpanelItem:hover {
  box-shadow: var(--shadow-hover) !important;
}

.kontrollpanelItem.card-header {
  background: linear-gradient(135deg, rgba(60, 70, 80, 0.5) 0%, rgba(70, 85, 100, 0.8) 100%) !important;
  border: none !important;
  padding: 1.5rem !important;
  border-bottom: 1px solid rgba(75, 75, 75, 1) !important;
}

.kontrollpanelItem.card-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--text-white) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kontrollpanelItem.card-title i {
  font-size: 1.5rem;
  opacity: 0.9;
}

.kontrollpanelItem.reloadButton .list-group-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px; /* Keep height for consistency */
  background-color: rgba(var(--color-base-border), 1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-white) !important;
}

.reloadButton:hover {
  background-color: rgba(100, 100, 100, 1);
  transform: rotate(-90deg);
}
 
.kontrollpanelItem .card-body {
  padding: 2rem !important;
  background-color: var(--bg-kontrollPanel) !important;
}

.kontrollpanelItem.nav-tabs {
  border-bottom: 2px solid var(--bg-kontrollPanel) !important;
  margin-bottom: 1.5rem;
}

.kontrollpanelItem.nav-tabs .nav-link {
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  transition: all 0.2s ease;
}

.kontrollpanelItem.nav-tabs .nav-link:hover {
  color: white !important;
  border-bottom: 3px solid rgba(75, 75, 75, 1);
  margin-bottom: -2px;
}

.kontrollpanelItem.nav-tabs .nav-link.active {
  color: var(--text-accent-blue) !important;
  border-bottom: 3px solid rgba(100, 200, 255, 1);
  margin-bottom: -2px;
  background: none !important;
}

.kontrollpanelItem.tab-content {
  padding-top: 1rem;
}

.kontrollpanelItem.list-group-flush {
  background: transparent !important;
}

.kontrollpanelItem.list-group-item {
  background-color: var(--bg-tertiary) !important;
  border: 1px solid var(--border-primary) !important;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.kontrollpanelItem.list-group-item:last-child {
  margin-bottom: 0;
}

.kontrollpanelItem.list-group-item-action:hover {
  background-color: var(--bg-input) !important;
  transform: translateX(4px);
  border-color: rgba(100, 150, 200, 1);
}

.kontrollpanelItem.form-group {
  margin-bottom: 1.5rem;
}

.kontrollpanelItem.form-group label {
  font-weight: 600;
  color: white !important;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kontrollpanelItem.form-group label i {
  font-size: 0.95rem;
  opacity: 0.8;
}

.kontrollpanelItem.input-group {
  margin-bottom: 1rem;
}

.kontrollpanelItem.card-button {
  padding: 0.75rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.4s ease !important;
  background: linear-gradient(135deg, rgba(173, 216, 230, 0.8), rgba(135, 206, 235, 0.6));
  border: none !important;
}

.kontrollpanelItem.card-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(135, 206, 235, 0.9), rgba(173, 216, 230, 0.7));
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3) !important;
}

.btn {
  color: var(--text-white) !important;
}

.kontrollpanelItem.btn-outline-warning,
.kontrollpanelItem.btn-outline-danger,
.kontrollpanelItem.btn-outline-success {
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.kontrollpanelItem.btn-outline-warning:hover {
  transform: translateY(-2px);
}

.kontrollpanelItem.btn-outline-danger:hover {
  transform: translateY(-2px);
}

.kontrollpanelItem.btn-outline-success:hover {
  transform: translateY(-2px);
}

.form-control {
  background-color: transparent; /* This is a global override, keep it */
}

/* Enhanced Form Styling */
.kontrollpanelItem.form-control {
  background-color: var(--bg-input) !important;
  border: 2px solid var(--border-input) !important;
  color: var(--text-white) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

.kontrollpanelItem.form-control:focus {
  background-color: var(--bg-input-focus) !important;
  border-color: var(--border-input-focus) !important;
  box-shadow: var(--shadow-input-focus) !important;
  color: var(--text-white) !important;
}

.kontrollpanelItem.form-control::placeholder {
  color: var(--text-input-placeholder) !important;
}

.kontrollpanelItem textarea {
  background-color: rgba(60, 70, 80, 1) !important;
  border: 2px solid rgba(100, 110, 120, 0.5) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
  resize: vertical !important;
}

.kontrollpanelItem textarea:focus {
  background-color: var(--bg-input-focus) !important;
  border-color: var(--border-input-focus) !important;
  box-shadow: var(--shadow-input-focus) !important;
  color: var(--text-white) !important;
}

.kontrollpanelItem select {
  background-color: var(--bg-input) !important;
  border: 2px solid var(--border-input) !important;
  color: var(--text-white) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.kontrollpanelItem select:focus {
  background-color: var(--bg-input-focus) !important;
  border-color: var(--border-input-focus) !important;
  box-shadow: var(--shadow-input-focus) !important;
  color: var(--text-white) !important;
}

.kontrollpanelItem .form-group {
  animation: slideInForm 0.6s ease-out;
}

@keyframes slideInForm {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tone down animate.style library animations */
.animate__animated.animate__fadeInLeft,
.animate__animated.animate__fadeInRight,
.animate__animated.animate__fadeInDown,
.animate__animated.animate__slideInUp,
.animate__animated.animate__slideInRight,
.animate__animated.animate__zoomIn,
.animate__animated.animate__bounceIn,
.animate__animated.animate__bounce {
  --animate-duration: 1.2s !important;
}

/* Override faster speeds to be moderate */
.animate__animated.animate__faster {
  --animate-duration: 1s !important;
}

.animate__animated.animate__fast {
  --animate-duration: 1.1s !important;
}

.kontrollpanelItem .form-group:nth-child(1) {
  animation-delay: 0.05s;
}

.kontrollpanelItem .form-group:nth-child(2) {
  animation-delay: 0.1s;
}

.kontrollpanelItem .form-group:nth-child(3) {
  animation-delay: 0.15s;
}

.kontrollpanelItem .input-group-text {
  background-color: var(--bg-input-group-text) !important;
  border: 2px solid var(--border-input) !important;
  border-left: none !important;
  color: var(--text-accent-blue) !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.2s ease !important;
}
 
.kontrollpanelItem .input-group:focus-within .input-group-text {
  border-color: var(--border-input-focus) !important;
  background-color: var(--bg-input-group-text-focus) !important;
}

.kontrollpanelItem .form-row,
.kontrollpanelItem .row {
  margin-bottom: 0.5rem;
}

.kontrollpanelItem .form-group label {
  text-transform: uppercase;
  font-size: 0.8rem; /* Keep font-size */
  letter-spacing: 0.5px; /* Keep letter-spacing */
  color: var(--text-label-muted) !important;
  margin-bottom: 0.8rem; /* Keep margin */
  font-weight: 700; /* Keep font-weight */
}

.kontrollpanelItem hr {
  border-color: var(--border-hr) !important;
  margin: 1.5rem 0 !important;
}

/* Global Select Override for Dark Theme - White Arrow */
select, select.form-control, input.form-control, input[file].form-control, input.form-control::placeholder, .note-editable {
  color: white;
}