/* ==========================================================================
   Aksure Solar SAS - site theme
   A warm, modern "green energy" look (deep forest green + sun-gold accent),
   inspired by the clean, flat aesthetic common to solar/renewable-energy
   marketing sites. Built on top of Bootstrap 5.1's default component
   classes - Bootstrap 5.1 styles things like .btn-success/.card via
   compiled Sass, not CSS custom properties, so the overrides below target
   the component classes directly rather than relying on variable
   cascading.
   ========================================================================== */

:root {
  --brand-green: #0f8b4c;
  --brand-green-dark: #0b6b3a;
  --brand-green-darker: #0b3d2e;
  --brand-gold: #f5a623;
  --brand-gold-dark: #d98c0f;
  --brand-tint: #eaf7ef;
  --brand-ink: #1c2a22;
  --brand-muted: #5b6b62;
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html,
body {
  height: 100%;
}

body.site-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  color: var(--brand-ink);
  background-color: #fbfdfb;
}

.site-main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-ink);
}

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

a:hover {
  color: var(--brand-green-darker);
}

/* Focus ring - recolored to brand green (default template shipped a blue one) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(15, 139, 76, 0.45);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-green);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color, #6c757d);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------------------------------------------------------------------- */
/* Navbar                                                                  */
/* ---------------------------------------------------------------------- */

.site-navbar {
  box-shadow: 0 2px 10px rgba(11, 61, 46, 0.06);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.site-brand {
  font-family: var(--font-heading);
  color: var(--brand-green-darker) !important;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.site-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark));
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(217, 140, 15, 0.4);
}

.navbar .nav-link {
  font-weight: 500;
  position: relative;
}

.navbar-nav .nav-item > .nav-link:not(.btn):after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.1rem;
  height: 2px;
  background: var(--brand-green);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}

.navbar-nav .nav-item > .nav-link:not(.btn):hover:after {
  transform: scaleX(1);
}

/* Header layout: brand on the left, the public pages next to it, then (pushed right) language, ways to join, the main button, bell and the account.
   Below 1200px everything folds into the menu button, so nothing ever wraps onto a second line. */
.site-nav-actions {
  gap: 0.15rem;
}

@media (min-width: 1200px) {
  .site-nav-actions {
    gap: 0.4rem;
  }

  .site-nav-main {
    margin-left: 1.25rem;
  }
}

.site-nav-cta {
  white-space: nowrap;
}

.site-nav-user {
  white-space: nowrap;
}

.site-nav-username {
  display: inline-block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

@media (max-width: 1199.98px) {
  .site-nav-actions {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(11, 61, 46, 0.12);
  }

  .site-nav-cta {
    display: inline-block;
    margin: 0.35rem 0;
  }
}

.navbar .dropdown-item {
  font-weight: 500;
}

.navbar .dropdown-header {
  color: var(--brand-muted);
}

/* ---------------------------------------------------------------------- */
/* Buttons - "success"/"primary" both read as the brand CTA color         */
/* ---------------------------------------------------------------------- */

.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-success,
.btn-primary {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-dark));
  border-color: var(--brand-green-dark);
  color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-success:active,
.btn-primary:active {
  background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green-darker));
  border-color: var(--brand-green-darker);
  color: #fff;
}

.btn-success.site-cta,
.btn-primary.site-cta {
  box-shadow: 0 6px 16px rgba(11, 107, 58, 0.3);
}

.btn-success.site-cta:hover,
.btn-primary.site-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(11, 107, 58, 0.38);
}

.btn-outline-success,
.btn-outline-primary {
  color: var(--brand-green-dark);
  border-color: var(--brand-green);
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}

.btn-outline-danger {
  border-radius: 999px;
}

.btn-link {
  font-weight: 500;
}

/* ---------------------------------------------------------------------- */
/* Cards                                                                   */
/* ---------------------------------------------------------------------- */

.card {
  border-radius: 1rem;
  border-color: rgba(11, 61, 46, 0.08);
}

.card-header {
  background-color: var(--brand-tint);
  border-bottom-color: rgba(11, 61, 46, 0.08);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-green-darker);
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
}

.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11, 61, 46, 0.12) !important;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand-tint);
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

/* Icon-tile dashboards (Admin / Operations landing hubs) */
.dashboard-tile-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.dashboard-tile-link:hover {
  color: inherit;
}

.dashboard-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.9rem;
  background: var(--brand-tint);
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}

