/*
 * VPRO account-console layout for the Keycloak 26 keycloak.v3 account theme.
 * Shared brand tokens, typography, buttons, and form controls live in common/css/base.css.
 */

/* Table of Contents
** 1. PAGE LAYOUT
** 2. PAGE HEADER
** 3. MAIN NAVIGATION
** 4. CONTENT ON THE 'PERSOONLIJKE INFORMATIE' PAGE
** 5. TABLE-LIKE ELEMENTS
** 6. FORM  
** 7. ACCOUNTBEVEILIGING page
*/


/* --- 1. PAGE LAYOUT --- */

#app {
  display: flex;
  min-height: 1px;
  height: auto;
}


/* the main box all functionality lives in */ 
.pf-v5-c-page {
  margin: 2rem auto; /* some space above an below to make it look box-y */
  background: var(--vpro-surface);
  min-height: 70vh;
  height: initial; /*overrides the default 100dvh */
  max-height: min-content;/*overrides the default 100% */
  width: 90vw;
  max-width:  var(--vpro-panel-width); 
  grid-template:  
    "header" max-content /* .pf-v5-c-masthead  */
    "nav"    auto /* .pf-v5-c-page__sidebar*/
    "main"   1fr / 1fr; /* .pf-v5-c-page__main */
}

.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-v5-c-page__sidebar,
.pf-v5-c-page__header,
.pf-v5-c-masthead {
  background: var(--vpro-surface);
  color: var(--vpro-text);
}



/* --- 2. PAGE HEADER --- */

/* 
  The masthead (.pf-v5-c-masthead) contains the logo, username + logout menu (aka Toolbar).
*/

.pf-v5-c-masthead {
  grid-template-columns: max-content minmax(0, 1fr); /* logo | logout menu */
  gap: .5rem;
  padding-inline: var(--vpro-panel-gutter-inline); /* space along edges of box */
  padding-block-start: var(--vpro-panel-gutter-block); /* space along edges of box */

  /* This toggle is the hamburger menu that originally was used to show/hide the navigation (.pf-v5-c-page__sidebar). We don't need, our menu is always visible. */
  .pf-v5-c-masthead__toggle { 
    display: none;
  }

  /* THis toolbar contains logoout menu and username and avatar */
  .pf-v5-c-toolbar {
    background: transparent; 
    padding-block: 0;

    .pf-v5-c-toolbar__item.pf-m-align-right {
      display: none;
    }
  }

  .pf-v5-c-masthead__content {
    min-height: 0;
  }

  .pf-v5-c-toolbar__content {
    max-width: 100%;
    /*overflow: hidden;*/
  }

  /* In the toolbar we have two buttons that topggle visibility by adding a hidden-class with React.
  These are the a) button with username + dropdown to logout and b) a kebab-style-svg + dropdown to logout */

  .pf-v5-c-toolbar__item.pf-m-hidden, .pf-v5-c-toolbar__item {

    &:has(.pf-v5-c-menu-toggle__text) { /* a) we always want tot show the name*/
      display: block !important;
      max-width: 100% !important;
    }
    
    &:has(.pf-v5-c-menu-toggle.pf-m-plain) { /* b) we always want to hide the kebab */
      display: none !important;
    }
  } 


  .pf-v5-c-menu-toggle.pf-m-plain {
    display: none !important; /* the original theme hides this button (also with !important), but we need it to be visible */
  }
}


/* The toolbar (.pf-v5-c-toolbar) contains the logout menu, username, and avatar.
The toolbar contains a kebab-button that is hidden by placing a .pf-m-hidden class on it with js when under a certain screen width.
The menu (wich only contains a button for 'uitloggen') is injected into the DOM using javascript.  */

.pf-v5-c-toolbar__content {
  margin-inline-start: auto; /* make sure the kebab menu is aligned to the right, even on small screens (fixes a bug present in the original theme) */
} 

/* The logout kebab / username needs a border to stand out more */
.pf-v5-c-toolbar__item:not(:empty) {
  border: solid 1px black;
  margin-inline-end: 0;
}

/* Hide the avatar, because it does totally nothing */
.pf-v5-c-toolbar__item:has(svg.pf-v5-c-avatar) {
  display: none;
}

