/** 
 * MyKNX - Theme Overrides CSS
 * This CSS is designed to be a 'bolt-on' to the existing CSS structure to override 
 * and bring the styling in-line with the new knx.org design
 *
 * Version: 1.0
 * Date: April 2026
 * Author: Rich@Tribus
*/

@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/* Knx.org Variables */
:root {
  /* Fonts */
  --font-family-base: 'Urbanist', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-bolder: 700;

  /* Colours */
  --knx-green: rgb(12 177 75);
  --knx-grey: rgb(142 151 157);
  --knx-blue: rgb(0 107 182);

  --brand-green: rgb(90 227 113);
  --brand-green-90: rgb(from var(--brand-green) r g b / 90%);
  --brand-green-80: rgb(from var(--brand-green) r g b / 80%);
  --brand-green-70: rgb(from var(--brand-green) r g b / 70%);
  --brand-green-60: rgb(from var(--brand-green) r g b / 60%);
  --brand-green-50: rgb(from var(--brand-green) r g b / 50%);
  --brand-green-40: rgb(from var(--brand-green) r g b / 40%);
  --brand-green-30: rgb(from var(--brand-green) r g b / 30%);
  --brand-green-20: rgb(from var(--brand-green) r g b / 20%);
  --brand-green-10: rgb(from var(--brand-green) r g b / 10%);

  --brand-black: rgb(5 43 51);
  --brand-black-90: rgb(from var(--brand-black) r g b / 90%);
  --brand-black-80: rgb(from var(--brand-black) r g b / 80%);
  --brand-black-70: rgb(from var(--brand-black) r g b / 70%);
  --brand-black-60: rgb(from var(--brand-black) r g b / 60%);
  --brand-black-50: rgb(from var(--brand-black) r g b / 50%);
  --brand-black-40: rgb(from var(--brand-black) r g b / 40%);
  --brand-black-30: rgb(from var(--brand-black) r g b / 30%);
  --brand-black-20: rgb(from var(--brand-black) r g b / 20%);
  --brand-black-10: rgb(from var(--brand-black) r g b / 10%);

  --brand-white: rgb(255 255 255);
  --brand-white-90: rgb(from var(--brand-white) r g b / 90%);
  --brand-white-80: rgb(from var(--brand-white) r g b / 80%);
  --brand-white-70: rgb(from var(--brand-white) r g b / 70%);
  --brand-white-60: rgb(from var(--brand-white) r g b / 60%);
  --brand-white-50: rgb(from var(--brand-white) r g b / 50%);
  --brand-white-40: rgb(from var(--brand-white) r g b / 40%);
  --brand-white-30: rgb(from var(--brand-white) r g b / 30%);
  --brand-white-20: rgb(from var(--brand-white) r g b / 20%);
  --brand-white-10: rgb(from var(--brand-white) r g b / 10%);

  --line-colour-light: var(--brand-black-20);
  --line-colour-dark: rgb(49 89 97);

  --bg-colour-light: rgb(248 249 249);
  --bg-colour-dark: rgb(5 43 51);
  --bg-colour-dark-highlight: rgb(7 52 62);

  --text-colour-white: var(--brand-white);
  --text-colour-light: rgb(170 203 209);
  --text-colour-dark: rgb(61 91 97);
  --text-colour-placeholder: rgb(117 117 117);
  --text-colour-placeholder-darker: rgb(112 112 112);

  --heading-colour-primary: var(--brand-black);
  --heading-colour-secondary: rgb(255 255 255);

  --button-bg-colour-primary: var(--brand-green);
  --button-text-colour-primary: var(--brand-black);

  --partner-platinum: var(--brand-black);
  --partner-silver: rgb(214 214 214);
  --partner-gold: rgb(186 154 103);

  --errors: rgb(225 0 0);
  --warnings: rgb(254 155 14);

  /* OKLCH */
  @supports (color: oklch(0 0 0)) {
    --knx-green: oklch(0.664 0.187 148.5);
    --knx-grey: oklch(0.671 0.014 236.7);
    --knx-blue: oklch(0.518 0.143 249.1);

    --brand-green: oklch(0.815 0.196 146.7);
    --brand-green-90: rgb(from var(--brand-green) r g b / 90%);
    --brand-green-80: rgb(from var(--brand-green) r g b / 80%);
    --brand-green-70: rgb(from var(--brand-green) r g b / 70%);
    --brand-green-60: rgb(from var(--brand-green) r g b / 60%);
    --brand-green-50: rgb(from var(--brand-green) r g b / 50%);
    --brand-green-40: rgb(from var(--brand-green) r g b / 40%);
    --brand-green-30: rgb(from var(--brand-green) r g b / 30%);
    --brand-green-20: rgb(from var(--brand-green) r g b / 20%);
    --brand-green-10: rgb(from var(--brand-green) r g b / 10%);

    --brand-black: oklch(0.268 0.043 215.2);
    --brand-black-90: rgb(from var(--brand-black) r g b / 90%);
    --brand-black-80: rgb(from var(--brand-black) r g b / 80%);
    --brand-black-70: rgb(from var(--brand-black) r g b / 70%);
    --brand-black-60: rgb(from var(--brand-black) r g b / 60%);
    --brand-black-50: rgb(from var(--brand-black) r g b / 50%);
    --brand-black-40: rgb(from var(--brand-black) r g b / 40%);
    --brand-black-30: rgb(from var(--brand-black) r g b / 30%);
    --brand-black-20: rgb(from var(--brand-black) r g b / 20%);
    --brand-black-10: rgb(from var(--brand-black) r g b / 10%);

    --brand-white: oklch(1 0 0);
    --brand-white-90: rgb(from var(--brand-white) r g b / 90%);
    --brand-white-80: rgb(from var(--brand-white) r g b / 80%);
    --brand-white-70: rgb(from var(--brand-white) r g b / 70%);
    --brand-white-60: rgb(from var(--brand-white) r g b / 60%);
    --brand-white-50: rgb(from var(--brand-white) r g b / 50%);
    --brand-white-40: rgb(from var(--brand-white) r g b / 40%);
    --brand-white-30: rgb(from var(--brand-white) r g b / 30%);
    --brand-white-20: rgb(from var(--brand-white) r g b / 20%);
    --brand-white-10: rgb(from var(--brand-white) r g b / 10%);

    --line-colour-light: var(--brand-black-20);
    --line-colour-dark: oklch(0.438 0.047 211.9);

    --bg-colour-light: oklch(0.981 0.001 197.1);
    --bg-colour-dark: oklch(0.268 0.043 215.2);
    --bg-colour-dark-highlight: oklch(0.301 0.049 216.6);

    --text-colour-white: var(--brand-white);
    --text-colour-light: oklch(0.82 0.036 209.8);
    --text-colour-dark: oklch(0.45 0.037 211.4);
    --text-colour-placeholder: oklch(0.562 0 0);
    --text-colour-placeholder-darker: oklch(0.545 0 89.9);

    --heading-colour-primary: var(--brand-black);
    --heading-colour-secondary: oklch(1 0 0);

    --button-bg-colour-primary: var(--brand-green);
    --button-text-colour-primary: var(--brand-black);

    --partner-platinum: var(--brand-black);
    --partner-silver: oklch(0.876 0 89.9);
    --partner-gold: oklch(0.703 0.078 78.6);

    --errors: oklch(0.611 0.224 26.4);
    --warnings: oklch(0.774 0.171 65.3);
  }

  /* Grid & Layout */
  --site-max-width: 89.25rem;
  --grid-column-gap: 1.25rem;
  --grid-row-gap: 0.9375rem;
  --grid-gutter: 0.9375rem;

  /* Utility */
  --border-radius: 0.625rem;
  --section-padding: 1.75rem;
}

