/*
 * LEW corporate design for the hydropower dashboard.
 *
 * Colors, radii and component patterns follow the design tokens of www.lew.de
 * ([data-theme=lew]: brand blue scale, navy text, pill buttons). LEW's own typeface is
 * proprietary, Fira Sans (SIL OFL, see fonts/OFL-FiraSans.txt) is self-hosted as the
 * closest open humanist sans instead of loading it from Google Fonts.
 */

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fira-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fira-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fira-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  /* LEW brand scale (--color-blue-* on lew.de) */
  --lew-brand-faint: #e9f2ff;
  --lew-brand-subtle: #d1e0fd;
  --lew-brand-soft: #acc7ff;
  --lew-brand-base: #5286ff;
  --lew-brand: #2b5dff;
  --lew-brand-strong: #1e3fdc;
  --lew-brand-bold: #122a94;
  --lew-navy: #071c5c;

  /* neutrals (--color-grey-* on lew.de) */
  --lew-grey-50: #f8f8f8;
  --lew-grey-100: #f1f1f1;
  --lew-grey-200: #e5e5e5;
  --lew-grey-300: #d4d4d4;
  --lew-grey-500: #737373;
  --lew-grey-600: #525252;
  --lew-white: #ffffff;
  --lew-page: #f4f6fb;

  /* accents */
  --lew-red: #de0051;
  --lew-green: #17a374;
  --lew-orange: #ec6602;

  --lew-radius-sm: 0.25rem;
  --lew-radius-md: 0.5rem;
  --lew-radius-lg: 1rem;
  --lew-radius-pill: 999px;
  --lew-shadow: 0 1px 2px rgba(7, 28, 92, 0.06), 0 4px 16px rgba(7, 28, 92, 0.06);
  --lew-focus: 0 0 0 0.2rem rgba(43, 93, 255, 0.25);
  --lew-font: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lew-sidebar-width: 14rem;

  /* hand the brand to Bootstrap 5 */
  --bs-primary: var(--lew-brand);
  --bs-primary-rgb: 43, 93, 255;
  --bs-link-color: var(--lew-brand);
  --bs-link-hover-color: var(--lew-brand-strong);
  --bs-body-font-family: var(--lew-font);
  --bs-body-color: var(--lew-navy);
  --bs-body-bg: var(--lew-page);
  --bs-border-color: var(--lew-grey-300);
}

body {
  font-family: var(--lew-font);
  color: var(--lew-navy);
  background-color: var(--lew-page);
  -webkit-font-smoothing: antialiased;
}

/* thin brand bar on top of every page, like the global navigation of lew.de */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--lew-brand);
  z-index: 1030;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--lew-navy);
  font-weight: 600;
}

a {
  color: var(--lew-brand);
}
a:hover {
  color: var(--lew-brand-strong);
}

/* ---------------------------------------------------------------- app shell */

.lew-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--lew-sidebar-width);
  padding: 2rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  background-color: var(--lew-white);
  border-right: 1px solid var(--lew-grey-200);
  z-index: 1020;
}

.lew-sidebar-logo {
  width: 7.5rem;
  margin: 0 0.75rem;
}

.lew-sidebar-title {
  margin: 0.75rem 0.75rem 1.5rem;
  color: var(--lew-grey-600);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

.lew-sidebar .nav-link {
  margin-bottom: 0.25rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--lew-radius-md);
  color: var(--lew-navy);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lew-sidebar .nav-link:hover {
  background-color: var(--lew-brand-faint);
  color: var(--lew-brand);
}
.lew-sidebar .nav-link.active,
.lew-sidebar .nav-pills .nav-link.active {
  background-color: var(--lew-brand);
  color: var(--lew-white);
}
.lew-sidebar .nav-link:focus-visible {
  box-shadow: var(--lew-focus);
}

.lew-sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--lew-grey-200);
}
.lew-sidebar-footer .nav-link {
  color: var(--lew-grey-600);
}

