:root {
  --fs-400: .875rem;
  --fs-600: 1rem;
  --fs-700: 1.5rem;
  --fs-800: 1.875rem;
  --fs-900: 2.5rem;
  /* --body-max-width: 82rem; */
  --red: hsl(0, 100%, 37%);
  --light-red: hsl(0, 92%, 90%);
  --very-light-red: hsl(0, 100%, 98%);
  --opaque-red: hsl(0, 81%, 85%);


  --pad-rem-100: .1875rem;    --pad-em-100: .1875rem;
  --pad-rem-200: .3125rem;    --pad-em-200: .3125rem;
  --pad-rem-300: .4rem;       --pad-em-300: .4rem;
  --pad-rem-400: .5rem;       --pad-em-400: .5rem;
  --pad-rem-500: .6rem;       --pad-em-500: .6rem;
  --pad-rem-600: .875rem;     --pad-em-600: .875rem;
  --pad-rem-700: 1rem;        --pad-em-700: 1rem;
  --pad-rem-900: 1.25rem;     --pad-em-900: 1.25rem;

  --container-padding: var(--pad-rem-400);


  --color-primary-050: hsl(235, 10%, 98%);
  --color-primary-100: hsl(235, 24%, 96%);
  --color-primary-200: hsl(235, 24%, 86%);
  --color-primary-300: hsl(235, 24%, 66%);
  --color-primary-400: hsl(235, 24%, 56%);
  --color-primary-500: hsl(235, 24%, 46%);
  --color-primary-600: hsl(235, 24%, 36%);
  --color-primary-700: hsl(235, 24%, 26%);
  --color-primary-800: hsl(235, 24%, 16%);
  --color-primary-900: hsl(235, 24%, 6%);


  --color-complementary-050: hsl(18, 24%, 98%);
  --color-complementary-100: hsl(18, 24%, 96%);
  --color-complementary-200: hsl(18, 24%, 86%);
  --color-complementary-300: hsl(18, 24%, 66%);
  --color-complementary-400: hsl(18, 24%, 56%);
  --color-complementary-500: hsl(18, 24%, 46%);
  --color-complementary-600: hsl(18, 24%, 36%);
  --color-complementary-700: hsl(18, 24%, 26%);
  --color-complementary-800: hsl(18, 24%, 16%);
  --color-complementary-900: hsl(18, 24%, 6%);

  --color-accent-100: hsl(300, 24%, 94%);
  --color-accent-200: hsl(300, 24%, 84%);
  --color-accent-300: hsl(300, 24%, 64%);
  --color-accent-400: hsl(300, 24%, 64%);
  --color-accent-500: hsl(300, 24%, 54%);
  --color-accent-600: hsl(300, 24%, 44%);
  --color-accent-700: hsl(300, 24%, 34%);
  --color-accent-800: hsl(300, 24%, 24%);
  --color-accent-900: hsl(300, 24%, 4%);

  --shadow-color: var(--color-primary-300);



  --border-200: .0625rem;
  --border-400: .125rem;
  --border-800: .25rem;
  --border-radius: var(--pad-rem-100);
  --box-shadow: .4rem .4rem .9rem .06rem var(--shadow-color);
  --top-nav-bg: var(--color-primary-500);
  --top-nav-txt: var(--color-primary-100);
  /* --top-nav-txt: hsl(225, 67%, 96%); */
  --ham-menu-bg: var(--top-nav-txt);
  --ham-menu-fg: transparent;

  --border-subtle: var(--border-200) solid var(--color-primary-200);
  --border-interactive: var(--border-200) solid var(--color-primary-300);
  --border-string: var(--border-800) solid var(--color-primary-600);
  --color-inactive: var(--color-primary-500);
  --bg-color-inactive: var(--color-primary-100);
  /* --body-max-width: 90rem; */
  --body-max-width: 110rem;
  /* --body-max-width: 100%; */

}