/* Logout kebab menu */
.pf-v5-c-menu {
  .pf-v5-c-menu__list {
    padding-block: 0;
    border: solid 1px black;
  }

  .pf-v5-c-menu__item:hover {
    background-color: white; /* In the original theme it turned grey */
    text-decoration: underline;
  }
}

/* The button that contains the username and a triangle indicating the submenu (containing the logout option) */
.pf-v5-c-menu-toggle {
  color: var(--vpro-text);

  /* The color of the dots in the kebab-icon, and some alignment tweaks */
  &.pf-m-plain:not(.pf-m-text) {
    color: var(--vpro-text);
    padding-inline: 12px;

    .pf-v5-svg {
      vertical-align: -.25em;
    }
  }

  &:before, &:after { 
    border: none; /* The original constructed borders using these pseudo element, we don't want them */
  }  

  .pf-v5-c-menu-toggle__controls {
    padding-inline-start: .5rem;
  }

  .pf-v5-c-menu-toggle__toggle-icon {
    margin-inline-end: 0;
  }
}


/* --- 3. MAIN NAVIGATION --- */

/* 
  The sidebar (.pf-v5-c-page__sidebar) contains the main nav. we always want it horizontally above the main content.
  originally it hides itself behind a hamburger on mobile and is shown as a sidebar on desktop 
*/

.pf-v5-c-page__sidebar {
  transform: none;
  width: 100%;
  padding-inline: var(--vpro-panel-gutter-inline); /* space along edges of box */
  
  &.pf-m-collapsed {
    max-width: 100%;
    overflow: visible;
  }
}

/* This nav is a <nav> containing the <ul> for the main navigation */
.pf-v5-c-nav {
  margin-block-end: 32px; /* space below so the uitklapper has enough space */
  margin-inline-start: -.5rem; /* optically compensate padding inside first menu-item */
}

/* This list is the actual <ul> containing the navigation (the main, but also the nested one!) */
.pf-v5-c-nav__list {
    position: relative;
    display: flex; /* originally it was block, a piled stack of items */
    flex-flow: column wrap; /* on very small screens the items need to be stacked */
    align-items: flex-start;
    gap: .5rem;

    > * {
      flex: 0 1 auto;
    }

    @media screen and (width >= 600px) {
      flex-flow: row wrap; /* on bigger screens the items can be next to eachother, so they don't overlap the title of the page*/
    }


}


/* This item is a <li> inside the main <ul> of the navigation */
.pf-v5-c-nav__item {
  order: 1;

  &.pf-m-expandable {
    order: 3; /* The expandable item should be the last item in the container: so when stacked (on small screens) it won't overlap the later items */

    &::before, &:after {
      content: none; /* In the original code, a faux-border is created with thes pseudo-elements; we don't want that. */
    }
  }

  /* When the expandable is clicked, it becomes expanded */
  &.pf-m-expanded { 
    /* this is the button that has been clicked to expand it's subnav */
    > .pf-v5-c-nav__link {
      background-color: black; 
      color: white;
      text-decoration: none;
    }

    /* this is the subnav that becomes visible when the expandable is clicked */
    .pf-v5-c-nav__subnav {
      display: block;
      overflow: visible;
    }
  }


  /* This subnav is the section containing the <ul> containing the nested navigation */
  .pf-v5-c-nav__subnav {
    position: absolute;
    background: var(--vpro-surface);
    padding-inline-start: 0;

    .pf-v5-c-nav__link {
      white-space: nowrap;
    }

    /* The nested <ul> */
    .pf-v5-c-nav__list { 
      background: white;
      box-shadow: var(--pf-v5-global--BoxShadow--md);
      flex-flow: row nowrap; /* items should be next to eachother, so they don't overlap the title of the page */
    }
  }
}

/* The navigation link, the actual <a> tag, */
.pf-v5-c-nav__link {
    color: var(--vpro-text);
    font-family: var(--vpro-font-heading);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500; /* to keep the visual weight equal to the chevron */
    padding: 8px;
    cursor: pointer;

    &:before, &:after {
      content: none; /* In the original code, a faux-border is created with these pseudo-elements; we don't want that. */
    }

  .pf-m-current {
    text-decoration: underline;
    cursor: default !important;
  }
}

