/* form colors */

:root {
  --lds-border-radius: 4px;
  --lds-label-color-inside: #807c7c;
  --lds-input-border-color: #000;
  --lds-secondary-text: #5b5956;
  --lds-label-color: #495057;
  --lds-input-text: #212529;
}

  :root .dark-mode {
    --lds-border-radius: 4px;
    --lds-label-color-inside: #bdbdbd;
    --lds-input-border-color: #bdbdbd;
    --lds-secondary-text: #c4cacf;
    --lds-label-color: #ffffff;
    --lds-input-text: #a2a5a8;
    --lds-invalid: #e68888;
  }

.dark-mode .content-wrapper {
  /* Darkened from #5d6064 (a mid-grey) to a true dark surface so accent colours can meet WCAG AA.
     A mid-grey surface cannot carry any saturated link colour at 4.5:1 without the link turning
     near-white. See docs/design-manual.md (Colour & contrast). */
  background-color: #343a40;
  color: #fff;
}

/* Content links. Bootstrap 4's default #007bff scores ~2.9:1 on the dark surface above and fails
   WCAG AA; #6ea8fe scores ~4.8:1. Scoped to the content area so the sidebar, navbar and anchors
   styled as buttons keep their own colours. See docs/design-manual.md. Modals too, since 2026-09-24: the
   modal surface is the same #343a40, and the wall screen's notification modal has no content-wrapper
   around it at all. */
.dark-mode .content-wrapper a:not(.btn):not(.nav-link):not(.brand-link),
.dark-mode .content-wrapper .btn-link,
.dark-mode .modal-content a:not(.btn),
.dark-mode .modal-content .btn-link {
  color: #6ea8fe;
}

.dark-mode .content-wrapper a:not(.btn):not(.nav-link):not(.brand-link):hover,
.dark-mode .content-wrapper .btn-link:hover,
.dark-mode .modal-content a:not(.btn):hover,
.dark-mode .modal-content .btn-link:hover {
  color: #9ec5fe;
}

/* The control sidebar - the panel behind the grid icon, top right. AdminLTE paints
   .control-sidebar-dark #343a40, which is exactly the content surface behind it, so an open panel
   had no edge at all and open was hard to tell from closed. One step lighter than the content
   surface, plus elevation-3 on the aside, is what separates them; the hairline keeps the edge
   readable where the (vertically cast) shadow falls off along the left. #3f474e is still a dark
   surface - white ~9.5 : 1, muted #adb5bd ~4.5 : 1 - so nothing softer than .text-muted belongs in
   here. See docs/design-manual.md (The surfaces we render on). */
.control-sidebar.control-sidebar-dark {
  background-color: #3f474e;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.cursor-pointer {
  cursor: pointer;
}


.form-control-invalid {
  border-color: var(--lds-invalid) !important;
  padding-right: calc(1.4285714286em + 1.125rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(.3571428572em + .28125rem) center !important;
  background-size: calc(.7142857143em + .5625rem) calc(.7142857143em + .5625rem) !important;
}

/* ****************** */
/*  Fix menu          */
/* ****************** */

/* Menu indent */

li.nav-item > ul > li.nav-item > a.nav-link {
  padding-left: 2.5rem;
}



/* Material design like input fields */
/* START input */
.form-outline {
  position: relative;
  width: 100%;
  margin-top: 24px;
  margin-bottom: 12px;
}

  .form-outline .form-control {
    min-height: auto;
    padding-top: .32rem;
    padding-bottom: .32rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border: 1px solid;
    border-color: var(--lds-input-border-color);
    border-radius: var(--lds-border-radius);
    background: rgba(0, 0, 0, 0);
    transition: all .2s linear;
    box-shadow: none;
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    appearance: none;
    color: var(--lds-input-text);
  }

    .form-outline .form-control ~ .form-label {
      position: absolute;
      top: 0;
      max-width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      left: .75rem;
      padding-top: .47rem;
      pointer-events: none;
      transform-origin: 0 0;
      transition: all .2s ease-out;
      color: var(--lds-label-color-inside);
      margin-bottom: 0;
    }


label {
  display: inline-block;
}

/* END input*/
/* START check boxes */

.form-outline .form-control ~ .form-notch {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  text-align: left;
  pointer-events: none;
}


.form-outline .form-control:focus ~ .form-label, .form-outline .form-control:valid ~ .form-label, .form-outline .form-control.active ~ .form-label {
  transform: translateY(-1.5rem) translateX(-0.5rem) scale(0.85);
  color: var(--lds-label-color);
}



x.form-control:focus ~ label {
  bottom: 61px;
  font-weight: 700;
  font-size: 0.85em;
  left: 3px;
}

x.form-control:valid ~ label {
  bottom: 61px;
  font-weight: 700;
  font-size: 0.85em;
  left: 3px;
}



.light-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus) {
  border-color: #c4c8cc;
}