::backdrop { background-color: var(--color-primary-400); opacity: 0.4; }

body {
  display: grid;
  grid-template-rows: auto 1fr;
  /* background-color: var(--color-primary-100); */
  background-color: var(--color-primary-050);
  gap: var(--container-padding);
}

a, a:visited { color: inherit; }


input {
  border: var(--border-interactive);
  border-radius: var(--border-radius);
  padding: var(--pad-rem-300);
}

input:user-invalid {
  border-color: var(--red);
  background-color: hsla(0, 100%, 67%, 0.1);
  color: hsl(0, 100%, 32%);
}


main {
  position: relative;
  margin-inline: auto;
  max-width: var(--body-max-width);
  width: 100%;
}


button {
  cursor: pointer;
  padding-inline: .6rem;
  border-radius: var(--border-radius);
  border: var(--border-interactive);
}

button.copy {
  img { width: 1rem; height: 1rem; }
  background-color: transparent;
  border: none;
  padding: 0;
  margin-left: 1ch;
  position: relative;
}

button.copy::before {
  position: absolute;
  top: 0; right: 0;
  content: 'copied';
  background-color: white;
  border: var(--border-subtle);
  box-shadow: var(--box-shadow);
  transition: all .1s ease-out;
  padding-inline: calc(var(--container-padding)/2);
  font-weight: initial;
  font-size: initial;
  opacity: 0;
  z-index: -10;
}


button.copy.copied::before {
  opacity: 1;
  z-index: 100;
}

/* more-info  */
.more-info {
  .btn-open {
    border: none;
    cursor: pointer;
    background-color: transparent;
    img { height: auto; }
  }
  dialog:open {
    font-weight: normal;
    font-size: 1rem;
    margin: auto;
    width: clamp(50vw, 80vw, 90vw);
    padding: var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: var(--container-padding);
    button.btn-close {
      margin-inline: auto;
      cursor: pointer;
      background-color: var(--color-primary-050);
      border-radius: var(--border-radius-lg);
      border: var(--border-subtle);
    }
  }
}
header#top-header {
  /* margin-inline: auto; */
  margin: 0 auto;
  max-width: var(--body-max-width);
  width: 100%;
  z-index: 100;
  background-color: var(--top-nav-bg);
  color: var(--top-nav-txt);
  position: sticky;
  top: 0;
  #main-menu-toggle-button { box-shadow: none; }
  #htmx-indicator {
    position: absolute;
    background-color: var(--color-accent-200);
    opacity: 0;
    .loading-dash { fill: var(--top-nav-bg); box-shadow: var(--box-shadow); opacity: 0; }
  }
  #htmx-indicator.htmx-indicator.htmx-request {
    opacity: 1;
    .loading-dash { opacity: 1; }
  }
  .top-header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-inline: 1.5rem;
    .site-logo { img { width: 4rem; height: 4rem; } }
    #user-info {
      font-size: var(--fs-400);
      justify-self: flex-end;
      display: flex;
      gap: var(--container-padding);
      > a {
        padding-inline: var(--pad-rem-100);
        align-self: center;
        img {
          height: 1.4rem;
          background-color: var(--color-accent-100);
          border-radius: var(--border-radius);
          padding: .3rem;
        }
      }
      margin-left: auto;
    }
  }
}

#overlay {
  display: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 89;
  background-color: var(--color-primary-400); opacity: 0.4;
  opacity: .4;
  cursor: pointer;
}

#overlay-search-and-edit {
  display: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 84;
  background-color: var(--color-primary-400); opacity: 0.4;
  opacity: .4;
  cursor: pointer;
}

body:has(section.popout-search-results):has(.hidden) {
  #overlay-search-and-edit { display: none; }
}

body:has(section.popout-search-results) {
  #overlay-search-and-edit { display: block; }
}