.lew-content {
  margin-left: var(--lew-sidebar-width);
  padding: 2.25rem 2rem 2rem;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- cards */

.card {
  border: 0;
  border-radius: var(--lew-radius-lg);
  background-color: var(--lew-white);
  box-shadow: var(--lew-shadow);
}

.card-header {
  padding: 1rem 1.25rem;
  background-color: var(--lew-white);
  border-bottom: 1px solid var(--lew-grey-200);
  color: var(--lew-navy);
  font-size: 1.05rem;
  font-weight: 600;
}
.card-header:first-child {
  border-radius: var(--lew-radius-lg) var(--lew-radius-lg) 0 0;
}

.card-body {
  padding: 1.25rem;
}

/* nested cards (2FA options) stay flat */
.card .card {
  box-shadow: none;
  border: 1px solid var(--lew-grey-200);
  border-radius: var(--lew-radius-md);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  border-radius: var(--lew-radius-pill);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
}
.btn-sm {
  padding: 0.3rem 0.9rem;
}

.btn-primary {
  --bs-btn-bg: var(--lew-brand);
  --bs-btn-border-color: var(--lew-brand);
  --bs-btn-hover-bg: var(--lew-brand-strong);
  --bs-btn-hover-border-color: var(--lew-brand-strong);
  --bs-btn-active-bg: var(--lew-brand-bold);
  --bs-btn-active-border-color: var(--lew-brand-bold);
  --bs-btn-disabled-bg: var(--lew-brand-soft);
  --bs-btn-disabled-border-color: var(--lew-brand-soft);
  --bs-btn-focus-shadow-rgb: 43, 93, 255;
}

.btn-danger {
  --bs-btn-bg: var(--lew-red);
  --bs-btn-border-color: var(--lew-red);
  --bs-btn-hover-bg: #a30a33;
  --bs-btn-hover-border-color: #a30a33;
  --bs-btn-active-bg: #850829;
  --bs-btn-active-border-color: #850829;
}

.btn-secondary,
.btn-outline-primary {
  --bs-btn-color: var(--lew-brand);
  --bs-btn-bg: var(--lew-white);
  --bs-btn-border-color: var(--lew-brand);
  --bs-btn-hover-color: var(--lew-white);
  --bs-btn-hover-bg: var(--lew-brand);
  --bs-btn-hover-border-color: var(--lew-brand);
  --bs-btn-active-color: var(--lew-white);
  --bs-btn-active-bg: var(--lew-brand-strong);
  --bs-btn-active-border-color: var(--lew-brand-strong);
}

/* ---------------------------------------------------------------- forms */

/* page layouts label their controls with plain html.P / html.Label */
.form-label,
.card-body > label,
.card-body > p:not([class]) {
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  color: var(--lew-navy);
  font-weight: 500;
}
.card-body > label:first-child,
.card-body > p:not([class]):first-child {
  margin-top: 0;
}

.form-control,
.form-select {
  border-color: var(--lew-grey-300);
  border-radius: var(--lew-radius-md);
  color: var(--lew-navy);
}
.form-control-lg {
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--lew-radius-md);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--lew-brand);
  box-shadow: var(--lew-focus);
}
.form-control[readonly] {
  background-color: var(--lew-grey-50);
}

/* dcc.Dropdown (react-select) */
.Select-control {
  border-color: var(--lew-grey-300);
  border-radius: var(--lew-radius-md);
  min-height: 40px;
}
.is-focused:not(.is-open) > .Select-control,
.is-open > .Select-control {
  border-color: var(--lew-brand);
  box-shadow: var(--lew-focus);
}
.Select-menu-outer {
  border-color: var(--lew-grey-300);
  border-radius: 0 0 var(--lew-radius-md) var(--lew-radius-md);
  box-shadow: var(--lew-shadow);
  z-index: 1010;
}
.Select-option.is-focused {
  background-color: var(--lew-brand-faint);
  color: var(--lew-navy);
}
.Select-option.is-selected {
  background-color: var(--lew-brand-subtle);
  color: var(--lew-navy);
  font-weight: 500;
}
.Select-value-label,
.Select--single > .Select-control .Select-value {
  color: var(--lew-navy) !important;
}

/* dcc.DatePickerSingle / DatePickerRange (react-dates) */
.SingleDatePickerInput,
.DateRangePickerInput {
  border: 1px solid var(--lew-grey-300);
  border-radius: var(--lew-radius-md);
  overflow: hidden;
}
.DateInput_input {
  padding: 0.45rem 0.75rem;
  font-family: var(--lew-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--lew-navy);
}
.DateInput_input__focused {
  border-bottom-color: var(--lew-brand);
}
.CalendarDay__selected,
.CalendarDay__selected:hover,
.CalendarDay__selected_span {
  background: var(--lew-brand);
  border-color: var(--lew-brand);
}