/* Global */
body,
html {
  font-size: 16px;
}

body {
  background-color: var(--brand-black);
  background-image: url('data:image/svg+xml,<svg fill="none" height="831" viewBox="0 0 831 831" width="831" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h831v831h-831z"/></clipPath><g clip-path="url(%23a)" stroke="%235ae371" stroke-width=".3"><path d="m830.85 415.5c0 54.545-10.743 108.555-31.617 158.948-20.873 50.392-51.467 96.18-90.036 134.749s-84.357 69.163-134.749 90.036c-50.393 20.874-104.403 31.617-158.948 31.617s-108.555-10.743-158.948-31.617c-50.392-20.873-96.18-51.467-134.749-90.036-38.5686-38.569-69.1631-84.357-90.0364-134.749-20.8733-50.393-31.616605-104.403-31.6166-158.948s10.7434-108.555 31.6167-158.948c20.8732-50.392 51.4677-96.18 90.0363-134.749 38.569-38.5686 84.357-69.1631 134.749-90.0364 50.393-20.8733 104.404-31.616607 158.948-31.6166 54.545.000007 108.555 10.7434 158.948 31.6167 50.392 20.8733 96.18 51.4677 134.749 90.0363 38.569 38.569 69.163 84.357 90.036 134.749 20.874 50.393 31.617 104.404 31.617 158.948z" stroke-opacity=".1"/><path d="m796.225 415.5c0 49.998-9.848 99.505-28.981 145.697s-47.177 88.163-82.531 123.516c-35.353 35.354-77.324 63.398-123.516 82.531s-95.699 28.981-145.697 28.981-99.505-9.848-145.697-28.981-88.163-47.177-123.516-82.531c-35.354-35.353-63.3978-77.324-82.531-123.516-19.1333-46.192-28.981-95.7-28.981-145.697 0-49.998 9.8478-99.506 28.981-145.697 19.1332-46.192 47.177-88.163 82.531-123.516 35.353-35.354 77.324-63.3978 123.516-82.5311 46.192-19.1332 95.7-28.9809 145.697-28.9809 49.998 0 99.506 9.8478 145.697 28.981 46.192 19.1332 88.163 47.177 123.516 82.531 35.354 35.353 63.398 77.324 82.531 123.516s28.981 95.7 28.981 145.697z" stroke-opacity=".2"/><path d="m761.6 415.5c0 45.451-8.952 90.456-26.345 132.447s-42.887 80.144-75.025 112.283c-32.139 32.138-70.292 57.632-112.283 75.025s-86.997 26.345-132.447 26.345c-45.451 0-90.456-8.952-132.447-26.345s-80.144-42.887-112.283-75.025c-32.138-32.139-57.632-70.292-75.0247-112.283-17.3932-41.991-26.3453-86.997-26.3453-132.447 0-45.451 8.9521-90.456 26.3453-132.447 17.3927-41.991 42.8867-80.144 75.0247-112.283 32.139-32.138 70.293-57.632 112.283-75.0247 41.991-17.3932 86.997-26.3453 132.447-26.3453 45.451 0 90.456 8.9522 132.447 26.3453 41.991 17.3927 80.144 42.8867 112.283 75.0247 32.138 32.139 57.632 70.293 75.025 112.283 17.393 41.991 26.345 86.997 26.345 132.447z" stroke-opacity=".3"/><path d="m726.975 415.5c0 40.903-8.057 81.406-23.71 119.196s-38.596 72.127-67.519 101.05-63.26 51.866-101.05 67.519-78.293 23.71-119.196 23.71-81.406-8.057-119.196-23.71-72.127-38.596-101.05-67.519-51.866-63.26-67.519-101.05-23.71-78.293-23.71-119.196c0-40.904 8.057-81.406 23.71-119.196s38.596-72.127 67.519-101.05 63.26-51.866 101.05-67.519 78.293-23.71 119.196-23.71c40.904 0 81.406 8.057 119.196 23.71s72.127 38.596 101.05 67.519 51.866 63.26 67.519 101.05 23.71 78.293 23.71 119.196z" stroke-opacity=".4"/><path d="m692.35 415.5c0 36.356-7.161 72.357-21.074 105.946s-34.306 64.109-60.013 89.817c-25.708 25.707-56.228 46.1-89.817 60.013s-69.59 21.074-105.946 21.074-72.357-7.161-105.946-21.074-64.109-34.306-89.817-60.014c-25.707-25.707-46.1-56.227-60.013-89.816s-21.074-69.59-21.074-105.946 7.161-72.357 21.074-105.946 34.306-64.109 60.014-89.817c25.707-25.707 56.227-46.1 89.816-60.013s69.59-21.074 105.946-21.074 72.357 7.161 105.946 21.074 64.109 34.306 89.817 60.014c25.707 25.707 46.1 56.227 60.013 89.816s21.074 69.59 21.074 105.946z" stroke-opacity=".5"/><path d="m657.725 415.5c0 31.809-6.265 63.307-18.438 92.695-12.173 29.389-30.015 56.091-52.508 78.584s-49.195 40.335-78.584 52.508c-29.388 12.173-60.886 18.438-92.695 18.438s-63.307-6.265-92.696-18.438c-29.388-12.173-56.09-30.015-78.583-52.508s-40.335-49.195-52.508-78.584c-12.173-29.388-18.438-60.886-18.438-92.695s6.265-63.307 18.438-92.696c12.173-29.388 30.015-56.09 52.508-78.583s49.195-40.335 78.584-52.508c29.388-12.173 60.886-18.438 92.695-18.438s63.307 6.265 92.696 18.438c29.388 12.173 56.09 30.015 78.583 52.508s40.335 49.195 52.508 78.584c12.173 29.388 18.438 60.886 18.438 92.695z" stroke-opacity=".6"/><path d="m623.1 415.5c0 27.262-5.37 54.258-15.803 79.445-10.432 25.187-25.724 48.073-45.002 67.35-19.277 19.278-42.163 34.57-67.35 45.002-25.187 10.433-52.183 15.803-79.445 15.803s-54.258-5.37-79.445-15.803c-25.187-10.432-48.073-25.724-67.35-45.002-19.278-19.277-34.57-42.163-45.002-67.35-10.433-25.187-15.803-52.183-15.803-79.445s5.37-54.258 15.803-79.445c10.432-25.187 25.724-48.073 45.002-67.35 19.277-19.278 42.163-34.57 67.35-45.002 25.187-10.433 52.183-15.803 79.445-15.803s54.258 5.37 79.445 15.803 48.073 25.724 67.35 45.002c19.278 19.277 34.57 42.163 45.002 67.35 10.433 25.187 15.803 52.183 15.803 79.445z" stroke-opacity=".7"/><path d="m553.85 415.5c0 18.168-3.579 36.159-10.531 52.944-6.953 16.786-17.144 32.037-29.991 44.884s-28.098 23.038-44.884 29.991c-16.785 6.952-34.776 10.531-52.944 10.531s-36.159-3.579-52.944-10.531c-16.786-6.953-32.037-17.144-44.884-29.991s-23.038-28.098-29.991-44.884c-6.952-16.785-10.531-34.776-10.531-52.944s3.579-36.159 10.531-52.944c6.953-16.786 17.144-32.037 29.991-44.884s28.098-23.038 44.884-29.991c16.785-6.952 34.776-10.531 52.944-10.531s36.159 3.579 52.944 10.531c16.786 6.953 32.037 17.144 44.884 29.991s23.038 28.098 29.991 44.884c6.952 16.785 10.531 34.776 10.531 52.944z" stroke-opacity=".9"/><path d="m519.225 415.5c0 13.621-2.683 27.109-7.896 39.694-5.212 12.584-12.853 24.019-22.484 33.651-9.632 9.631-21.067 17.272-33.651 22.484-12.585 5.213-26.073 7.896-39.694 7.896s-27.109-2.683-39.694-7.896c-12.584-5.212-24.019-12.853-33.651-22.484-9.631-9.632-17.272-21.067-22.484-33.651-5.213-12.585-7.896-26.073-7.896-39.694s2.683-27.109 7.896-39.694c5.212-12.584 12.853-24.019 22.484-33.651 9.632-9.631 21.067-17.272 33.651-22.484 12.585-5.213 26.073-7.896 39.694-7.896s27.109 2.683 39.694 7.896c12.584 5.212 24.019 12.853 33.651 22.484 9.631 9.632 17.272 21.067 22.484 33.651 5.213 12.585 7.896 26.073 7.896 39.694z"/><path d="m588.475 415.5c0 22.715-4.474 45.208-13.167 66.195-8.693 20.986-21.434 40.055-37.496 56.117s-35.131 28.803-56.117 37.496c-20.987 8.693-43.48 13.167-66.195 13.167s-45.208-4.474-66.195-13.167c-20.986-8.693-40.055-21.434-56.117-37.496s-28.803-35.131-37.496-56.117c-8.693-20.987-13.167-43.48-13.167-66.195s4.474-45.208 13.167-66.195c8.693-20.986 21.434-40.055 37.496-56.117s35.131-28.803 56.117-37.496c20.987-8.693 43.48-13.167 66.195-13.167s45.208 4.474 66.195 13.167c20.986 8.693 40.055 21.434 56.117 37.496s28.803 35.131 37.496 56.117c8.693 20.987 13.167 43.48 13.167 66.195z" stroke-opacity=".8"/></g></svg>');
  background-position: top -300px right;
  background-repeat: no-repeat;
}