.error-list {
  background-color: transparent;
  display: flex;
  gap: .6rem;
  flex-direction: column;
  position: absolute;
  right: 0;
  width: min(40vw, 70ch);
  z-index: 101;
  .msg-error, .msg-info, .msg-warn, .msg-critical, .msg-debug, .msg-err, .msg-inf, .msg-wrn, .msg-dbg, .msg-crt, .msg {
    box-shadow: var(--box-shadow);
  }
}

.msg-error, .msg-info, .msg-warn, .msg-critical, .msg-debug, .msg-err, .msg-inf, .msg-wrn, .msg-dbg, .msg-crt, .msg {
  background-color: white;
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  border-left: var(--pad-rem-300) var(--color-accent-400) solid;
  padding: .6rem;
  padding-left: var(--pad-rem-300);
  display: flex;
  flex-direction: row;
  gap: var(--container-padding);
  /* position: relative; */
  color: var(--color-primary-800);
  transition: all 1s ease;
  button {
    padding: 0;
    cursor: pointer;
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    height: 1.7rem;
  }
}

.msg-critical, .msg-crt  {
  background-color: var(--red);
  color: var(--very-light-red);
  border-left-color: var(--red);
}

.msg-error, .msg-err  {
  background-color: var(--very-light-red);
  color: var(--red);
  border-left-color: var(--red);
}

.msg-warn, .msg-wrn {
  color: var(--red);
  background-color: var(--very-light-red);
  border-left-color: var(--light-red);
}

.msg-info, .msg-inf  {
  border-left-color: var(--color-primary-600);
}

.msg-debug, .msg-dbg  {
  border-left-color: var(--color-primary-800);
  color: var(--color-primary-700);
  background-color: var(--color-primary-100);
  font-family: 'Lucida Console', 'Courier New', Courier, monospace;
}

.msg-error::before, .msg-err::before, .msg-warn::before, .msg-wrn::before, .msg-info::before, .msg-inf::before, .msg-crt::before, .msg-dbg::before {
  height: 1.6rem;
  width: 1.6rem;
  background-size: 1.6rem;
  content: "";
  padding-right: 1.6rem;
}

.msg-critical::before, .msg-crt::before { background-image: url(/built-in/icons/msg-crt.svg); }
.msg-error::before, .msg-err::before { background-image: url(/built-in/icons/msg-err.svg); }
.msg-warn::before, .msg-wrn::before { background-image: url(/built-in/icons/msg-wrn.svg); }
.msg-info::before, .msg-inf::before { background-image: url(/built-in/icons/msg-inf.svg); }
.msg-debug::before, .msg-dbg::before { background-image: url(/built-in/icons/msg-dbg.svg); }

.menu-button {
  /* align-self: center; */
  /* margin: .3rem; */
  border: none;
  /* border: .01rem solid yellow; */
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  padding: 0;
  /* border: none; */
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--ham-menu-fg);
  cursor: pointer;
  .top, .mid, .bot {
    max-height: .35rem;
    width: 100%;
    background-color: var(--ham-menu-bg);
    border-radius: .35rem;
    transition: .2s ease;
  }
}

.menu-button.menu-opened {
  .mid {
    opacity: 0;
  }
  .top {
    width: 134%;
    transform-origin: top left;
    transform: rotate(45deg);
    translate: calc(.35rem/2) calc(-.35rem/4);
  }
  .bot {
    width: 134%;
    transform-origin: bottom left;
    transform: rotate(-45deg);
    translate: calc(.35rem/2) calc(.35rem/4);
  }
}


nav#top-main-menu[data-visible=true] {
  display: block;
}