/* The hover state of the navigation links, also in complex nested state for the uitklapper */
.pf-v5-c-nav__link.pf-m-current:hover,
.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link.pf-m-hover,
.pf-v5-c-nav__link.pf-m-current:not(.pf-m-expanded),
.pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link  {
    background: transparent;  
    text-decoration: underline;
    color: black;
    text-underline-offset: 0.3em;
    background: transparent; /* when the subnav is expanded, the button gets a solid background, when not expanded we don't want that*/
  }



/* --- 4. CONTENT ON THE 'PERSOONLIJKE INFORMATIE' PAGE --- */

/* 
  In the original there is a column that contains the in-page navigation, but we hide that, so we don't need to reserve space for it in the grid.
*/
.pf-v5-l-grid__item.pf-m-12-col-on-sm.pf-m-8-col-on-md {
  grid-column-start: 1;
  grid-column-end: -1;
}

/* The main title of the page  */
.pf-v5-c-title.pf-m-2xl {
  margin-block-end: 12px;
  font-size: 28px;
  font-weight: 700;
}

.pf-v5-c-title.pf-m-xl {
  font-size: 22px;
  font-weight: 700;
}

/* The secondary title of the page (e.g. 'wachtwoord' on the 'accountbeveiliging > aanmelden' page */
.pf-v5-c-title.pf-m-md {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1; /* becasue the original css is stronger than what is defined in base.css, we need to override it here */
}


/* On the 'persoonlijke informatie' page, there are two sections (.pf-v5-c-page__main-section); The second one contains the form, and some other stuff we nee to address */

.pf-v5-c-page__main-section {
  padding-inline: var(--vpro-panel-gutter-inline); /* space along edges of box */
}
.pf-v5-c-page__main-section + .pf-v5-c-page__main-section{
  --pf-v5-global--spacer--lg: .5rem; /* inside this  .pf-v5-c-page__main-section there is a <section> that has an inline-style with this custom property set. */

  padding-block-start: 0; 

  /* hiding the 'algemeen' title (because we only have one section) */
  .pf-v5-c-title.pf-m-xl#algemeen {
    display: none;
  }

  /* On the 'persoonlijke informatie' page there is a kind of in-page subnavigation; that allows the user to jump to different 'sections' of the form;
      we only have one sections, so no need for this. */
  .pf-v5-c-page__main-section {
    &[class*="_sticky"] {
      display:none;
    }
  }
}

/* --- 5. TABLE-LIKE ELEMENTS --- */

/*
  The data-lists (.pf-v5-c-data-list) are table-like things that actually are <ul> where each <li> is a row 
*/

.pf-v5-c-data-list.pf-v5-c-data-list.pf-m-grid-md { /* Double to strongify */
  /* We want more modest spacing on the table-like elements  */
  --pf-v5-c-data-list__cell--PaddingTop:.5rem;
  --pf-v5-c-data-list__item-action--PaddingTop: .5rem;
  --pf-v5-c-data-list__item-action--PaddingBottom: .5rem;
  --pf-v5-c-data-list__item-row--PaddingRight: .5rem;
  --pf-v5-c-data-list__item-row--PaddingLeft: .5rem;
  --pf-v5-c-data-list__item-control--MarginRight: .5rem;
  
  --row-border: 1px solid black; /* the parent gets a top border; each row gets a bottom border */
  
  border-block-start: var(--row-border);

  /* The 'bijwerken' button onthe 'aanmelden' page needs to align left, even on small screens */
  .pf-v5-c-data-list__item-action {
    margin-inline-start: auto;
  }

  /* The collapsed content when expanded on the 'applicaties' page.
  Only when expanded, because on the 'Apparaat activiteit' this 'expandable-content' does NOT need the padding (but is visible without being inside .pf-m-expanded) */
  .pf-m-expanded .pf-v5-c-data-list__expandable-content {
    padding-inline-start: 2.5rem !important; /* Exact padding so it align nicely with the width of the cell containing the uitklapper-chevron*/
  }

  /* The 'rows' (.pf-v5-c-data-list__item) of the 'table' (.pf-v5-c-data-list) */
  .pf-v5-c-data-list__item {
    background-color: rgba(0, 0, 0, 0.03); /* Slightly darker instead of the default white */
    border-block-end: var(--row-border);

    /* I assumed the first row is the header-row, but on other pages there is no header-row */
    &#applications-list-header {
      background-color: rgba(0, 0, 0, 0.08);
    }

    /* This cell contains the word 'Wachtwoord' and it pushes the next cell into being too small, so the 'aangemaakt op [datum]', get pushed over two lines.
    We don't want that, so we use this arbitrary class to make the cell stop growing. 
    Possibly completely circumstantial, but this div takes way too much space */
    .pf-v5-c-data-list__cell.pf-v5-u-max-width {
        flex-grow: 0;
    }

    /* Created a space after 'Aaangemaakt op'. But the date after it allready contains a space before it. */
    strong.pf-v5-u-mr-md {
      margin-right: 0 !important; /* the original theme adds a margin-right to the <strong> tag, we don't want that */;
    }

  }
}