*:not(span.knxicon, .icon, .bicon) {
  font-family: var(--font-family-base) !important;
}

*:not(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--font-weight-regular);
}

a {
  color: var(--brand-black);
  transition: color 0.25s ease;

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

.btn-primary {
  background: var(--brand-green);
  border-color: var(--brand-green);
  border-radius: 0.5rem;
  color: var(--brand-black);
  cursor: pointer;
  font-size: 1rem;
  outline: none;
  padding: 0.125rem 0.9375rem;
  transition: all 0.25s ease;

  &:hover {
    background-color: oklch(0.775 0.2 146.1);
    border-color: var(--brand-green-10);
    color: var(--brand-black);
  }
}

/* Utility to align btn-primary height with default Bootstrap secondary buttons */
.btn-match-secondary-height {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

h1.title {
  color: var(--brand-white);
}

ol,
p,
ul {
  color: var(--text-colour-dark);
}

/* Structural Elements (Global) */
.container {
  max-width: var(--site-max-width);
  padding-inline: var(--grid-gutter);
}

/* Form components (Global) */
.form-control {
  border-radius: 0.25rem;
}

.form-control:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 5px var(--brand-green-30);
}

/* --------------------------------------------------------- */
/* Colour Class Overrides (Global) 
This method of implemtation is not best practice! */
.dropdown-item .blue,
.navbar-nav .nav-item a.blue {
  color: var(--brand-black) !important;
}

/* --------------------------------------------------------- */
/* Heading Overrides (Global) */

/* Main */
div.store-highlight-title {
  color: var(--heading-colour-primary);
  font: normal var(--font-weight-regular)
    clamp(1.188rem, 0.836rem + 1.76vw, 2.375rem) var(--font-family-base);
  letter-spacing: 0px;
  line-height: 1.1;
  text-wrap: pretty;
}

/* Sub-titles */
div.store-content-title {
  color: var(--heading-colour-primary);
  font: normal var(--font-weight-regular)
    clamp(1.125rem, 1.054rem + 0.36vw, 1.375rem) var(--font-family-base);
  letter-spacing: 0px;
  line-height: 1.28;
  text-wrap: pretty;
}

/* Button Overrides (Global) */
.store-highlight-footer a,
div.store-content-footer a {
  appearance: button;
  background-color: var(--brand-green);
  border: 3px solid var(--brand-green);
  border-radius: 1.875rem;
  cursor: pointer;
  color: var(--brand-black);
  font-size: clamp(0.75rem, 0.676rem + 0.37vw, 1rem);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  padding-block: 0.5rem;
  padding-inline: 0.775rem;
  text-decoration: none;
  transition: 0.25s;
  width: fit-content;
}

@media (hover: hover) {
  .store-highlight-footer a:hover,
  div.store-content-footer a:hover {
    background-color: oklch(0.775 0.2 146.1);
    border-color: oklch(0.775 0.2 146.1);
    box-shadow: 0 0 0 5px var(--brand-green-30);
  }
}

/* --------------------------------------------------------- */
/* Global Layout */

#logo {
  height: auto;
  width: 100px;
}