nav#top-main-menu {
  z-index: 90;
  display: none;
  color: var(--top-nav-bg);
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  max-width: var(--body-max-width);
  width: 100%;
  ul {
    max-width: var(--body-max-width);
    width: 100%;
    list-style: none;
    gap: var(--pad-rem-700);
    padding: var(--pad-rem-700);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      width: fit-content;
      a {
        border: var(--border-200) solid var(--color-complementary-200);
        border-radius: var(--border-radius);
        display: block;
        padding: var(--pad-rem-500) var(--pad-rem-700);
        text-decoration: none;
        color: inherit;
        word-break: keep-all;
        /* transition: all .1s ease-in; */
        img {
          height: 2rem;
        }
      }
      a:hover {
        box-shadow: 0 0 var(--pad-rem-200) var(--pad-rem-100) var(--color-complementary-300);
      }
    }
  }
}

.nav-icon {
  height: 2rem;
}

.bg-white {
  background-color: white;
}

.reset-pass {
  display: flex;
  gap: 1rem;
}

.reset-pass:hover { box-shadow: 0 0 var(--pad-rem-200) var(--pad-rem-100) var(--color-complementary-300); }


.t-edit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--container-padding);
  .t-edit-west-pane {
    overflow: auto;
    width: auto;
  }
  .t-edit-east-pane {
    background-color: transparent;
  }
}

.live-search {
  padding-left: 3ch;
  background-color: white;
  background-image: url("icons/search.svg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 2.5ch;
  /* border: 1px solid gray; */
  width: 100%;
  /* background: transparent; */
  /* margin: .5rem 0; */
  /* position: relative; */
}

.live-search.htmx-request {
  background-image: url("icons/searching.svg");
  background-position: left center;
}

.htmx-request {
  background-image: url("icons/searching.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.5ch;
  opacity: .7;
  pointer-events: none;
  cursor: not-allowed;
}

form.htmx-request {
  background-position: top right;
}

form.htmx-request .form-controls {
  background-position: center right;
  background-image: url("icons/searching.svg");
  background-repeat: no-repeat;
  background-size: 2.5ch;
}

.pagination.htmx-request {
   /* opacity: .8; */
  .pagination-stats {
    background-image: url("icons/searching.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2.5ch;
    color: transparent;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--container-padding);
  background-color: transparent;
  button { background-color: var(--color-primary-200); }
}
.pagination:has(.pagination-empty)  { display: none; }
.pagination > * {
  border: var(--border-interactive);
  border-radius: var(--border-radius);
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
  padding: .2rem .3rem;
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
  display: flex;
  flex-direction: row;
}
.pagination button:disabled {
  background-color: var(--bg-color-inactive);
  color: var(--color-complementary-300);
  cursor: not-allowed;
}
.pagination button svg {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  height: 1.5rem;
}
.pagination button svg .btn {
  fill: var(--color-complementary-700);
}



.clickable {
  cursor: pointer;
}

.form-controls {
  display: flex;
  flex-wrap: wrap;
  padding: var(--container-padding);
  /* gap: var(--container-padding); */
  gap: .4rem;
  background-color: var(--color-primary-100);
  border-radius: var(--border-radius);
  border: var(--border-subtle);
}

.input-block {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  border: var(--border-200) solid var(--color-primary-200);
  border-left-width: var(--border-800);
  color: var(--color-primary-900);
  font-family: inherit;
  background-color: white;
}

.input-block:has(input:invalid) {
  border-color: var(--red);
  label {
    color: var(--red);
  }
}


.input-block:has(input[type=checkbox]) {
  flex-direction: row;
  gap: var(--container-padding);
  padding-right: var(--container-padding);
}

.input-block input, select, textarea {
  border: none;
  padding: var(--pad-rem-300);
}

.input-block label {
  font-weight: bold;
  font-size: .8em;
  color: var(--color-complementary-600);
  padding: var(--pad-rem-300);
  /* border-bottom: none; */
  /* padding-bottom: .3rem; */
}

select { background-color: white; option { background-color: white; } }

/* =============================================== */


.edit-form {
  /* background-color: var(--color-primary-200); */
  /* padding: var(--container-padding); */
  max-width: 60ch;
  border-radius: var(--border-radius);
  /* border: var(--border-subtle); */
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

dialog .edit-form {
  padding: var(--container-padding);
}

div#password-display {
  background-color: var(--color-complementary-600);
  color: var(--color-complementary-100);
  /* padding: var(--container-padding); */
  .password {
    width: 100%;
    color: var(--color-complementary-800);
    background-color: var(--color-complementary-100);
    border-style: solid;
    font-family: "Lucida Console", monospace;
    /* font-weight: bold; */
    letter-spacing: .02rem;
  }
}

div#password-display:has(> div:empty) {
  display: none;
}

div.user-acls {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  /* flex-flow: row wrap; */
  .user-roles {
    height: 100%;
  }
}

#app_user-edit-form form .form-controls {
  padding: 0;
  /* background-color: white; */
  border: none;
}


#app_user-edit-form > * {
  padding: var(--container-padding);
  /* border: var(--border-subtle); */
  background-color: var(--color-primary-100);
  border-radius: var(--border-radius);
}

