/*
 * ForgeSolar Theme Color Overrides
 *
 * This file overrides the default Unify 1.7 green (#72c02c) with the
 * new ForgeSolar brand green (#5B8C3E) to match the Tailwind-styled pages.
 *
 * Brand Colors:
 *   fs-green:       #5B8C3E
 *   fs-green-light: #7AB648
 *   fs-green-dark:  #4A7C34
 *   fs-orange:      #F7941D
 */

:root {
  --fs-green: #5B8C3E;
  --fs-green-light: #7AB648;
  --fs-green-dark: #4A7C34;
  --fs-orange: #F7941D;
}

/* ==========================================================================
   Header Overrides
   ========================================================================== */

/* Active nav item color */
.header .navbar-nav > .active > a {
  color: var(--fs-green);
}

/* Nav hover and active border */
@media (min-width: 992px) {
  .header .navbar-nav > li > a:hover,
  .header .navbar-nav > .active > a {
    border-bottom-color: var(--fs-green);
  }

  .header .navbar-nav > .open > a,
  .header .navbar-nav > .open > a:hover,
  .header .navbar-nav > .open > a:focus {
    color: var(--fs-green);
  }

  .header .navbar-nav > li:hover > a {
    color: var(--fs-green);
  }

  /* Dropdown menu top border */
  .header .dropdown-menu {
    border-top-color: var(--fs-green);
  }
}

/* Mobile nav active state */
@media (max-width: 991px) {
  .header .navbar-nav > li > a:hover {
    color: var(--fs-green);
  }

  .header .navbar-nav > .active > a,
  .header .navbar-nav > .active > a:hover,
  .header .navbar-nav > .active > a:focus {
    background: var(--fs-green);
  }
}

/* Navbar toggle button */
.header .navbar-toggle {
  border-color: var(--fs-green-dark);
}

.header .navbar-toggle,
.header .navbar-toggle:hover,
.header .navbar-toggle:focus {
  background: var(--fs-green);
}

.header .navbar-toggle:hover {
  background: var(--fs-green-dark) !important;
}

/* Search box hover */
.header .nav > li > .search:hover {
  color: var(--fs-green);
  border-bottom-color: var(--fs-green);
}

@media (max-width: 991px) {
  .header .nav > li > .search:hover {
    background: var(--fs-green-dark);
  }
}


/* ==========================================================================
   Breadcrumbs Overrides
   ========================================================================== */

/* Match the gradient header style from Tailwind pages */
.breadcrumbs {
  background: linear-gradient(135deg, #1f2937 0%, var(--fs-green-dark) 100%);
  border-bottom: none;
  padding: 20px 0 16px;
}

.breadcrumbs h1 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
}

.breadcrumbs .breadcrumb {
  background: transparent;
  margin-bottom: 0;
  padding: 0;
}

.breadcrumbs .breadcrumb > li,
.breadcrumbs .breadcrumb > li > a {
  color: #d1d5db;
  font-size: 13px;
}

.breadcrumbs .breadcrumb > li > a:hover {
  color: #fff;
  text-decoration: none;
}

.breadcrumbs .breadcrumb > li.active {
  color: #fff;
}

.breadcrumbs .breadcrumb > li + li:before {
  color: #9ca3af;
  content: "/";
  padding: 0 8px;
}

/* Header label in breadcrumbs */
.breadcrumbs .label.header-label {
  font-size: 11px;
  padding: 4px 8px;
  margin-left: 10px;
  vertical-align: middle;
}

.breadcrumbs .label-orange {
  background-color: var(--fs-orange);
}


/* ==========================================================================
   Link Colors
   ========================================================================== */

a {
  color: var(--fs-green);
}

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


/* ==========================================================================
   Button Overrides
   ========================================================================== */

/* Primary buttons */
.btn-primary,
.u-btn-primary,
.btn-u {
  background-color: var(--fs-green);
  border-color: var(--fs-green);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.u-btn-primary:hover,
.u-btn-primary:focus,
.btn-u:hover,
.btn-u:focus {
  background-color: var(--fs-green-dark);
  border-color: var(--fs-green-dark);
}

/* Outline primary buttons */
.u-btn-outline-primary {
  color: var(--fs-green);
  border-color: var(--fs-green);
}

.u-btn-outline-primary:hover,
.u-btn-outline-primary:focus,
.u-btn-outline-primary.active {
  color: #fff;
  background-color: var(--fs-green);
  border-color: var(--fs-green);
}


/* ==========================================================================
   Footer Overrides
   ========================================================================== */

.footer-v1 .footer {
  background: #1f2937;
}

.footer-v1 .footer a:hover {
  color: var(--fs-green-light);
}

.footer-v1 .copyright {
  background: #111827;
}

.footer-v1 .copyright a {
  color: #9ca3af;
}

.footer-v1 .copyright a:hover {
  color: var(--fs-green-light);
  text-decoration: none;
}


/* ==========================================================================
   Form Focus States
   ========================================================================== */

.form-control:focus {
  border-color: var(--fs-green);
  box-shadow: 0 0 0 0.2rem rgba(91, 140, 62, 0.25);
}


/* ==========================================================================
   Panel/Card Headers
   ========================================================================== */

.panel-heading.panel-green,
.panel-default > .panel-heading {
  background-color: #f8fafc;
  border-bottom-color: #e2e8f0;
}

/* Service block green */
.service-block-v1 i {
  color: var(--fs-green);
}


/* ==========================================================================
   Nav Tabs Overrides
   ========================================================================== */

/* Tab style v1 (used on site detail page) */
.tab-v1 .nav-tabs {
  border-bottom-color: var(--fs-green);
}

.tab-v1 .nav-tabs > .active > a,
.tab-v1 .nav-tabs > .active > a:hover,
.tab-v1 .nav-tabs > .active > a:focus {
  color: #fff;
  background: var(--fs-green);
}

.tab-v1 .nav-tabs > li > a:hover {
  color: #fff;
  background: var(--fs-green);
}

/* Tab style v3 */
.tab-v3 .nav-tabs > .active > a,
.tab-v3 .nav-tabs > .active > a:hover,
.tab-v3 .nav-tabs > .active > a:focus {
  border-top-color: var(--fs-green);
}


/* ==========================================================================
   Back to Top Button
   ========================================================================== */

#topcontrol {
  background: var(--fs-green);
}