/* Navbar */
.navbar-nav .nav-item {
  transition: all 0.25s ease;
}

.navbar-nav .nav-item a,
.navbar-nav .nav-item a:not(.dropdown-item) {
  color: var(--brand-black);
  cursor: pointer;
  font: 1rem var(--font-weight-regular) var(--font-family-base);

  & .icon,
  & .knxicon::before {
    transition: all 0.25s ease;
  }
}

.nav-item:hover:not(.no-hover) {
  & .icon,
  & .knxicon::before {
    color: var(--brand-green);
  }
}

.navbar-nav .nav-item.hover-border-bottom.show {
  border-color: var(--brand-green);
}

.dropdown-toggle:after,
.nav-item .knxicon-open,
.nav-link .knxicon-open {
  color: var(--brand-green);
}

.navbar-expand .navbar-nav .dropdown-menu {
  border-radius: 0.375rem;
}

.dropdown-item-title {
  color: var(--brand-black);
  font: 1rem var(--font-weight-regular) var(--font-family-base);
}

.select-account-button {
  border-radius: 0.5rem;
  transition: all 0.25s ease;

  &:hover {
    background: transparent;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 5px var(--brand-green-30);
    cursor: pointer;
  }
}

@media (width >= 48rem) {
  #navbar-desktop {
    height: 102px;
  }
}