tr.is-active-false td, tr.is-active-false th { background-color: var(--bg-color-inactive); color: var(--color-inactive); }


table.underline-tr {
  tr {
    td, th {
      border-bottom: var(--border-interactive);
    }
    td:has(button), th:has(button) {
      border: none;
    }
  }
}
.align-left { text-align: left; }

.flex-attributes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}

tr.is-deleted td {
  text-decoration: line-through;
  color: var(--red);
}

div.is-deleted, form.is-deleted {
  position: relative;
  /* padding: 20px; */
}

form.is-deleted::before, div.is-deleted::before,
form.is-deleted::after, div.is-deleted::after {
  content: "";
  position: absolute;
  opacity: .2;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

form.is-deleted::after, div.is-deleted::after {
  left: 0;
  background: linear-gradient(to bottom right, transparent 49%, var(--red) 49%, var(--red) 51%, transparent 51%);
}
form.is-deleted::before, div.is-deleted::before{
  right: 0;
  background: linear-gradient(to bottom left, transparent 49%, var(--red) 49%, var(--red) 51%, transparent 51%);
}

td, th {
  vertical-align: top;
}

button:disabled {
  cursor: not-allowed;
}
#app_roles-list {
  padding: 0;
  border: none;
  background-color: transparent;
  .app-role {
    justify-content: space-between;
    .buttons {
      display: flex;
      flex-direction: row;
      gap: var(--container-padding);
    }
  }
}


#app_route-users, #app-role-details {
  display: flex;
  gap: var(--container-padding);
  flex-direction: column;
  height: fit-content;
}

#app-role-details form {
  display: flex;
  gap: var(--container-padding);
  flex-direction: row;
  .live-search { width: 30ch; margin: 0; }
}

#app_users-by-role {
  table td { padding-block: var(--container-padding); border: none; border-bottom: var(--border-interactive); }
}


.role-header {
  background-color: white;
}

#users table { width: 100%; }
#app_users-list table tr td, #app_users-list table tr th, #route-access tr td, #route-access tr th, #app_routes-list table tr th, #app_routes-list table tr td, #app_route_roles-list table tr td, #app_route_roles-list table tr th, #users table td, #users table th {
  border: none;
  border-bottom: var(--border-interactive);
  padding-inline: var(--container-padding);
}

#app_routes-list table tr td:has(button) {
  border: none;
  padding: 0;
}

#app_user-details {
  border: none;
}
#app_user-details > * {
  border: none;
  padding: 0;
  /* background-color: transparent; */
}

#app_user-details > * > * {
  /* background-color: white; */
}

.user-summary div {
  font-weight: bold;

}

.user-summary div:empty { display: none; }

.hide-if-empty:empty { display: none; }

.page-button {
  width: 32px;
  height: 32px;
}

button:enabled:hover, button:enabled:active {
  box-shadow: .2rem .2rem .45rem .06rem var(--shadow-color);
}

.smooth.htmx-swapping {
  opacity: 0;
  transition: all 1s ease-in;
}

