/*
 * The application's own markup, dressed in the template's clothes.
 *
 * The admin, staff and portal screens were written against a small vocabulary
 * of their own — .card, .list, .field, .pill, .row.two and a dozen more — and
 * there are a hundred and seventy-nine files of it. Rewriting all of that into
 * Bootstrap's class names would be a very large diff across every screen in
 * the product, and every line of it a chance to break a form that works.
 *
 * So the vocabulary stays and this file re-implements it on top of the
 * template instead. Nothing in app/views or app/pages changed.
 *
 * Two rules make that safe:
 *
 *   1. Every selector here is scoped under .gms, the wrapper the layout puts
 *      around the page content. Three of the app's class names — .row, .card
 *      and .btn — are also Bootstrap's, and they mean different things in the
 *      two systems (.row is a CSS grid here and a flex row there). The extra
 *      class wins the specificity contest, so inside the content area the
 *      app's meaning applies and outside it the template's does.
 *
 *   2. Every colour, radius and shadow is a --bs-* custom property rather than
 *      a literal. That is what makes the content follow the template: change
 *      its primary colour, or switch it to data-bs-theme="dark", and these
 *      screens move with it instead of staying behind on their old palette.
 */

/* ------------------------------------------------------ inherited tokens */

/*
 * The four custom properties the views name directly.
 *
 * Most of the old stylesheet's vocabulary was class names, which the rest of
 * this file re-implements. These four are different: they appear inside
 * `style="..."` attributes in the views themselves — a border on the mail
 * viewer's iframe, a divider above a message body, the colour of a hint. There
 * are thirty-two of them, and without a definition every one silently falls
 * back to nothing, which for a border means no border at all.
 *
 * Defined on :root rather than .gms so they reach markup the layout composes
 * outside the content wrapper too, and pointed at the template's equivalents
 * so they follow the theme like everything else here.
 */
:root {
  --line: var(--bs-border-color);
  --muted: var(--bs-secondary-color);
  --warn: var(--bs-warning-text-emphasis);
  --primary: var(--bs-primary);
}

/* ------------------------------------------------------------- typography */

.gms h1 {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.gms h2 {
  font-size: 18px;
}

/* The sentence under a heading that says what the screen is for. */
.gms .sub {
  color: var(--bs-secondary-color);
  margin: 0 0 22px;
}

/*
 * Reference numbers — CL-00004, TKT-00003, a SHA-256 — sit next to prose
 * constantly here, and read as noise unless they are set apart.
 */
.gms .ref {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  color: var(--bs-secondary-color);
}

.gms .secret {
  font-family: var(--bs-font-monospace);
  letter-spacing: .04em;
}

/* A label's "required" marker. */
.gms .req {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bs-warning-text-emphasis);
  margin-left: 6px;
}

/* A row of links that should sit apart rather than run together. */
.gms .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Visible to a screen reader, not on screen. */
.gms .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ cards */

/*
 * The app's .card carries its own padding; the template's does not, because
 * the template always puts a .card-body inside it. Since the views have no
 * .card-body, the padding moves onto the card itself.
 */