/* Page layout adjustment */
@media (width >= 48rem) {
  body div.wrapper {
    padding-block-start: 3rem;
  }

  body div.container div.store-highlight {
    margin-block-start: 2rem;
  }
}

/* Footer */
.page-footer {
  background-color: rgb(5 36 43);
  color: var(--text-colour-white);
  font-size: 0.875rem;
  margin-top: 3rem !important;

  & h2 {
    color: var(--brand-green);
    font-weight: var(--font-weight-regular);
  }

  & p {
    color: var(--brand-white);
  }
}

.footer-copyright {
  background-color: rgb(0 0 0);
}

/* Cards (Base) */
.card {
  background-color: var(--bg-colour-light);
  border-color: var(--bg-colour-light);
  border-radius: var(--border-radius);
  padding: var(--section-padding);
}

/* Alerts e.g. /account/profile page */
.alert {
  border-color: var(--warnings);
  border-radius: var(--border-radius);
  color: var(--warnings);
}

.btn-warning {
  background-color: var(--warnings);
  border-color: var(--warnings);

  &:hover {
    background-color: var(--brand-white);
    border-color: var(--warnings);
    color: var(--brand-black);
  }
}

.btn-dark {
  background-color: var(--brand-green);
  border: 2px solid var(--brand-green);
  border-radius: 1.875rem;
  color: var(--brand-black);
  font-weight: var(--font-weight-medium);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  transition: all 0.25s ease;

  &:hover,
  &:focus {
    background-color: transparent;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 4px var(--brand-green-30);
    color: var(--brand-green);
  }
}