.search-and-edit {
  position: relative;
  .search-and-edit-input {
    .search-input {
      z-index: 85;
      position: relative;
      .live-search {
        width: 30ch;
      }
      #search-info {
        background-color: white;
        border: var(--border-subtle);
        border-radius: var(--border-radius);
        padding-inline: var(--container-padding);
        align-content: center;
      }
    }
  }
  .search-results-popout.hidden {
    display: none;
  }
  .search-results-popout {
    background-color: transparent;
    position: absolute;
    top: 5ch;
    z-index: 85;
    .pagination { background-color: transparent; }
    button { max-width: fit-content; }
    section {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      flex-wrap: wrap;
      button {
        display: flex;
        flex-direction: column;
        text-align: left;
        border: var(--border-subtle);
        background-color: white;
        box-shadow: var(--box-shadow);
      }
      button:hover {
        box-shadow: 0 0 var(--pad-rem-200) var(--pad-rem-100) var(--color-complementary-300);
      }
    }
  }
}

.search-and-edit {
  .search-results-popout:has(.no-data-found) {
    display: none;
    padding: 0;
    box-shadow: none;
    border: none;
  }
}

.hidden {
  display: none;
}

.auth-login-providers {
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  li {
    background-color: white;
    border: var(--border-subtle);
    border-radius: var(--border-radius);
    width: 45ch;
    form {
      padding: var(--container-padding);
    }
    a.auth-login-url {
      color: var(--color-primary-500);
      text-decoration: none;
      display: inline-block;
      width: 100%;
      span {
        padding: var(--container-padding);
        display: inline-block;
        display: flex;
        align-items: center;
        gap: 1rem;
      }
      img { width: 4rem; height: 4rem; }
    }
    a.auth-login-url:hover { box-shadow: var(--box-shadow); }
  }
}


#token-display:empty { display: none; }

span.auth-provider {
  font-weight: 100;
  color: var(--color-accent-600);
}

.user-profile-wrapper {
  margin: 0 auto;
  flex-wrap: wrap;
  width: fit-content;
}

.user-profile-attributes, .user-roles {
  th { text-align: left; }
  td { border-bottom: var(--border-200) var(--color-accent-300) solid; vertical-align: middle; padding-inline: .8rem; }
  caption {
    /* font-weight: bold; */
    border: var(--border-subtle);
    border-radius: var(--border-radius);
  }
}

.user-roles tr.unassigned td {
  background-color: hsla(0, 100%, 70%, 0.116);
}

.user-roles tr.assigned td {
  background-color: hsla(133, 100%, 70%, 0.116);
}

.center {
  width: fit-content;
  margin-inline: auto;
}

label[for=password] {
  display: flex;
  justify-content: space-between;
}

.smaller-font {
  font-weight: normal;
  font-size: .8em;
  display: inline-block;
}

img.medium {
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  margin-inline: auto;
}

td:has(img.medium) {
  vertical-align: middle;
}

.user-admin-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 45ch;
  margin: 0 auto;
  .input-block {
    display: flex;
    flex-direction: column;
    gap: unset;
  }
}

#messages:empty { display: none; }

button.danger {
  background-color: var(--red);
  color: white;
  border: var(--border-subtle);
  border-radius: var(--border-radius);
}

button.danger:disabled {
  background-color: var(--opaque-red);
}


dialog {
  margin: 0 auto;
  border: var(--border-subtle);
  /* position: relative; */
  top: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  max-width: 30rem;
}


dialog.confirm {
  div {
    background-color: white;
    padding: var(--container-padding); margin: 0;
    padding-top: 2.3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    button.cancel {
      padding: 0;
      position: absolute;
      top: .3rem;
      right: .3rem;
    }
    .buttons { padding: 0; display: flex; gap: var(--container-padding); flex-direction: row; }
  }
}