.dark-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus) {
  border-color: #6c757d;
}



.form-check-group {
  padding-left: 2.5rem;
  display: block;
}

.form-check {
  display: block;
  min-height: 1.25rem;
  padding-left: 2rem;
  margin-bottom: .75rem;
  float: left;
  margin-left: -2rem;
}

.form-check-description {
  display: block;
  color: var(--lds-secondary-text);
  font-size: .75rem;
  margin-top: -.25rem;
}

.form-check-label {
  margin-bottom: .75rem;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--lds-border-radius);
  float: left;
  margin-left: -2rem;
}

/* END checkboxes */

/*Card*/
.light-mode .card .card-footer, .light-mode .card .card-header {
  background-color: rgb(0 0 0 / 15%);
}
.dark-mode .card .card-footer, .dark-mode .card .card-header {
  background-color: rgb(0 0 0 / 15%);
}
.dark-mode .card {
  background-color: #484f57;
  color: #fff;
}

/* The disk meter's track, on the host detail page. AdminLTE paints .dark-mode .progress #454d55,
   which is 1.04 : 1 against the card surface above - the track is invisible, so a disk at 1.3%
   reads as no bar at all rather than as a nearly empty one. The track carries meaning (it is the
   empty half of the gauge), so it owes 3 : 1 - and no fill can pay that by darkening: pure black
   is only 2.53 : 1 on this surface. Hence the hairline, which clears it at 3.08 : 1; the darker
   fill is what makes the shape read at a glance, and it lifts the green bar from 2.74 : 1 to
   4.14 : 1 against its own track. A border rather than an inset shadow, because an inset shadow
   is painted under the child and so would vanish along the filled part of the bar.
   See docs/design-manual.md (Colour & contrast). */
.dark-mode .progress {
  background-color: #2c3238;
  border: 1px solid rgba(255, 255, 255, .45);
}

/* Icons */

@keyframes pulse {
  from {
    opacity: 1;
    transform: scale3d(.8,.8,.8)
  }

  50% {
    transform: scale3d(1,1,1);
    opacity: 1
  }

  to {
    opacity: 1;
    transform: scale3d(.8,.8,.8)
  }
}

@keyframes tada {
  0% {
    transform: scale3d(1,1,1)
  }

  10%,5% {
    transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-5deg)
  }

  15%,25%,35%,45% {
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,5deg)
  }

  20%,30%,40% {
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-5deg)
  }

  50% {
    transform: scale3d(1,1,1)
  }
}