/* "View" buttons inside tables: rounded-rectangle shape matching the "Submit for
   Approval" button, with a solid dark background on hover instead of transparent
   so the button isn't affected by the DataTable row-hover overlay */

.table .btn-dark {
  border-radius: 0.5rem;
  padding: 0.125rem 0.9375rem;

  &:hover,
  &:focus {
    background-color: var(--brand-black);
  }
}

/* Approve buttons inside tables */
.btn-approve {
  background-color: var(--brand-green);
  border: 2px solid var(--brand-green);
  border-radius: 1.875rem;
  color: var(--brand-black);
  font-weight: var(--font-weight-medium);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  transition: all 0.25s ease;

  &:hover,
  &:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 4px var(--brand-green-30);
    color: var(--brand-green);
  }
}

.table .btn-approve {
  border-radius: 0.5rem;
  padding: 0.125rem 0.9375rem;

  &:hover,
  &:focus {
    background-color: var(--brand-black);
    color: var(--brand-white);
  }
}

/* Reject buttons inside tables */
.btn-reject {
  background-color: var(--errors); #
  border: 2px solid var(--errors);
  border-radius: 1.875rem;
  color: var(--brand-white);
  font-weight: var(--font-weight-medium);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  transition: all 0.25s ease;

  &:hover,
  &:focus {
    border-color: var(--errors);
    box-shadow: 0 0 0 4px var(--errors-30);
    color: var(--errors);
  }
}