#topcontrol:hover {
  background: var(--fs-green-dark);
}


/* ==========================================================================
   Editor Page Overrides
   ========================================================================== */

/* Editor navbar styling */
#editor-bar .navbar-nav > li > a:hover,
#editor-bar .navbar-nav > li > a:focus {
  color: var(--fs-green);
}

#editor-bar .dropdown-menu > li > a:hover,
#editor-bar .dropdown-menu > li > a:focus {
  background-color: var(--fs-green);
  color: #fff;
}

/* Editor toolbar buttons - active state */
#toolbutton-panel .toolbutton.active,
#toolbutton-panel .toolbutton:active {
  background-color: var(--fs-green);
  border-color: var(--fs-green);
  color: #fff;
}

#toolbutton-panel .toolbutton.active:hover {
  background-color: var(--fs-green-dark);
  border-color: var(--fs-green-dark);
}

/* Analyze Glare button - primary action */
#config-bar .analyze,
.btn-u.analyze {
  background-color: var(--fs-green);
  border-color: var(--fs-green);
}

#config-bar .analyze:hover,
#config-bar .analyze:focus,
.btn-u.analyze:hover,
.btn-u.analyze:focus {
  background-color: var(--fs-green-dark);
  border-color: var(--fs-green-dark);
}

/* Editor panel headers */
#components .panel-heading {
  background-color: #f8fafc;
  border-bottom-color: #e2e8f0;
}

#components .panel-title {
  color: #374151;
}

#components .panel-title a:hover {
  color: var(--fs-green);
}

/* Component section styling */
.component-section .panel-heading {
  background: linear-gradient(to bottom, #fafafa, #f5f5f5);
}

.component-section .show-adv:hover {
  color: var(--fs-green);
}

/* Right column component panels */
#right-column .panel-default {
  border-color: #e2e8f0;
}

#right-column .panel-default > .panel-heading {
  background-color: #f8fafc;
  border-bottom-color: #e2e8f0;
}

/* Mini component section hover */
.mini-comp-section:hover {
  border-color: var(--fs-green-light);
}

/* Editor modals */
.modal .modal-header {
  border-bottom-color: #e2e8f0;
}

.modal .modal-footer {
  border-top-color: #e2e8f0;
  background-color: #f8fafc;
}

.modal .btn-primary {
  background-color: var(--fs-green);
  border-color: var(--fs-green);
}

.modal .btn-primary:hover,
.modal .btn-primary:focus {
  background-color: var(--fs-green-dark);
  border-color: var(--fs-green-dark);
}

/* Progress modal styling */
#progressModal .progress-bar-success {
  background-color: var(--fs-green);
}

/* Alert styling in editor */
#alert-section .alert-danger {
  border-left: 4px solid #dc2626;
}

#alert-section .alert-info {
  border-left: 4px solid var(--fs-green);
}

/* Map panel styling */
.map-panel.panel-default {
  border-color: #d1d5db;
}

.map-panel .panel-body {
  background-color: rgba(255, 255, 255, 0.95);
}

/* Draw info panel */
#draw-info .panel-heading {
  background-color: var(--fs-green);
  color: #fff;
}

#draw-info.panel-primary {
  border-color: var(--fs-green);
}

#draw-info.panel-primary > .panel-heading {
  background-color: var(--fs-green);
  border-color: var(--fs-green);
}

/* Optimization modal button */
#show-optim-modal:hover {
  color: var(--fs-orange);
  border-color: var(--fs-orange);
}

/* Settings button hover */
#settings-btn:hover,
#show-settings:hover {
  color: var(--fs-green);
}

/* Unsaved warning styling */
#unsaved-warning {
  color: var(--fs-orange);
}

/* Clone modal styling */
#cloneModal .btn-success {
  background-color: var(--fs-green);
  border-color: var(--fs-green);
}

#cloneModal .btn-success:hover {
  background-color: var(--fs-green-dark);
  border-color: var(--fs-green-dark);
}