/* -----------------------------------
   FONT IMPORTS
----------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');

/* -----------------------------------
   ROOT VARIABLES
----------------------------------- */
:root {
  --font-primary: "Calibri", "Arial", sans-serif;

  /* Primär färgpalett */
  --color-primary: #D83019;
  --color-primary-dark: #b73419;
  --color-primary-medium: #C4E3DD;
  --color-primary-light: #edebeb;

  /* Kompletterande färger */
  --color-accent: #195D64;
  --color-highlight: #E5D59C;
  --color-secondary-bg: #edf6f4;
  --color-neutral-light: #fafafa;
  --color-neutral-bg: #f4f4f4;
  --color-text-dark: #333333;
  --color-card-cons: #edf6f4;
  --color-peak-power: #c63e28;
  --color-weekend: #c4e0d8;
  --color-holiday: #edebeb;
  --color-white: #ffffff;
  --color-black: #000000;
}

/* -----------------------------------
   BASE STYLES
----------------------------------- */
body {
  background-color: #fff;
}

.bg-white {
  background-color: var(--color-neutral-light) !important;
}

h1, h2, h3, h4, h5 {
  font-family: "Viga", sans-serif;
  font-weight: 100 !important;
}

.card-title.h5 {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
}

/* -----------------------------------
   NAVIGATION
----------------------------------- */
.navbar-logo {
  height: 4.875em;
}

.navbar {
  height: 7.5em;
}

.page-xs .logo {
  height: 4.875em;
}

#page-myProfile li.nav-item:nth-child(2) {
  display: none;
}

/* -----------------------------------
   COLORS - HIGHCHARTS
----------------------------------- */
.highcharts-color-contractproduct-1 {
  fill: var(--color-highlight);
  stroke: var(--color-highlight);
}

.highcharts-color-electricity {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.highcharts-color-weekend {
  fill: var(--color-weekend);
  stroke: var(--color-weekend);
}

.table-row-weekend {
  background-color: var(--color-weekend) !important;
  color: var(--color-text-dark);
}

.highcharts-color-powerpeak {
  fill: var(--color-peak-power);
  stroke: var(--color-peak-power);
}

.table-row-powerpeak {
  background-color: var(--color-peak-power) !important;
  color: var(--color-white);
}

.highcharts-color-holiday {
  fill: var(--color-holiday);
  stroke: var(--color-holiday);
}

.table-row-holiday {
  background-color: var(--color-holiday)!important;
  color: var(--color-black);
}

/* -----------------------------------
   CARDS
----------------------------------- */
.card {
  background-color: var(--color-neutral-bg);
}

/* Endast korten i raden med informationskort */
.start-cards .card {
  background-color: var(--color-primary-medium) !important;
}

/* Korten på förbrukningssidan */
.shadow.p-4.w-100.bg-white {
  background-color: var(--color-card-cons) !important;
}

/* -----------------------------------
   PAGE HEADERS
----------------------------------- */
.page-start .page-header {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  margin-top: -24px !important;
  margin-left: -15px;
  padding: 15px 0 15px 37px !important;
}

.page-start .page-header h1 {
  color: #fff !important;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

/* Lead textbredd */
.lead {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .lead {
    width: 66.6667%;
  }

  .page-documentlist .row.mb-3 {
    width: 133%;
  }
}

/* Access Approval Page */
.page-accessapproval .page-header {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .page-accessapproval .page-header {
    width: 66.6667%;
  }
}

/* -----------------------------------
   VEAB HERO BLOCK
----------------------------------- */
.veab-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-secondary-bg);
}

.veab-hero-text {
  position: relative;
  z-index: 1;
}

.veab-hero-text::after {
  content: "";
  position: absolute;
  top: 0;
  right: -60px;
  width: 120px;
  height: 100%;
  background-color: var(--color-secondary-bg);
  transform: skewX(-12deg);
  transform-origin: top right;
  z-index: -1;
  border-bottom-right-radius: 15px;
}

.veab-hero-image img {
  width: 106%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-left: -45px;
  margin-top: 1px;
}

/* -----------------------------------
   BUTTON STYLES (Bootstrap override)
----------------------------------- */

/* Alla Bootstrap-knappar får rundade hörn */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
button,
.wizard>.actions>ul li:not(:first-of-type) a {
  border-radius: 10px !important;
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent !important;
  box-shadow: none !important;
}

/* Hover-effekt för alla Bootstrap-knappar */
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover,
button#c-p-bn:hover,
.wizard>.actions>ul li:not(:first-of-type) a:hover {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .125rem;
  border-radius: 10px !important;
}

/* Anpassad röd knapp */
.btn-veab-red {
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid transparent !important;
  border-radius: 10px;
  padding: 0.6rem 1.5rem;
  transition: all 0.2s ease-in-out;
}

.btn-veab-red:hover {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .125rem;
  border-radius: 10px !important;
}

/* -----------------------------------
   BUTTON EXCEPTIONS
----------------------------------- */

/* Inga rundade hörn på sidan "page-consumption" */
.page-consumption .btn-tertiary {
  border-radius: 0 !important;
}

/* Ingen hover-effekt på länkknappar och "moreoptions" */
.btn-link:hover,
.btn-link:focus,
.moreoptions:hover,
.moreoptions:focus {
  background-color: transparent !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Mobile fix */
@media (max-width: 991.98px) {
  .veab-hero-text::after {
    display: none;
  }
}