.table .btn-reject {
  border-radius: 0.5rem;
  padding: 0.125rem 0.9375rem;

  &:hover,
  &:focus {
    background-color: #920000;
    color: var(--brand-white);
  }
}

/* Store Search */
.search-store {
  padding: 0.4375rem;
  transition: all 0.25s ease;

  &:focus-within {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 5px var(--brand-green-30);

    & .form-control:focus {
      border-color: var(--brand-white);
      box-shadow: none;
    }

    & .btn {
      color: var(--brand-green);
    }
  }

  & .btn {
    padding: 0.125rem 0.75rem;
    transition: color 0.25s ease;
  }
}

/* --------------------------------------------------------- */
/* Component Specifc */

/* Store Highlight section */
div.store-highlight {
  background-color: var(--bg-colour-dark-highlight);
  background-image: unset;
  border-radius: var(--border-radius);

  & .store-highlight-title {
    color: var(--brand-white);
  }
}

div.store-highlight-body {
  border-color: var(--line-colour-dark);
  border-radius: var(--border-radius);
}

.store-highlight-text-line a {
  color: var(--brand-white);
  font: 1rem var(--font-weight-regular) var(--font-family-base);
}

.store-highlight-text-line span.knxicon {
  color: var(--brand-white);
}

/* Store Content section */
div.store-content {
  background-color: var(--bg-colour-dark-highlight);
  border-radius: var(--border-radius);
  padding: var(--section-padding);

  & span.icon {
    color: var(--brand-green);
  }
}

div.store-content-grey {
  background-color: var(--bg-colour-dark);
  background-image: unset;
}

div.store-content-title {
  border-bottom: 1px solid var(--line-colour-dark);
  color: var(--brand-white);
}

div.store-content-body {
  background-color: var(--bg-colour-dark);
}

div.store-content-body.store-content-bordered {
  border-color: transparent;
  padding: 1rem;
}

div.store-content-body-text-title {
  color: var(--brand-white);
}

div.store-content-body-text-text {
  color: var(--text-colour-light);

  & a {
    color: var(--brand-white);
    font: normal var(--font-weight-regular) 1rem var(--font-family-base);
  }
}

div.store-content-body-element {
  padding: 1rem 1rem 0 1rem;
}

div.store-content-body-element:last-child {
  padding: 1rem 1rem 1rem 1rem;
}

div.store-content-body-element:hover {
  background-color: unset;
}

div.store-content-body-element-text {
  color: var(--text-colour-light);

  & a {
    color: var(--brand-white);
    font: normal var(--font-weight-regular) 1rem var(--font-family-base);
  }
}

div.store-content-footer {
  border: none;
  border-radius: unset;
  padding: unset;

  &:hover {
    background-color: unset;
  }
}