/* Top-right language switcher - flag + language code (e.g. "🇨🇴 ES"), same
   idea as Amazon's region/language picker: the current selection is legible
   at a glance without opening the dropdown. */
.lang-switcher .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(11, 61, 46, 0.15);
  border-radius: 999px;
}

.lang-switcher .dropdown-toggle::after {
  margin-left: 0.15rem;
}

.lang-switcher .lang-flag-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.lang-switcher .lang-code {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-green-darker);
}

.lang-switcher .dropdown-item.active,
.lang-switcher .dropdown-item:active {
  background: var(--brand-tint);
  color: inherit;
}

/* ---------------------------------------------------------------------- */
/* Custom file inputs - the native "Choose File" button text follows the   */
/* browser's own UI language, not the page, so it can't be localized via   */
/* CSS alone; site.js wraps every input[type=file] with this markup and    */
/* swaps in a translated label/filename display instead.                   */
/* ---------------------------------------------------------------------- */

.file-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
  cursor: pointer;
}

.file-input-wrapper input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: 0;
}

.file-input-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-green-darker);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

.file-input-name {
  color: #6c757d;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Hero + section labels                                                  */
/* ---------------------------------------------------------------------- */

.hero-section {
  box-shadow: 0 18px 40px rgba(11, 61, 46, 0.25);
}

.section-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-gold-dark);
  margin-bottom: 0.4rem;
}

.section-eyebrow-light {
  color: #ffd98a;
}

/* ---------------------------------------------------------------------- */
/* Tables & badges                                                        */
/* ---------------------------------------------------------------------- */

.table {
  --bs-table-hover-bg: rgba(15, 139, 76, 0.06);
}

.table thead th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-green-darker);
  border-bottom-width: 2px;
  border-bottom-color: rgba(11, 61, 46, 0.15);
}

.badge {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.4em 0.75em;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  background-color: var(--brand-green-darker);
  color: rgba(255, 255, 255, 0.85);
  padding: 1.5rem 0;
  margin-top: 3rem;
  font-size: 0.9rem;
}

.site-footer-link {
  color: #fff;
  text-decoration: underline;
}

.site-footer-link:hover {
  color: var(--brand-gold);
}

/* Bigger, more prominent "Become a Business Partner" CTA - scoped to this
   one instance rather than the shared .btn-outline-success class, since the
   default green-on-green outline (fine on the site's light background) is
   too low-contrast to read against this footer's dark green. */
.footer-cta-btn {
  padding: 0.6rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-width: 2px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: transparent;
}

.footer-cta-btn:hover,
.footer-cta-btn:focus {
  color: #fff;
  border-color: var(--brand-gold);
  background-color: rgba(255, 255, 255, 0.1);
}

.footer-cta-icon {
  font-size: 1.3rem;
  vertical-align: -0.15em;
  margin-right: 0.15rem;
}

/* Number inputs everywhere lose their up/down spinner - they sit right next
   to other controls throughout the option-builder forms and a stray scroll
   or click was nudging values up/down unintentionally. Values are still
   typed in normally; only the spinner UI is gone. */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Small color key next to a chart legend label (Energy Sales investor/client reports, etc). */
.legend-swatch {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 2px;
  vertical-align: -1px;
}

/* Notification bell: when something is unread the bell is highlighted, rings once and carries a bold count. */
.notifications-bell .bell-icon {
  display: inline-block;
  font-size: 1.2rem;
  transform-origin: 50% 0;
}

.notifications-bell.has-unread .bell-icon {
  filter: drop-shadow(0 0 3px rgba(220, 53, 69, .55));
  animation: bell-ring 1.2s ease-in-out 1;
}

.notifications-bell .notifications-badge {
  font-size: .72rem;
  min-width: 1.35rem;
  padding: .28em .45em;
  box-shadow: 0 0 0 2px #fff;
}

.notifications-menu {
  min-width: 340px;
  max-width: 400px;
  max-height: 70vh;
  overflow-y: auto;
}

.notification-item.unread {
  background: rgba(220, 53, 69, .06);
}

.notification-icon {
  font-size: 1.1rem;
  line-height: 1.2;
}

.notification-dot {
  width: .55rem;
  height: .55rem;
  margin-top: .35rem;
  border-radius: 50%;
  background: #dc3545;
  flex: 0 0 auto;
}

@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .notifications-bell.has-unread .bell-icon { animation: none; }
}

/* Footer: the company links, then the copyright row */
.site-footer-company {
  align-items: baseline;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer-heading {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-gold);
}