.gms .card {
  background-color: var(--bs-card-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(15, 34, 58, .06);
}

@media (min-width: 720px) {
  .gms .card {
    padding: 24px;
  }
}

/* ---------------------------------------------------------------- layout */

/*
 * A one-column grid that becomes two on a wide screen. Deliberately not
 * Bootstrap's .row, which is a negative-margin flex container and would need
 * .col-* children the views do not have.
 */
.gms .row {
  display: grid;
  gap: 14px;
  margin: 0;
}

.gms .row.two {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .gms .row.two {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------------- forms */

.gms label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--bs-emphasis-color);
}

.gms .field {
  margin-bottom: 16px;
}

.gms input[type=text],
.gms input[type=email],
.gms input[type=password],
.gms input[type=tel],
.gms input[type=date],
.gms input[type=search],
.gms input[type=number],
.gms input[type=url],
.gms textarea,
.gms select {
  width: 100%;
  /* 16px exactly: iOS Safari zooms the page when a focused field is any
     smaller, and the zoom does not come back on blur. */
  font-size: 16px;
  padding: 10px 14px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  appearance: none;
}

.gms select {
  /* Bootstrap's own chevron, so a select reads as one next to a text field. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 12px;
  padding-right: 36px;
}

[data-bs-theme=dark] .gms select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.gms input:focus,
.gms textarea:focus,
.gms select:focus {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .25);
}

.gms input[type=checkbox],
.gms input[type=radio] {
  width: auto;
  accent-color: var(--bs-primary);
}

/* ---------------------------------------------------------------- buttons */

.gms button,
.gms .btn {
  background-color: var(--bs-primary);
  color: #fff;
  border: 1px solid var(--bs-primary);
  border-radius: var(--bs-border-radius);
  padding: 10px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  /* Comfortably past the 44px minimum touch target: staff use these standing
     in a merchant's shop with a phone in one hand. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.gms button:hover,
.gms .btn:hover {
  background-color: transparent;
  color: var(--bs-primary);
}

.gms button:focus-visible,
.gms .btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3);
}

.gms .btn.ghost {
  background-color: transparent;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.gms .btn.ghost:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.gms .btn.danger,
.gms button.danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}

.gms .btn.danger:hover,
.gms button.danger:hover {
  background-color: transparent;
  color: var(--bs-danger);
}

.gms button[disabled],
.gms .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.gms .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 720px) {
  .gms button,
  .gms .btn {
    width: auto;
  }

  .gms .actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/*
 * Filter bar. A select and a button rather than a row of status chips: seven
 * statuses as chips wrap into three lines on a phone and push the list itself
 * below the fold, which is the one thing the page exists to show.
 */
.gms .filterbar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.gms .filterbar .field {
  flex: 1;
  margin: 0;
}

.gms .filterbar button,
.gms .filterbar .btn {
  width: auto;
  flex-shrink: 0;
}

/* ----------------------------------------------------- pills and messages */

.gms .flash {
  padding: 12px 14px;
  border-radius: var(--bs-border-radius);
  margin-bottom: 18px;
  font-size: 15px;
}

.gms .flash.success {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.gms .flash.error {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

.gms .pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.gms .pill.active,
.gms .pill.accepted,
.gms .pill.resolved,
.gms .pill.deployed {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.gms .pill.pending,
.gms .pill.prospect,
.gms .pill.new,
.gms .pill.requested {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.gms .pill.closed,
.gms .pill.suspended {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* ------------------------------------------------------------ list rows */

/*
 * Compact list rows, used by every index screen.
 *
 * A row shows what identifies the record and nothing else; the rest is on the
 * page it opens. min-width:0 on the growing cell is what actually stops the
 * overflow — a flex item defaults to min-width:auto and refuses to shrink
 * below its content, which is why long values push the row off the screen.
 */
.gms .list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gms .list li {
  border-bottom: 1px solid var(--bs-border-color);
}

.gms .list li:last-child {
  border-bottom: 0;
}

.gms .list .row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  min-height: 56px;
  text-decoration: none;
  color: inherit;
}

.gms .list .row-link:hover {
  background-color: rgba(var(--bs-primary-rgb), .05);
}

.gms .list .grow {
  flex: 1;
  min-width: 0;
}

.gms .list .title {
  display: block;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gms .list .meta {
  display: block;
  color: var(--bs-secondary-color);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gms .list .right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gms .list .chev {
  color: var(--bs-secondary-color);
  font-size: 20px;
  line-height: 1;
}

/* A family heading inside a list, so a long brand reads in sections. */
.gms .list li.group-head {
  padding: 16px 0 6px;
  border-bottom: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bs-secondary-color);
  font-weight: 600;
}

/* ----------------------------------------------------------------- tables */

.gms table {
  width: 100%;
  border-collapse: collapse;
  color: var(--bs-body-color);
}

.gms th,
.gms td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--bs-border-color);
}

.gms th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.gms .empty {
  color: var(--bs-secondary-color);
  padding: 20px 0;
}

/*
 * On a phone a wide table either overflows the viewport or squeezes every
 * column to unreadable. Below 720px each row becomes its own block and each
 * cell prints its column name from data-label, so one markup serves both
 * without a second template to keep in step.
 */
@media (max-width: 719px) {
  .gms table.stack thead {
    display: none;
  }

  .gms table.stack tr {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 6px 12px;
    margin-bottom: 12px;
  }

  .gms table.stack td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bs-border-color);
    text-align: right;
  }

  .gms table.stack tr td:last-child {
    border-bottom: 0;
  }

  .gms table.stack td::before {
    content: attr(data-label);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    font-weight: 600;
    flex-shrink: 0;
    text-align: left;
  }

  /* Key/value tables on detail screens keep their two columns; they are
     already narrow enough to read. */
  .gms table.kv th {
    width: 42%;
    font-size: 12px;
  }
}

/* ------------------------------------------------------------ disclosures */

/*
 * A form that is only sometimes wanted — adding a client, adding equipment —
 * behind a summary that reads as a button. <details> rather than script: the
 * policy forbids inline handlers, and the browser already knows how to open
 * and close a disclosure.
 */
.gms .disclosure {
  background-color: var(--bs-card-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  margin-bottom: 18px;
  box-shadow: 0 2px 4px rgba(15, 34, 58, .06);
}

.gms .disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--bs-border-radius-lg);
}

.gms .disclosure > summary::-webkit-details-marker {
  display: none;
}

.gms .disclosure > summary::before {
  content: "+";
  font-size: 19px;
  line-height: 1;
  color: var(--bs-primary);
  font-weight: 700;
  width: 16px;
  text-align: center;
}

.gms .disclosure[open] > summary::before {
  content: "\2013";
}

.gms .disclosure[open] > summary {
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}

.gms .disclosure > summary:hover {
  color: var(--bs-primary);
}

.gms .disclosure > *:not(summary) {
  padding-left: 18px;
  padding-right: 18px;
}

.gms .disclosure > form {
  padding-bottom: 18px;
}

.gms .disclosure > .sub {
  padding-top: 14px;
  margin-bottom: 10px;
}

/* ----------------------------------------------------------- suggestions */

/* The field is the positioning context, so the list hangs off the input
   rather than off the page. */
.gms .field {
  position: relative;
}

.gms .suggestions {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 12px 28px rgba(15, 34, 58, .14);
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
  /* The filter bar makes its fields narrow; the suggestions still need room
     for a model name and its description on one line each. */
  min-width: 280px;
}

.gms .suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  text-align: left;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0;
  padding: 11px 14px;
  cursor: pointer;
  color: var(--bs-body-color);
  font-weight: 400;
}

.gms .suggestion:last-child {
  border-bottom: 0;
}

.gms .suggestion:hover,
.gms .suggestion.is-active {
  background-color: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-body-color);
}

.gms .suggestion-name {
  font-weight: 600;
  font-size: 15px;
}

.gms .suggestion-meta {
  font-size: 12.5px;
  color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------- file viewers */

.gms .file-view {
  display: block;
  width: 100%;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
}

.gms iframe.file-view {
  height: 70vh;
  min-height: 380px;
}

.gms .file-view.img {
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

/* ------------------------------------------------------------- agreements */

/*
 * The agreement body is rendered as preformatted text with the signing boxes
 * substituted in place of their markers, so what the signer fills in sits
 * exactly where the clause puts it rather than in a separate form.
 */
.gms .contract {
  white-space: pre-wrap;
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.gms .sign-box {
  font-family: inherit;
  font-size: 13px;
  padding: 2px 8px;
  border: 0;
  border-bottom: 2px solid var(--bs-primary);
  border-radius: 0;
  background-color: rgba(var(--bs-primary-rgb), .06);
  width: auto;
  display: inline-block;
  vertical-align: baseline;
}

.gms .sign-box.initials {
  width: 90px;
  text-transform: uppercase;
}

.gms .sign-box.date {
  width: 165px;
}

.gms .sign-box.signature {
  width: 280px;
  max-width: 100%;
  font-style: italic;
}

.gms .sign-check {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.gms .filled-field {
  display: inline-block;
  padding: 1px 8px;
  border-bottom: 2px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
  font-style: italic;
}

/* The insert toolbar writes markers into the textarea at the cursor. */
.gms .token-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.gms .token-bar button {
  width: auto;
  min-height: 0;
  padding: 6px 12px;
  font-size: 12px;
  background-color: transparent;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.gms .token-bar button:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.gms textarea.contract-edit {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  line-height: 1.6;
  min-height: 420px;
}

/* ---------------------------------------------------------------- sign in */

/* A rule with a word in it, between the password form and the link form. */
.gms .auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--bs-secondary-color);
  font-size: 13px;
}

.gms .auth-or::before,
.gms .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--bs-border-color);
}

/*
 * The sign-in screen has no sidebar to lose, so its card carries the whole
 * page. The template's auth pages centre a single narrow column; these do the
 * same rather than stretching the form across a wide monitor.
 */
.auth-page .gms {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.auth-page .gms .card {
  margin-bottom: 12px;
}

/*
 * The heading, the sentence under it and the note about sign-ins being
 * recorded sit outside the card, directly on the template's cover artwork —
 * which is dark. The body colour is nearly black and vanishes there, so the
 * text on that backdrop is set light instead. Anything inside the card keeps
 * the ordinary colours, because the card is white.
 */
.auth-page .gms > h1,
.auth-page .gms > h2,
.auth-page .gms > .sub,
.auth-page .gms > .ref,
.auth-page .gms > p {
  color: #fff;
}

.auth-page .gms > .sub,
.auth-page .gms > .ref {
  color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------- template glue */

/*
 * The sidebar entry for the screen being looked at. The template marks the
 * active item with .mm-active, which metisMenu owns and applies on click;
 * these pages are server-rendered, so the layout sets it directly and this
 * makes it look the same as a clicked one.
 */
.vertical-menu #side-menu li a.active {
  color: var(--bs-sidebar-menu-item-active-color);
}

.vertical-menu #side-menu li a.active i {
  color: var(--bs-sidebar-menu-item-active-color);
}

/*
 * The mail screen.
 *
 * The template's message row reserves the first 110px for a selection
 * checkbox and a star, then positions the sender after them. Neither has a
 * backend here — nothing in this application acts on a selection, and IMAP's
 * \Flagged is not something these screens set — so they are not rendered, and
 * the sender reclaims the gap they left behind.
 */
.message-list .list .col-mail-1 .title {
  left: 16px;
  right: 12px;
}

/*
 * A row is a link to the message, so the whole of it should look like one.
 * The template only tints on hover in its "active" state.
 */
.message-list:hover .list .subject {
  text-decoration: underline;
}

/*
 * The date column. The template pads it 80px from the left of its 170px box,
 * which leaves under a hundred pixels — enough for the "5:01 AM" its demo
 * data uses, and not enough for a real one, which then wraps and falls out of
 * the fifty-pixel row. The padding goes, and the date is kept on one line.
 */
.message-list .list .col-mail-2 .date {
  padding-left: 0;
  width: 110px;
  text-align: right;
  white-space: nowrap;
}

.message-list .list .col-mail-2 .subject {
  right: 120px;
}

/* Below this the template narrows the sender column; the subject needs to
   give up its own room to match, or the two overlap. */
@media (max-width: 575.98px) {
  .message-list .list .col-mail-2 {
    left: 200px;
  }

  .message-list .list .col-mail-2 .date {
    width: 62px;
  }

  .message-list .list .col-mail-2 .subject {
    right: 70px;
  }
}

/*
 * Bootstrap ships no min-width utility, and without one a flex child refuses
 * to shrink below its content — which is what puts a long subject line or a
 * long filename through the side of its row.
 */
.min-width-0 {
  min-width: 0;
}

/* ---------------------------------------------------------------- chat */

/*
 * The template gives the conversation a fixed height and then relies on a
 * simplebar wrapper for the scrolling. It is not wrapped here, because
 * assets/js/chat.js scrolls to the newest message itself and simplebar moves
 * the scroll onto an element of its own making that harder, not easier — so
 * the element does its own scrolling instead. Without this the conversation
 * simply overflows and the last message sits behind the box you type in.
 */
.chat-conversation {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 320px;
}

/*
 * The template hangs each message's timestamp below its bubble on an absolute
 * position, and reserves 45px under every one for it. The time is inside the
 * bubble here, so that reservation is a gap between every pair of messages in
 * a conversation.
 */
.chat-conversation .conversation-list {
  margin-bottom: 4px;
}

/* Sent messages are on a solid primary fill, so their timestamp is already
   white-on-green. Received ones are on a pale tint, where the same rule leaves
   the time invisible. */
.chat-conversation .conversation-list .chat-time {
  color: var(--bs-secondary-color);
}

.chat-conversation .right .conversation-list .chat-time {
  color: rgba(255, 255, 255, .7);
}

/*
 * Who on the team answered, above their reply in a merchant's thread. Only the
 * portal shows it: staff already know which colleague they are talking to, but
 * a merchant writing to "GMS Merchant" would otherwise read three people as
 * one voice changing its mind.
 */
.chat-conversation .chat-author {
  color: var(--bs-primary);
  font-size: 12px;
  font-weight: 600;
}

/* A long message from someone should wrap, not widen the column. */
.chat-conversation .conversation-list .ctext-wrap-content {
  overflow-wrap: anywhere;
}

/* The colleague list: the template styles its rows through .chat-list, but
   the unread and active states are ours to say. */
.chat-list li a {
  border-radius: var(--bs-border-radius);
  display: block;
  padding: 12px;
}

.chat-list li.active a {
  background-color: rgba(var(--bs-primary-rgb), .1);
}

.chat-list li.unread a h5 {
  font-weight: 600;
}

.chat-list li.unread a p {
  color: var(--bs-emphasis-color) !important;
  font-weight: 500;
}

/* The user's initials in the topbar, in place of the template's stock
   avatar photograph. */
.header-profile-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(var(--bs-primary-rgb), .18);
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}