/**
 * Green Color Theme for Chemie Lernen
 * Ensures all interactive elements use green color scheme consistently
 */

/* Accessibility - Skip Link */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 10px 15px;
  margin: 10px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--green-primary);
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
}

.sr-only-focusable:focus:hover {
  background-color: var(--green-dark);
  text-decoration: underline;
}

/* Primary color variables */
:root {
  --green-primary: #4caf50;
  --green-dark: #388e3c;
  --green-darker: #2e7d32;
  --green-light: #66bb6a;
  --green-lighter: #c8e6c9;
}

/* Bootstrap override - Replace blue with green */
.btn-primary {
  background-color: var(--green-primary) !important;
  border-color: var(--green-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  color: #ffffff !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--green-darker) !important;
  border-color: var(--green-darker) !important;
}

/* Success button - use consistent green */
.btn-success {
  background-color: var(--green-primary) !important;
  border-color: var(--green-primary) !important;
}

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

/* Links - green color */
a {
  color: var(--green-darker);
}

a:hover,
a:focus {
  color: var(--green-dark);
}

/* Navigation links */
.navbar-default .navbar-nav > li > a {
  color: var(--green-darker);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--green-primary);
  background-color: transparent;
}

.navbar-brand {
  color: var(--green-darker) !important;
}

.navbar-brand:hover {
  color: var(--green-primary) !important;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
  color: var(--green-darker);
  background-color: #fff;
  border-color: #ddd;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  color: var(--green-dark);
  background-color: var(--green-lighter);
  border-color: var(--green-lighter);
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--green-primary) !important;
  border-color: var(--green-primary) !important;
  color: #fff !important;
}

/* Labels and badges */
.label-primary,
.badge-primary {
  background-color: var(--green-primary) !important;
}

.label-success,
.badge-success {
  background-color: var(--green-primary) !important;
}

/* Progress bars */
.progress-bar {
  background-color: var(--green-primary);
}

/* Form controls focus */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--green-primary) !important;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.25) !important;
  outline: none !important;
}

/* Active elements */
.nav-tabs > li.active > a {
  color: var(--green-darker) !important;
  background-color: #fff;
  border-color: var(--green-primary) var(--green-primary) transparent !important;
}

.nav-tabs > li > a:hover {
  border-color: var(--green-lighter);
}

/* Molekülstudio specific */
#visualize-btn {
  background-color: var(--green-primary) !important;
  border: none !important;
  color: white !important;
}

#visualize-btn:hover:not(:disabled) {
  background-color: var(--green-dark) !important;
}

#visualize-btn:active {
  background-color: var(--green-darker) !important;
}

/* Suggestion chips in Molekülstudio */
.suggestion-chip {
  background-color: var(--green-lighter) !important;
  color: var(--green-darker) !important;
  border: 1px solid var(--green-primary) !important;
}

.suggestion-chip:hover {
  background-color: var(--green-light) !important;
}

/* Periodensystem active buttons */
button.active-mode {
  background-color: var(--green-primary) !important;
  color: white !important;
}

button.mode-btn:hover {
  background-color: var(--green-light) !important;
}

/* Element cards in Periodensystem */
.element {
  border-color: var(--green-primary) !important;
}

.element:hover {
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
}

/* pH Calculator tabs */
.nav-tabs > li > a[href="#hplus"],
.nav-tabs > li > a[href="#ohminus"],
.nav-tabs > li > a[href="#poh"] {
  color: var(--green-darker);
}

/* Calculator buttons */
input[type="number"] + .input-group-btn .btn,
input[type="text"] + .input-group-btn .btn {
  background-color: var(--green-primary) !important;
  border-color: var(--green-primary) !important;
  color: white !important;
}

input[type="number"] + .input-group-btn .btn:hover,
input[type="text"] + .input-group-btn .btn:hover {
  background-color: var(--green-dark) !important;
}

/* Molar mass calculator examples button */
.btn-example {
  background-color: var(--green-light) !important;
  color: white !important;
  border-color: var(--green-primary) !important;
}

.btn-example:hover {
  background-color: var(--green-primary) !important;
}

/* pH scale visualization */
.ph-scale {
  background: linear-gradient(to right,
    #c8e6c9 0%,
    #a5d6a7 25%,
    #81c784 50%,
    #4caf50 75%,
    #2e7d32 100%
  ) !important;
}

/* Panel headings for interactive tools */
.panel-primary > .panel-heading {
  background-color: var(--green-primary) !important;
  border-color: var(--green-primary) !important;
  color: white !important;
}

.panel-success > .panel-heading {
  background-color: var(--green-primary) !important;
  border-color: var(--green-primary) !important;
}

/* Breadcrumb links */
.breadcrumb a {
  color: var(--green-darker);
}

.breadcrumb a:hover {
  color: var(--green-primary);
}

/* Footer links */
footer a {
  color: var(--green-light);
}

footer a:hover {
  color: var(--green-primary);
}

/* Well and panel green accents */
.well {
  border-left: 4px solid var(--green-primary) !important;
}

/* Table links */
table a {
  color: var(--green-darker);
}

table a:hover {
  color: var(--green-dark);
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--green-primary) !important;
  outline-offset: 2px !important;
}

/* Custom checkbox and radio styling */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--green-primary) !important;
}

/* Theme toggle button */
.theme-toggle {
  color: var(--green-darker) !important;
}

.theme-toggle:hover {
  color: var(--green-primary) !important;
}

/* Auto-rotate toggle in Molekülstudio */
.auto-rotate-toggle {
  color: var(--green-darker) !important;
}

.auto-rotate-toggle input[type="checkbox"]:checked {
  accent-color: var(--green-primary) !important;
}