@keyframes rotate-360 {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  from {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.card-header svg {
  margin-right: 0.25rem;
}

.btn-icon svg {
  margin-top: -2px;
}
.icon-tada {
  transition: all .15s ease 0s;
  animation: tada 3s ease infinite;
  animation-fill-mode: both;
}
.icon-pulse {
  transition: all .15s ease 0s;
  animation: pulse 2s ease infinite;
  animation-fill-mode: both;
}
.icon-rotate {
  transition: all .15s ease 0s;
  animation: rotate-360 3s linear infinite;
  animation-fill-mode: both;
}

/* icons */
.icon-fw {
  width: 1.28571429em;
  text-align: center;
}


/* Blazor Error */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}


/* The wall screen's notification modal (Components/NotificationModal.razor). It is the house modal on the
   house surface; these only give its section headings and header priority their shape. The muted colour is
   AdminLTE's dark .text-muted, #adb5bd, ~5.5:1 on the modal's #343a40. */
.notification-modal-section {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #adb5bd;
  border-bottom: 1px solid #6c757d;
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

.notification-modal-priority {
  font-size: 1.6rem;
  line-height: 1.2;
  white-space: nowrap;
}

/*https://stackoverflow.com/questions/58967031/how-to-create-material-design-input-form-using-css-and-bootstrap*/
/*html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
*/


/* A description cell in a list table: one line, clipped with an ellipsis, with the full text on hover.
   A description is free text and a wide column would push the columns that answer questions off the
   screen; the cell is a preview, and the tooltip (and the detail page) is where the rest lives.
   The stacked layout below undoes this - a card has the width to spare and no columns to protect. */
/* The same text shown whole - on a detail page, where there is room for it. Keeps the author's line
   breaks without putting the text through a markup parser. */
.description-full {
  white-space: pre-line;
}

.table .description-cell {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Responsive tables — collapse to labeled cards on narrow screens.
   Put class="... table-stack" on a list table and data-label="Column"
   on every <td>. Below the md breakpoint each row becomes a card and
   each cell shows its label to the left of its value; desktop is left
   unchanged. Give the actions/buttons cell class="actions" (and no
   data-label) so it spans the card width. This is the house standard
   for list tables — see docs/design-manual.md (Responsive tables).
   ============================================================ */
@media (max-width: 767.98px) {
  .table-stack thead {
    display: none; /* headers move into each cell via data-label */
  }

  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }

  .table-stack tr {
    margin-bottom: .75rem;
    padding: .25rem .75rem;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: var(--lds-border-radius);
  }

  /* table-striped paints the tr/td backgrounds; give each card one flat
     surface instead so the label/value contrast stays readable. */
  .dark-mode .table-stack.table-striped tbody tr:nth-of-type(odd),
  .dark-mode .table-stack tr {
    background-color: #484f57; /* matches .dark-mode .card */
  }

  .light-mode .table-stack.table-striped tbody tr:nth-of-type(odd),
  .light-mode .table-stack tr {
    background-color: #fff;
  }

  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .2rem 0;
    border: none;
    text-align: right;
  }

  .table-stack td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-weight: 600;
    text-align: left;
    color: var(--lds-secondary-text);
  }

  /* A description is not clipped on a card: there are no neighbouring columns to protect, and the
     tooltip that carries the rest on desktop is not reachable by touch. */
  .table-stack td.description-cell {
    max-width: none;
    overflow: visible;
    white-space: normal;
    text-align: right;
  }

  /* Cells that carry no label: the actions cell and the empty-state row. */
  .table-stack td.actions {
    justify-content: flex-start;
    padding-top: .4rem;
  }

  .table-stack td.actions::before,
  .table-stack td[colspan]::before {
    content: none;
  }

  .table-stack td.actions .btn-group {
    width: 100%;
  }
}

/* The top bar on a phone (Layout/NavBar.razor). The right-hand list holds the tenant selector, and a
   flex item never shrinks below its content by default - so a selector sized for a desktop pushed every
   management page sideways on a phone (477 px wide at 390). min-width: 0 lets the list and the
   selector's item give way; the select then takes what is left and cuts a long name short. From sm up
   it keeps the width it always had. See "The top bar" in docs/design-manual.md. */
.navbar-nav-shrink,
.navbar-nav-shrink .tenant-selector {
  min-width: 0;
}

.tenant-selector select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 576px) {
  .tenant-selector select {
    min-width: 11rem;
  }
}