/* Dropdown Submenu */
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.125rem;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu > a::after {
  content: '\25B6';
  float: right;
  margin-left: 0.5em;
  font-size: 0.7em;
}

/* App Navbar (dark) */
nav.navbar.bg-dark {
  background-color: var(--bg-colour-dark) !important;
  border-radius: var(--border-radius);
}

nav.navbar.bg-dark .navbar-nav .nav-item a,
nav.navbar.bg-dark .navbar-nav .nav-item a:not(.dropdown-item) {
  color: var(--text-colour-white);
  transition: color 0.25s ease;
}

nav.navbar.bg-dark .navbar-nav .nav-item a:hover,
nav.navbar.bg-dark .navbar-nav .nav-item a:not(.dropdown-item):hover {
  color: var(--brand-green);
}

nav.navbar.bg-dark .dropdown-toggle::after {
  color: var(--brand-green);
}

nav.navbar.bg-dark .dropdown-menu {
  background-color: var(--bg-colour-dark-highlight);
  border-color: var(--line-colour-dark);
}

nav.navbar.bg-dark .dropdown-menu .dropdown-item {
  color: var(--text-colour-white);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

nav.navbar.bg-dark .dropdown-menu .dropdown-item:hover,
nav.navbar.bg-dark .dropdown-menu .dropdown-item:focus {
  background-color: var(--bg-colour-dark);
  color: var(--brand-green);
}

nav.navbar.bg-dark .dropdown-menu .dropdown-divider {
  border-color: var(--line-colour-dark);
}

nav.navbar.bg-dark .navbar-toggler {
  border-color: var(--line-colour-dark);
}

nav.navbar.bg-dark .navbar-toggler-icon {
  filter: invert(1);
}

/* --------------------------------------------------------- */
/* Tabs (Global) — styled to match the main navbar */

.nav-tabs {
  background-color: var(--bg-colour-dark);
  border-bottom: none;
  border-radius: var(--border-radius);
  gap: 0.25rem;
  padding: 0.25rem;
}

.nav-tabs .nav-item .nav-link {
  background-color: transparent;
  border: none;
  border-radius: calc(var(--border-radius) - 0.125rem);
  color: var(--text-colour-white);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.nav-tabs .nav-item .nav-link:hover {
  background-color: var(--bg-colour-dark-highlight);
  border-color: transparent;
  color: var(--brand-green);
}

.nav-tabs .nav-item .nav-link.active {
  background-color: var(--bg-colour-dark-highlight);
  border: none;
  color: var(--brand-green);
}

.nav-tabs .nav-item .nav-link .badge {
  background-color: var(--brand-green) !important;
  color: var(--brand-black);
}

/* --------------------------------------------------------- */
/* Breadcrumb — styled to match the main navbar */

nav[aria-label='breadcrumb'] {
  background-color: transparent;
  padding: 0.25rem 0;
}

nav[aria-label='breadcrumb'] .breadcrumb {
  align-items: center;
  background-color: transparent;
  margin-bottom: 0;
}

nav[aria-label='breadcrumb'] .breadcrumb-item a {
  color: var(--text-colour-light);
  text-decoration: none;
  transition: color 0.25s ease;
}

nav[aria-label='breadcrumb'] .breadcrumb-item a:hover {
  color: var(--brand-green);
}

nav[aria-label='breadcrumb'] .breadcrumb-item.active {
  color: var(--brand-white);
}

nav[aria-label='breadcrumb'] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-colour-light);
}

/* --------------------------------------------------------- */
/* Form labels */

.form-label {
  color: var(--text-colour-dark);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------- */
/* modal-footer */
.modal-footer {
  border-top: none;
  justify-content: center;
}

/* --------------------------------------------------------- */
/* heading overides for titles on pages */
.page-title {
  color: var(--brand-white);
  font: normal var(--font-weight-regular)
    clamp(1.188rem, 0.836rem + 1.76vw, 2.375rem) var(--font-family-base);
  letter-spacing: 0px;
  line-height: 1.1;
  text-wrap: pretty;
}