/* keep start and end date side by side in the narrow configuration columns */
.DateRangePickerInput {
  display: flex;
  align-items: center;
}
.DateRangePickerInput .DateInput {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.DateRangePickerInput .DateInput_input {
  padding: 0.45rem 0.5rem;
}
.DateRangePickerInput_arrow {
  flex: 0 0 auto;
  padding: 0 0.25rem;
}
.DateRangePickerInput_arrow_svg {
  width: 16px;
  height: 16px;
}

/* react-dates only ships English texts (moment is bundled without locales): relabel the
   weekday header in German, the pickers start on Monday (first_day_of_week=1) */
.DayPicker_weekHeader_li small {
  font-size: 0;
}
.DayPicker_weekHeader_li small::after {
  font-size: 0.75rem;
}
.DayPicker_weekHeader_li:nth-child(1) small::after { content: "Mo"; }
.DayPicker_weekHeader_li:nth-child(2) small::after { content: "Di"; }
.DayPicker_weekHeader_li:nth-child(3) small::after { content: "Mi"; }
.DayPicker_weekHeader_li:nth-child(4) small::after { content: "Do"; }
.DayPicker_weekHeader_li:nth-child(5) small::after { content: "Fr"; }
.DayPicker_weekHeader_li:nth-child(6) small::after { content: "Sa"; }
.DayPicker_weekHeader_li:nth-child(7) small::after { content: "So"; }
/* the keyboard shortcut help panel is English only */
.DayPickerKeyboardShortcuts_show {
  display: none;
}

/* ---------------------------------------------------------------- tabs */

.nav-tabs {
  border-bottom: 1px solid var(--lew-grey-200);
  gap: 0.25rem;
}
.nav-tabs .nav-link {
  margin-bottom: -1px;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--lew-grey-600);
  font-weight: 500;
}
.nav-tabs .nav-link:hover {
  color: var(--lew-navy);
  border-bottom-color: var(--lew-grey-300);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--lew-brand);
  background-color: transparent;
  border-bottom-color: var(--lew-brand);
}
.tab-content,
.nav-tabs + div {
  padding-top: 1rem;
}

/* ---------------------------------------------------------------- tables */

.table {
  --bs-table-color: var(--lew-navy);
  --bs-table-striped-bg: var(--lew-grey-50);
  --bs-table-hover-bg: var(--lew-brand-faint);
  margin-bottom: 0;
}
.table > thead th {
  border-bottom-width: 2px;
  color: var(--lew-navy);
  font-weight: 600;
  white-space: nowrap;
}
.table-bordered > :not(caption) > * > * {
  border-color: var(--lew-grey-200);
}

/* ---------------------------------------------------------------- modals */

.modal-content {
  border: 0;
  border-radius: var(--lew-radius-lg);
  box-shadow: 0 12px 40px rgba(7, 28, 92, 0.2);
}
.modal-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 0;
}
.modal-title {
  color: var(--lew-navy);
  font-weight: 600;
}
.modal-body {
  padding: 0.75rem 1.5rem 1.5rem;
}
.modal-footer {
  border-top: 0;
  padding: 0 1.5rem 1.25rem;
}

/* ---------------------------------------------------------------- loading spinners */

.dash-default-spinner > div,
.dash-dot-spinner > div,
.dash-sk-circle .dash-sk-child:before {
  background-color: var(--lew-brand) !important;
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 991.98px) {
  .lew-sidebar {
    position: sticky;
    width: 100%;
    bottom: auto;
    padding: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--lew-grey-200);
  }
  .lew-sidebar-logo {
    width: 4.5rem;
    margin: 0;
  }
  .lew-sidebar-title,
  .lew-sidebar hr {
    display: none;
  }
  .lew-sidebar .nav {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .lew-sidebar .nav-link {
    margin-bottom: 0;
    padding: 0.4rem 0.75rem;
  }
  .lew-sidebar-footer {
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    border-top: 0;
  }
  .lew-content {
    margin-left: 0;
    padding: 1.5rem 1rem;
  }
  /* page layouts use fixed column widths, stack them on narrow screens */
  .lew-content .row > [class*="col"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .lew-content .row > [class*="col"] + [class*="col"] {
    margin-top: 1.5rem;
  }
}