.flex-col { display: flex; gap: var(--container-padding); flex-direction: column; }
.flex-row { display: flex; gap: var(--container-padding); flex-direction: row; }

.ch60 { max-width: 60ch; }

table.collapse { border-collapse: collapse; }
table.separate { border-collapse: separate; }

div:has(.no-data-found) { display: none; }


.tab-inline-edit {
  .search-top-pane { .live-search { width: 50%; } }
  .tab-inline-results { input, textarea, select { width: 100%; } }
}

table th { background-color: var(--color-primary-600); color: var(--color-complementary-100); }

.td-buttons { display: flex; flex-direction: column; flex-wrap: nowrap; gap: .2rem; img { width: 1.2rem; }}

dialog {
  #response-errors {
    width: 100%;
    position: relative;
    padding: var(--container-padding);
  }
}


#global-modal-errors .errors {
  padding: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
}

.routes-table { width: 100%; }
.routes-table th.POST     { background-color: #49cc90; }
.routes-table th.GET      { background-color: #61affe; }
.routes-table th.PUT      { background-color: #fca130; }
.routes-table th.DELETE   { background-color: #f93e3e; }
.routes-table th.HEAD     { background-color: #9012fe; }
.routes-table th.PATCH    { background-color: #50e3c2; }
.routes-table th.DISABLED { background-color: #ebebeb; }
.routes-table th.OPTIONS  { background-color: #0d5aa7; }


.card-with-border {
  background-color: white;
  border: var(--border-subtle);
  border-radius: var(--border-radius);
  padding: var(--container-padding);
}

.card-no-border {
  background-color: var(--color-primary-050);
  /* border: var(--border-subtle); */
  border-radius: var(--border-radius);
  padding: var(--container-padding);
}

.small-print {
  font-size: .8rem;
}

.flex-col, .flex-row { display: flex; gap: var(--container-padding); }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.pop-up-info {
  position: relative;
  margin-inline: var(--container-padding);
  .info {
    position: absolute; width: 0; height: 0; overflow: hidden; padding: 0; margin: 0;
    ul {
      list-style: initial;
      list-style-position: initial;
      padding-left: 1rem;
      li {
        padding: var(--container-padding);
      }
    }
  }
}

.pop-up-info::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-size: 1rem;
  background-color: var(--color-complementary-100);
  background-image: url(/built-in/icons/info.svg);
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 50%;
  outline: var(--border-subtle);
  display: inline-block;
  outline-color: var(--color-complementary-100);
}

/* .pop-up-info, */ .pop-up-info:hover, .pop-up-info:active, .pop-up-info:focus {
  .info {
    width: max-content;
    height: auto;
    left: .4rem;
    top: .4rem;
    font-size: initial;
    font-weight: initial;
    color: var(--color-primary-700);
    background-color: var(--color-primary-050);
    padding: var(--container-padding);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: var(--border-subtle);
    z-index: 10;
    transition: all .1s;
  }
}

/* ------------------------------ */

@media (max-width: 50em) {
  header#top-header {
    font-size: var(--fs-400);
    .top-header {
      .title { font-size: var(--fs-400); }
      .site-logo { img { width: 2rem; } }
      #user-info { .user-name { width: 5ch; text-overflow: ellipsis; overflow: hidden; } }
    }
  }
  #main-menu-toggle-button { width: 1rem; height: 1rem; }
  .menu-button .top, .menu-button .mid, .menu-button .bot { max-height: .25rem; }
  nav#top-main-menu {
    min-width: 100%;
    ul {
      flex-direction: column;
      display: grid;
      grid-template-columns:  repeat(3, 1fr);
      grid-auto-rows: min-content;
      li {
        width: fit-content;
        overflow: hidden;
        word-wrap: break-word;
      }
    }
  }

  .auth-login-providers { li { width: 100%; } }

  .t-edit {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: auto 1fr;
  }

  div.user-acls { flex-direction: column; }
  .flex-attributes { flex-direction: column; gap: .2rem; }
}

.master-admin-warning {
  position: relative;
  font-weight: bold;
}

.msg-wrn:has(.master-admin-warning)::before {
  /* content: ''; */
  /* width: 1rem; */
  /* display: inline-block; */
  background-image: url(/built-in/icons/crown.svg);
}

.text-wrap {
  /* text-wrap: ; */
}



.app-params-dashboard {
  display: grid;
  grid-template-columns: 70ch auto;
  gap: var(--container-padding);
  .t-edit-west-pane {
    #app_params-list {
      max-height: calc(100dvh - 126px);
      overflow: auto;

    }
  }
}

textarea[name="comments"] { height: 10ch; }

.app_param-item {
  border-radius: var(--border-radius);
  border: var(--border-subtle);
  background-color: var(--color-primary-050);
  padding: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--container-padding));
  .app-param-details {
    font-size: small;
    border-left: .4rem solid var(--color-primary-150);
    padding: var(--container-padding);
    /* border-radius: var(--border-radius);
    border: var(--border-subtle); border-left: none; border-right: none; border-bottom: none; */
  }
  .app-param-header {
    display: flex;
    flex-direction: row;
    gap: calc(2*var(--container-padding));
    font-weight: 800;
    /* font-size: medium; */
    font-family: "Lucida Console", monospace;
    .app-param-value {
      font-family: "Lucida Console", monospace;
    }
    .controlls {
      /* margin-left: auto; */
      align-self: flex-start;
      gap: var(--container-padding);
    }
    button {
      width: min-content;
      border: none;
      cursor: pointer;
      background-color: transparent;
      padding: 0;
      img {
        /* padding-inline: var(--container-padding); */
        padding: 0;
        width: 1.4rem;
        background-color: transparent;
      }
    }
  }
}

.app-param-history-table {
  max-height: calc(100dvh - 401px);
  overflow: auto;
}

input[type=date] {
  width: auto;
}

tr.rank0    td.badge  { background-color: hsla(140, 80%, 30%, .8); color: hsl(0, 0%, 100%);}
tr.rank1    td.badge  { background-color: hsla(140, 75%, 35%, .8); color: hsl(0, 0%, 100%);}
tr.rank2    td.badge  { background-color: hsla(140, 70%, 40%, .8); color: hsl(0, 0%, 100%);}
tr.rank3    td.badge  { background-color: hsla(140, 60%, 50%, .8); color: hsl(0, 0%, 0%);}
tr.rank4    td.badge  { background-color: hsla(140, 40%, 70%, .8); color: hsl(0, 0%, 0%);}
tr.rank5    td.badge  { background-color: hsla(0, 0%, 100%, .8);   color: hsl(0, 0%, 0%);}
tr.rank6    td.badge  { background-color: hsla(0, 30%, 90%, .8);   color: hsl(0, 0%, 0%);}
tr.rank7    td.badge  { background-color: hsla(0, 45%, 75%, .8);   color: hsl(0, 0%, 0%);}
tr.rank8    td.badge  { background-color: hsla(0, 60%, 60%, .8);   color: hsl(0, 0%, 0%);}
tr.rank9    td.badge  { background-color: hsla(0, 75%, 45%, .8);   color: hsl(0, 0%, 100%);}
tr.rank10   td.badge  { background-color: hsla(0, 85%, 35%, .8);   color: hsl(0, 0%, 100%);}



.progress {
  position: relative;
}

.progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: .3rem;
  border-radius: var(--border-radius);
  border-top: .3rem solid var(--color-complementary-600);
  width: calc(var(--ratio, 100) * 100%);
}

.w100 {
  width: 100%;
}

progress.rtl {
  direction: rtl;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress {
  accent-color: var(--color-complementary-700);
  width: 100%;
  background-color: transparent;
  border-radius: var(--border-radius);
  height: 1rem;
  border: var(--border-subtle);
}