/* On the 'aanmelden' page there is a section where the user can opt-in to an Authenticator-app. Below, this button is styled a button on desktop; on mobile it's a kebab-menu (!) */

.pf-v5-l-split__item {
  .pf-v5-u-float-right {
    .pf-v5-c-button.pf-m-link  { /* the button to configure authenticator */
      margin-block-start: -.5rem;
      border: solid 1px black;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* This styles the secondary button in general, but here specifically intended for the 'Bijwerken' button on the 'aanmelden' page */
.pf-v5-c-button.pf-m-secondary {
    color: var(--button-secondary);
    background-color: var(--button-secondary-background);
    border: solid 1px;

    &:after {
      content: none; /* the original theme adds a faux-border using this pseudo-element, we don't want that */
    }

    &:hover {
      text-decoration: underline;
    }
}


/* --- 6. FORM --- */

.pf-v5-c-form__group {
  /* Hide the language selector because we only have one language (and keycloak a bug) */
  &:has([for="attributes.locale"]) {
    display: none !important;
  }
}

/* Make the labels go above the input */
.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group {
  display: flex;
  flex-flow: column nowrap;
}

/* Not to much space between buttons at bottom of the form and the form */
.pf-v5-c-form__group.pf-m-action {
  margin-top: 1rem;
}

.pf-v5-c-form-control.pf-m-disabled {
 pointer-events: none;

 input {
  background-color: var(--vpro-input-background-disabled);
  color: var(--vpro-input-text-color-disabled);
 }
}

/* Make the 'Opslaan' button huge and black, the 'annuleer' small. (originally they are content-fit buttons, a black one and a transparent one (without border) */
.pf-v5-c-form__actions {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: .5rem;
  margin-inline: 0;

  .pf-v5-c-button {
    flex: 1 1 auto;
    margin-inline: 0;

    &.pf-m-primary {
      flex-basis: var(--vpro-buttongroup-primary-button-width);
      order: 2;
    }

    &.pf-m-link {
      border: solid 1px black;
      flex-basis:  var(--vpro-buttongroup-secondary-button-width);
      order: 1;
    }
  }
}





/* --- 7. ACCOUNTBEVEILIGING page --- */


#basic-authentication-categ-title {
  /* This #basic-authentication-categ-title id is the title of the Wachwoord section, .pf-v5-c-data-list is the ul next to it */

  ~ .pf-v5-c-data-list {
    .pf-v5-c-data-list__item-row {
      padding-inline: 0;
    }
    .pf-v5-c-data-list__item-content {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: .5rem;

      .pf-v5-c-data-list__cell {
        flex: 1 1 auto;
        padding-block: 0;
      }

      .pf-v5-c-data-list__item-action {
        order: 3;
      }

    }
  }
}



#two-factor-categ-title {
  /* This #two-factor-categ-title is is the title of the 2FA section, .pf-v5-l-split is the div next to it */  
  
  + .pf-v5-l-split  {

    .pf-v5-c-title.pf-m-md.pf-v5-u-mb-md {
      display: none; /* the original theme adds a title here, we don't want that, it's the string with key 'otp-display-name' that's used in the button next to it too. */
    }

    /* On small screens React toggles visibility between a kebab-style button and a normal button. We don't want that, just show the button! */
    .pf-v5-c-menu-toggle  {
      display: none;

      + .pf-v5-u-display-none {
        display: block !important; /* the original theme hides this button (also with !important), but we need it to be visible */
      }
    }
  }
}