/* /Components/Layout/CustomerLayout.razor.rz.scp.css */
.page[b-sszzex60k8] {
  position: relative;
  display: flex;
  flex-direction: column;
}

main[b-sszzex60k8] {
  flex: 1;
}

.sidebar[b-sszzex60k8] {
  /*background-color: #f0f0f0;*/
}

.top-row[b-sszzex60k8] {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d6d5d5;
  justify-content: flex-end;
  height: 3.5rem;
  display: flex;
  align-items: center;
}

  .top-row[b-sszzex60k8]  a, .top-row[b-sszzex60k8]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
  }

    .top-row[b-sszzex60k8]  a:hover, .top-row[b-sszzex60k8]  .btn-link:hover {
      text-decoration: underline;
    }

    .top-row[b-sszzex60k8]  a:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
  .top-row[b-sszzex60k8] {
    justify-content: space-between;
  }

    .top-row[b-sszzex60k8]  a, .top-row[b-sszzex60k8]  .btn-link {
      margin-left: 0;
    }
}

@media (min-width: 641px) {
  .page[b-sszzex60k8] {
    flex-direction: row;
  }

  .sidebar[b-sszzex60k8] {
    width: 250px;
    min-height: 100vh;
    position: sticky;
    top: 0;
  }

  .top-row[b-sszzex60k8] {
    position: sticky;
    top: 0;
    z-index: 1;
  }

    .top-row.auth[b-sszzex60k8]  a:first-child {
      flex: 1;
      text-align: right;
      width: 0;
    }

  .top-row[b-sszzex60k8], article[b-sszzex60k8] {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }
}

#blazor-error-ui[b-sszzex60k8] {
  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[b-sszzex60k8] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }
/* /Components/Layout/CustomerNestedLayout.razor.rz.scp.css */
.nested-customer-layout[b-lax4vpejl3] {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
    /* .internal-body (the parent) is display:block, so flex:1 above has no effect on
       this element's own height. Same fix as .internal-layout in
       InternalUserLayout.razor.css — see that comment for why this is needed to keep
       the collapsed submenu's icons from being clipped on thin-content pages. */
    height: 100%;
}

/* The inspected customer's submenu sits to the right of the internal user's menu. */
.nested-customer-menu[b-lax4vpejl3] {
  background-color: var(--app-rail);
  flex: 0 0 220px;
  transition: flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; /* Contain the absolute positioned compact menu */
  z-index: 5; /* Lower stacking context than main menu */
}

.nested-customer-menu.menu-compact[b-lax4vpejl3] {
    flex: 0 0 70px;
}

.nested-customer-body[b-lax4vpejl3] {
  flex: 1;
  min-width: 0;
  /* Padding lives in app.css "PAGE GUTTER" (--content-gutter) - see InternalUserLayout.razor.css
     for why the internal shell's gutter lands here rather than on .internal-body. */
}

@media (max-width: 640.98px) {
    .nested-customer-layout[b-lax4vpejl3] {
        flex-direction: column;
    }

    .nested-customer-menu[b-lax4vpejl3] {
        flex-basis: auto;
    }
}
/* /Components/Layout/InternalUserLayout.razor.rz.scp.css */
.internal-layout[b-ywbhwa7gc0] {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    /* .app-body (the parent) is display:block, so flex:1 above has no effect on this
       element's own height — it sizes to content instead. The collapsed side menu
       positions itself at height:calc(100% - 24px) of .internal-menu, which stretches
       to match this element via flex align-items:stretch; without an explicit height
       here, a page with little content collapses this row (and the menu with it),
       clipping the collapsed menu's icons. */
    height: 100%;
}

.internal-menu[b-ywbhwa7gc0] {
  background-color: var(--app-rail);
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* separate stacked menu cards so each shows its rounded corners */
  transition: flex-basis 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; /* Contain the absolute positioned compact menu */
  z-index: 10; /* Stack above the nested customer menu when expanding */
}

.internal-menu.menu-compact[b-ywbhwa7gc0] {
    flex: 0 0 60px;
}

.internal-body[b-ywbhwa7gc0] {
  flex: 1;
  min-width: 0;
  /* Padding lives in app.css "PAGE GUTTER" (--content-gutter). It is applied there rather
     than here because it must NOT apply when this section holds the inspected-customer
     submenu column instead of a page - that submenu has to stay flush with the main rail,
     so the gutter moves inward to .nested-customer-body. Expressing that needs :has(), and
     a scoped rule cannot see a child rendered by another component. */
}

@media (max-width: 640.98px) {
    .internal-layout[b-ywbhwa7gc0] {
        flex-direction: column;
    }

    .internal-menu[b-ywbhwa7gc0] {
        flex-basis: auto;
    }

  .internal-body[b-ywbhwa7gc0] {
    /* Stacked: the rail is above the content, not beside it, so the gutter is the page's
       own margin on all four sides. Same value as the desktop one. */
    padding: var(--content-gutter);
  }
}
/* /Components/Layout/MainCustomerLayout.razor.rz.scp.css */
.customer-layout[b-bqp22cusyr] {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}

.customer-menu[b-bqp22cusyr] {
    flex: 0 0 250px;
}

.customer-body[b-bqp22cusyr] {
    flex: 1;
    min-width: 0;
    /* Padding lives in app.css "PAGE GUTTER" (--content-gutter), together with the internal
       shell's, so the customer portal and the staff screens cannot drift apart again. */
}

@media (max-width: 640.98px) {
    .customer-layout[b-bqp22cusyr] {
        flex-direction: column;
    }

    .customer-menu[b-bqp22cusyr] {
        flex-basis: auto;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Application shell: two columns (MainContent + RightDetails). See COMPONENTS.md "MAIN LAYOUT". */
.app-shell[b-8kgnq3oddx] {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.main-content[b-8kgnq3oddx] {
    display: flex;
    flex-direction: column;
    flex: 1 1 75%; /* 3/4 by default */
    min-width: 0;
}

/* RightDetails (1/4, resizable, hidden by default) — enabled when the panel is added. */
.right-details[b-8kgnq3oddx] {
    flex: 0 0 25%;
    border-left: 1px solid var(--app-rule);
}

.app-header[b-8kgnq3oddx] {
    background-color: var(--app-header);
    border-bottom: 1px solid var(--app-rule);
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;   /* keep the title, user, and actions from touching */
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    /* Above the side menus (the .internal-menu nav is z-index 10; the compact RadzenNavMenu2 is
       100/120) so the header's own overlays — the Quick Search results dialog and the user/language
       dropdowns, which live inside this header's stacking context — render on top of the menus.
       Kept below page-level Radzen dialogs (~1001) so those still cover the header. */
    z-index: 500;
}

.app-header__title[b-8kgnq3oddx] {
    font-weight: 600;
    margin-right: auto;   /* push the CurrentUser + actions group to the right */
}

/* The actions group had no rule of its own, so it was a plain block whose
   inline-block children aligned on the TEXT BASELINE. With three different
   control heights (28px theme, 31px debug, 35px language/user) that scattered
   them a few pixels either side of centre - the debug pill sat low, the
   dropdowns high. Flex with align-items:center lines them up on their boxes
   instead of on their text.

   The explicit gap replaces the inter-element whitespace that inline-block was
   providing; flex collapses that, so without it they would jam together. */
.app-header__actions[b-8kgnq3oddx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.app-body[b-8kgnq3oddx] {
    flex: 1;
    /* make menus more compact, bring them closer to the edge */
    /*padding: 1rem 1rem; */
}

.app-footer[b-8kgnq3oddx] {
    border-top: 1px solid var(--app-rule);
}

#blazor-error-ui[b-8kgnq3oddx] {
    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[b-8kgnq3oddx] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/OneLayout.razor.rz.scp.css */
/* Mockup debug borders for OneLayout sections.
   Scoped to OneLayout.razor via Blazor CSS isolation. */
.border-blue[b-z99g6ps7vx]   { border: 1px solid blue; }
.border-cyan[b-z99g6ps7vx]   { border: 1px solid cyan; }
.border-yellow[b-z99g6ps7vx] { border: 1px solid yellow; }
.border-navy[b-z99g6ps7vx]   { border: 3px solid navy; }
.border-red[b-z99g6ps7vx]    { border: 3px solid red; }
.border-orange[b-z99g6ps7vx] { border: 1px solid orange; }
.border-green[b-z99g6ps7vx]  { border: 1px solid green; }
.border-lemon[b-z99g6ps7vx]  { border: 1px solid lemonchiffon; } /* was 'lemon' inline — not a valid CSS color */
.border-tomato[b-z99g6ps7vx] { border: 1px solid tomato; }
.border-purple[b-z99g6ps7vx] { border: 1px solid purple; }
.border-lime[b-z99g6ps7vx]   { border: 1px solid lime; }

/* Sticky-footer pattern needs min-height: 0 to allow flex shrinking past content height. */
.min-h-0[b-z99g6ps7vx] { min-height: 0; }

/* The hamburger toggle (checkbox + label) is hidden on desktop; the menu content
   shows unconditionally. The mobile media query below reverses this. */
.kkmenu-toggle-input[b-z99g6ps7vx],
.kkmenu-toggle-label[b-z99g6ps7vx] {
  display: none;
}

/* Cell-friendly (mobile) layout: collapse the two horizontal sections into a single
   vertical column below Bootstrap's md breakpoint (768px). !important is required to
   beat Bootstrap's .flex-row !important — specificity alone is not enough. */
@media (max-width: 767.98px) {
  /* main container (sidebar menu + content area) stacks vertically */
  .border-yellow[b-z99g6ps7vx] {
    flex-direction: column !important;
  }

  /* sub-main container (submenu + body) stacks vertically */
  .border-green[b-z99g6ps7vx] {
    flex-direction: column !important;
  }

  /* sidebars span the full row width when stacked instead of their natural width */
  .kksidebar[b-z99g6ps7vx],
  .border-lemon[b-z99g6ps7vx] {
    width: 100%;
  }

  /* show the hamburger label and use the checkbox state to toggle the menu body */
  .kkmenu-toggle-label[b-z99g6ps7vx] {
    display: block;
    cursor: pointer;
    padding: 0.5rem 1rem;
    background: #f0f0f0;
    border-bottom: 1px solid #ccc;
    user-select: none;
    font-weight: 600;
  }

  .kkmenu-toggle-input:not(:checked) ~ .kkmenu-content[b-z99g6ps7vx] {
    display: none;
  }
}
/* /Components/Layout/SettingsLayout.razor.rz.scp.css */
/*
  /settings does not nest inside MainLayout, so it re-hosts the chrome MainLayout owns. The markup
  was carried over in Phase 1 but not this rule, and scoped CSS is scoped: MainLayout.razor.css
  emits "#blazor-error-ui" with MainLayout's own scope attribute, which never matches the copy of
  the div rendered here. Without it the error banner has no "display: none" and sits permanently at
  the bottom of every settings page announcing an error that did not happen.

  Kept identical to MainLayout.razor.css and CustomerLayout.razor.css, which each carry their own
  copy for the same reason.
*/

#blazor-error-ui[b-j5119bqosb] {
    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[b-j5119bqosb] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/AgentExternal/AgentClientOrLead/DebtorProfile.razor.rz.scp.css */
/* Profile hub: one card per destination. */

.profile-hub[b-6xrvxh3ib6] {
  display: grid;
  /* auto-fill with a length min track: one card per row on a phone, several on a desktop, with no
     breakpoint to keep in step with the shell. */
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
}

.profile-hub-card h6[b-6xrvxh3ib6] {
  margin-bottom: 0.35rem;
}

/* The description is a single short line; without this the paragraph's default bottom margin
   pushes the link away from the text it belongs to. */
.profile-hub-card p[b-6xrvxh3ib6] {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
/* /Components/Pages/AgentExternal/AgentClientOrLead/Messages.razor.rz.scp.css */
/* Unread marker on a conversation row. A dot rather than a bold-only treatment because the
   subject is already bold when unread, and colour alone would not read for everyone. */
.msg-dot[b-tjwfrb3foy] {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bs-primary, #0d6efd);
  flex-shrink: 0;
}

/* text-truncate only collapses inside a flex child that is allowed to shrink below its content */
.min-w-0[b-tjwfrb3foy] {
  min-width: 0;
}
/* /Components/Pages/AgentExternal/AgentClientOrLead/MessageThread.razor.rz.scp.css */
/* Chat-style conversation. Deliberately the same visual family as Components/Shared/Chat/ChatRoom
   so a customer who has used live chat recognises the thread immediately. */

.msg-thread[b-pvzbx3bd9g] {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fdfdfd;
  padding: 0.75rem;
  max-height: 60vh;
  overflow-y: auto;
}

.msg-datesep[b-pvzbx3bd9g] {
  text-align: center;
  margin: 0.75rem 0 0.5rem;
  color: #6c757d;
  font-size: 0.75rem;
}

.msg-datesep span[b-pvzbx3bd9g] {
  background: #f1f3f5;
  border-radius: 1rem;
  padding: 0.1rem 0.75rem;
}

.msg-row[b-pvzbx3bd9g] {
  display: flex;
  margin: 0.25rem 0;
}

.msg-row.mine[b-pvzbx3bd9g] {
  justify-content: flex-end;
}

.msg-row.theirs[b-pvzbx3bd9g] {
  justify-content: flex-start;
}

.msg-bubble[b-pvzbx3bd9g] {
  max-width: 75%;
  padding: 0.4rem 0.75rem;
  border-radius: 1rem;
  background: #e9ecef;
}

.msg-row.mine .msg-bubble[b-pvzbx3bd9g] {
  background: #cfe2ff;
  border-bottom-right-radius: 0.25rem;
}

.msg-row.theirs .msg-bubble[b-pvzbx3bd9g] {
  border-bottom-left-radius: 0.25rem;
}

.msg-caption[b-pvzbx3bd9g] {
  font-size: 0.68rem;
  color: #6c757d;
  margin-bottom: 0.1rem;
}

/* Bodies are sanitized HTML from the staff rich editor, or escaped plain text from the customer.
   break-word stops a pasted URL widening the bubble past its max-width. */
.msg-text[b-pvzbx3bd9g] {
  word-break: break-word;
  font-size: 0.9rem;
}

.msg-text :last-child[b-pvzbx3bd9g] {
  margin-bottom: 0;
}

.msg-file[b-pvzbx3bd9g] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #495057;
  cursor: pointer;
  text-decoration: underline;
}

.msg-file:hover[b-pvzbx3bd9g] {
  color: #0d6efd;
}

/* The picked-but-not-yet-sent file, shown above the reply box so it is obvious something will be
   attached and can be removed before sending. */
.msg-pending[b-pvzbx3bd9g] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  background: #f8f9fa;
}

/* A <label> wrapping a hidden InputFile, so it needs the button's own box sizing to line up with
   the textarea and the Send button on the same row. */
.msg-attach-btn[b-pvzbx3bd9g] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  cursor: pointer;
  border: 1px solid #dee2e6;
}

.msg-attach-btn.disabled[b-pvzbx3bd9g] {
  pointer-events: none;
  opacity: 0.65;
}

.min-w-0[b-pvzbx3bd9g] {
  min-width: 0;
}
/* /Components/Pages/AgentExternal/AgentClientOrLead/NewMessage.razor.rz.scp.css */
/* The AI suggestion card. Same amber family as the chat drafts (ChatRoom's chatroom-draft /
   chatroom-handoff) so "automated, not a person" reads consistently across the app. */
.ai-answer[b-gg05jboas1] {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.ai-answer-title[b-gg05jboas1] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: #664d03;
  margin-bottom: 0.4rem;
}

.ai-answer-text[b-gg05jboas1] {
  font-size: 0.9rem;
  word-break: break-word;
}

.ai-answer-actions[b-gg05jboas1] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
/* /Components/Pages/AgentExternal/SignatureProfile.razor.rz.scp.css */
/* The white backgrounds here are CSS-only "paper" for display: the canvas BITMAP stays
   transparent (load-bearing for the server-side ink validators), and the stored PNGs are
   transparent too. */

.sigprofile-img[b-2p0lm24sn1] {
  display: block;
  width: 100%;
  max-width: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

.sigprofile-img-initials[b-2p0lm24sn1] {
  max-width: 150px;
}

.sigprofile-canvas[b-2p0lm24sn1] {
  display: block;
  width: 100%;
  max-width: 600px;
  border: 1px dashed #999;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 0.25rem;
}

.sigprofile-canvas-initials[b-2p0lm24sn1] {
  max-width: 300px;
}

.sigprofile-style img[b-2p0lm24sn1] {
  display: block;
  height: 60px;
  width: auto;
  background: #fff;
}
/* /Components/Pages/AgentExternal/SignDocument.razor.rz.scp.css */
/* The page divs, canvases and region overlays are created by iccosign-viewer.js, so everything
   below needs ::deep to escape the scoped-CSS attribute. */

.iccosign-viewer[b-ak7qwgux0u] {
  max-width: 900px;
  /* the small-screen initial scale renders pages wider than the viewport on purpose */
  overflow-x: auto;
}

.iccosign-toolbar[b-ak7qwgux0u] {
  background: var(--bs-body-bg, #fff);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.iccosign-toolbar-bottom[b-ak7qwgux0u] {
  background: var(--bs-body-bg, #fff);
  padding: 0.4rem 0;
  margin-top: 0.5rem;
}

/* Pin the toolbars only where there is vertical room to spare. A phone-sized viewport keeps them
   in the flow (they would eat the page the signer is trying to read), which is the behaviour this
   screen shipped with. The bottom bar asks for more height than the top one because it is the
   second band of chrome to come out of the document's budget. */
@media (min-width: 768px) and (min-height: 600px) {
  .iccosign-toolbar[b-ak7qwgux0u] {
    position: sticky;
    /* clears the shell's own sticky header (MainLayout.razor.css .app-header, height 3.5rem);
       top: 0 parked it UNDERNEATH that header, where it was invisible */
    top: 3.5rem;
    z-index: 10;
  }
}

@media (min-width: 992px) and (min-height: 700px) {
  .iccosign-toolbar-bottom[b-ak7qwgux0u] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-page {
  margin: 0 auto 1rem auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background: #fff;
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region {
  border: 2px dashed #b8860b;
  background: rgba(255, 213, 79, 0.25);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region:hover {
  background: rgba(255, 213, 79, 0.45);
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-optional {
  border-style: dotted;
  background: rgba(255, 213, 79, 0.12);
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-signed {
  border: 2px solid #2e7d32;
  background: rgba(76, 175, 80, 0.15);
}

/* required + signed = final; make it read as inert */
.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-locked {
  cursor: default;
  background: transparent;
  border-color: rgba(46, 125, 50, 0.5);
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-busy {
  cursor: progress;
  opacity: 0.7;
}

/* The stamped signature/initials image — same PNG the engine merges into the PDF at Finish.
   Scaled to fit and centered, like the legacy canvas StampRegion. */
.iccosign-viewer[b-ak7qwgux0u]  .iccosign-stamp {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-signed .iccosign-stamp {
  display: block;
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-label {
  position: absolute;
  top: -1.2rem;
  left: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b8860b;
  white-space: nowrap;
}

.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-signed .iccosign-region-label {
  display: none;
}

/* guided-navigation attention pulse */
.iccosign-viewer[b-ak7qwgux0u]  .iccosign-region-pulse {
  animation: iccosign-pulse-b-ak7qwgux0u 1.2s ease-out 2;
}

@keyframes iccosign-pulse-b-ak7qwgux0u {
  0% { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.7); }
  70% { box-shadow: 0 0 0 14px rgba(184, 134, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0); }
}

/* modal-style processing overlay while Finish/Reject runs (legacy "Please wait" modal) */
.iccosign-processing[b-ak7qwgux0u] {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
/* /Components/Pages/AgentInternal/ChatCenter.razor.rz.scp.css */
.dock-workspace[b-5mf6e909i4] {
  position: sticky;
  top: 1rem;
}

.dock-tabs[b-5mf6e909i4] {
  gap: 0.25rem;
  margin-bottom: -1px; /* active tab merges with the room border below */
}

.dock-tab[b-5mf6e909i4] {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem 0.375rem 0 0;
  background: #f1f3f5;
}

.dock-tab.active[b-5mf6e909i4] {
  background: #fff;
  border-bottom-color: #fff;
  font-weight: 600;
}

.dock-tab-label[b-5mf6e909i4] {
  border: none;
  background: transparent;
  padding: 0.35rem 0.25rem 0.35rem 0.75rem;
  font-size: 0.85rem;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock-tab-close[b-5mf6e909i4] {
  border: none;
  background: transparent;
  padding: 0.35rem 0.5rem;
  color: #6c757d;
  font-size: 0.75rem;
}

.dock-tab-close:hover[b-5mf6e909i4] {
  color: #dc3545;
}
/* /Components/Pages/AgentInternal/Settings/Banking/BankAccounts.razor.rz.scp.css */
/*
  System Setup > Banking > Bank Accounts. Two columns, mirroring the Windows screen: the list of
  accounts on the left, the selected account's tabs on the right. Collapses to one column when the
  pane is narrow - the /settings screen pane is the narrowest of its three.
*/

.ba-page[b-orai6qxl60] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.ba-head[b-orai6qxl60] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.ba-actions[b-orai6qxl60] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/* The list keeps a fixed share until there is no room for two columns at all. */
.ba-cols[b-orai6qxl60] {
  display: grid;
  grid-template-columns: minmax(340px, 4fr) minmax(420px, 6fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .ba-cols[b-orai6qxl60] {
    grid-template-columns: 1fr;
  }
}

.ba-list[b-orai6qxl60],
.ba-detail[b-orai6qxl60] {
  min-width: 0;
}

/*
  The sum of the column widths. Without it the fixed-width type columns win and the two name
  columns are handed what is left - 14px each in the 400px /settings screen pane. With it the table
  keeps its natural width and Radzen's own scroller (.rz-data-grid-data, overflow-x: auto) scrolls.
*/
.ba-grid[b-orai6qxl60]  .rz-grid-table {
  min-width: 710px;
}

.ba-grid[b-orai6qxl60]  .rz-datatable-data td {
  cursor: pointer;
}

/* The tick standing in for the Windows grid's checkbox columns. */
.ba-yes[b-orai6qxl60] {
  color: var(--rz-success, #17803d);
  font-weight: 700;
}

.ba-detailhdr[b-orai6qxl60] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  min-height: 1.5rem;
}

/* Two field columns where the pane is wide enough, one where it is not. */
.ba-grid2[b-orai6qxl60] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 1rem;
  align-items: start;
}

.ba-group[b-orai6qxl60] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  padding: .5rem .75rem .75rem;
  margin: .75rem 0 0;
  min-width: 0;
}

.ba-group > legend[b-orai6qxl60] {
  float: none;
  width: auto;
  padding: 0 .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.ba-field[b-orai6qxl60] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  min-width: 0;
}

.ba-field > label[b-orai6qxl60] {
  flex: 0 0 11rem;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.ba-input[b-orai6qxl60] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

/* File paths are UNC and long; they get the whole row rather than a capped width. */
.ba-wide[b-orai6qxl60] {
  max-width: 100%;
}

.ba-input[b-orai6qxl60]  .rz-textbox,
.ba-input[b-orai6qxl60]  .rz-dropdown,
.ba-input[b-orai6qxl60]  .rz-spinner,
.ba-input[b-orai6qxl60]  .rz-password {
  width: 100%;
}

.ba-checks[b-orai6qxl60] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 1rem;
}

.ba-check[b-orai6qxl60] {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}

.ba-check > label[b-orai6qxl60] {
  font-size: .8125rem;
  line-height: 1.35;
}

.ba-note[b-orai6qxl60] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  padding: .375rem 0;
}
/* /Components/Pages/AgentInternal/Settings/Banking/Rpps.razor.rz.scp.css */
/*
  System Setup > Banking > RPPS. Two columns, mirroring the Windows screen: identity and files on
  the left, the option checkboxes on the right. Collapses to one column when the pane is narrow -
  the /settings screen pane is the narrowest of its three.
*/

.rp-page[b-codzncpn8g] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.rp-head[b-codzncpn8g] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.rp-actions[b-codzncpn8g] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/*
  Two columns, stated explicitly rather than with auto-fit. auto-fit derives the track count from the
  available width, so at 1326px it lays out THREE 431px tracks and the full-width section below fills
  the third - which shrinks the two panels instead of widening anything. Two named tracks keep the
  panels at their own width and give .rp-span something definite to span.
*/
.rp-cols[b-codzncpn8g] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Below two 420px panels plus the gap there is no room for a second column. */
@media (max-width: 980px) {
  .rp-cols[b-codzncpn8g] {
    grid-template-columns: 1fr;
  }
}

.rp-panel[b-codzncpn8g] {
  min-width: 0;
}

/*
  Spans every column, so the proposal allowance formula gets the full page width instead of half.
  1 / -1 rather than a count, because the column count is dynamic (auto-fit) - at one column this
  is simply a no-op, which is what the narrow /settings pane wants.
*/
.rp-span[b-codzncpn8g] {
  grid-column: 1 / -1;
}

.rp-group[b-codzncpn8g] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  padding: .5rem .75rem .75rem;
  margin: 0 0 .75rem;
  min-width: 0;
}

.rp-group > legend[b-codzncpn8g] {
  float: none;
  width: auto;
  padding: 0 .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.rp-field[b-codzncpn8g] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  min-width: 0;
}

.rp-field > label[b-codzncpn8g] {
  flex: 0 0 13rem;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.rp-input[b-codzncpn8g] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

/* File paths are UNC and long; they get the whole row rather than a capped width. */
.rp-wide[b-codzncpn8g] {
  max-width: 100%;
}

.rp-input[b-codzncpn8g]  .rz-textbox,
.rp-input[b-codzncpn8g]  .rz-dropdown,
.rp-input[b-codzncpn8g]  .rz-spinner {
  width: 100%;
}

/* A label above its control, for the formula box that needs the full width to be readable. */
.rp-stack[b-codzncpn8g] {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .375rem;
}

.rp-stack > label[b-codzncpn8g] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.rp-stack[b-codzncpn8g]  .rz-textarea {
  width: 100%;
  font-family: Consolas, "Courier New", monospace;
}

.rp-check[b-codzncpn8g] {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}

.rp-check > label[b-codzncpn8g] {
  font-size: .8125rem;
  line-height: 1.35;
}

.rp-help[b-codzncpn8g],
.rp-note[b-codzncpn8g] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.rp-help[b-codzncpn8g] {
  margin-bottom: .5rem;
}

.rp-note[b-codzncpn8g] {
  padding: .375rem 0;
}
/* /Components/Pages/AgentInternal/Settings/Client/ClientGeneral.razor.rz.scp.css */
/*
  System Setup > Client > General. Two columns of grouped settings, with the debt-consolidation and
  DMP pair spanning both beneath them. Collapses to one column below 980px, which is what the
  /settings screen pane gets.
*/

.cgen-page[b-qwdsfwitdo] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.cgen-head[b-qwdsfwitdo] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.cgen-actions[b-qwdsfwitdo] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/*
  Two declared tracks, not auto-fit: auto-fit derives the count from the available width, so a
  spanning row lands in a track of its own and shrinks the panels instead of widening anything.
  (Same trap as the RPPS screen.)
*/
.cgen-cols[b-qwdsfwitdo] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 980px) {
  .cgen-cols[b-qwdsfwitdo] {
    grid-template-columns: 1fr;
  }
}

/* The inner pair inside the full-width row. */
.cgen-cols2[b-qwdsfwitdo] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 980px) {
  .cgen-cols2[b-qwdsfwitdo] {
    grid-template-columns: 1fr;
  }
}

.cgen-panel[b-qwdsfwitdo] {
  min-width: 0;
}

.cgen-span[b-qwdsfwitdo] {
  grid-column: 1 / -1;
}

.cgen-group[b-qwdsfwitdo] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  padding: .5rem .75rem .75rem;
  margin: 0 0 .75rem;
  min-width: 0;
}

.cgen-group > legend[b-qwdsfwitdo] {
  float: none;
  width: auto;
  padding: 0 .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.cgen-field[b-qwdsfwitdo] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  min-width: 0;
  flex-wrap: wrap;
}

.cgen-field > label[b-qwdsfwitdo] {
  flex: 0 0 15rem;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.cgen-input[b-qwdsfwitdo] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

/* Stored procedure names and bookmark lists are long; they get the rest of the row. */
.cgen-wide[b-qwdsfwitdo] {
  flex: 1 1 12rem;
  max-width: 100%;
}

.cgen-input[b-qwdsfwitdo]  .rz-textbox,
.cgen-input[b-qwdsfwitdo]  .rz-dropdown,
.cgen-input[b-qwdsfwitdo]  .rz-spinner {
  width: 100%;
}

.cgen-area[b-qwdsfwitdo] {
  width: 100%;
}

.cgen-area[b-qwdsfwitdo]  .rz-textarea,
.cgen-page[b-qwdsfwitdo]  textarea.rz-textarea {
  width: 100%;
  font-family: Consolas, "Courier New", monospace;
}

.cgen-check[b-qwdsfwitdo] {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}

.cgen-check > label[b-qwdsfwitdo] {
  font-size: .8125rem;
  line-height: 1.35;
}

.cgen-help[b-qwdsfwitdo],
.cgen-note[b-qwdsfwitdo] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.cgen-note[b-qwdsfwitdo] {
  padding: .375rem 0;
}
/* /Components/Pages/AgentInternal/Settings/Client/MoreClientGeneral.razor.rz.scp.css */
/*
  System Setup > Client > More General. Two columns of grouped settings, collapsing to one below
  980px, which is what the /settings screen pane gets. Two declared tracks rather than auto-fit -
  see the note on the RPPS screen for why.
*/

.mcg-page[b-rd09ftesmx] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.mcg-head[b-rd09ftesmx] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.mcg-actions[b-rd09ftesmx] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.mcg-cols[b-rd09ftesmx] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 980px) {
  .mcg-cols[b-rd09ftesmx] {
    grid-template-columns: 1fr;
  }
}

.mcg-panel[b-rd09ftesmx] {
  min-width: 0;
}

.mcg-group[b-rd09ftesmx] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  padding: .5rem .75rem .75rem;
  margin: 0 0 .75rem;
  min-width: 0;
}

.mcg-group > legend[b-rd09ftesmx] {
  float: none;
  width: auto;
  padding: 0 .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.mcg-field[b-rd09ftesmx] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  min-width: 0;
  flex-wrap: wrap;
}

.mcg-field > label[b-rd09ftesmx] {
  flex: 0 0 15rem;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.mcg-input[b-rd09ftesmx] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

/* Procedure names and field lists are long; they get the rest of the row. */
.mcg-wide[b-rd09ftesmx] {
  flex: 1 1 12rem;
  max-width: 100%;
}

.mcg-input[b-rd09ftesmx]  .rz-textbox,
.mcg-input[b-rd09ftesmx]  .rz-dropdown,
.mcg-input[b-rd09ftesmx]  .rz-spinner {
  width: 100%;
}

/* The radio lists sit inline with their label and should not be capped by --fieldw. */
.mcg-input[b-rd09ftesmx]  .rz-radio-button-list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
}

.mcg-check[b-rd09ftesmx] {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}

.mcg-check > label[b-rd09ftesmx] {
  font-size: .8125rem;
  line-height: 1.35;
}

.mcg-help[b-rd09ftesmx],
.mcg-note[b-rd09ftesmx] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.mcg-note[b-rd09ftesmx] {
  padding: .375rem 0;
}
/* /Components/Pages/AgentInternal/Settings/Client/PaymentScheduleSettings.razor.rz.scp.css */
/*
  System Setup > Client > Payment Schedule Settings. Two columns of loose options above the recoup
  fieldset, which spans the full width because its update-mode caption is a full sentence.
  Collapses to one column when the pane is narrow - the /settings screen pane is the narrowest of
  its three.
*/

.pss-page[b-ysdxrd1hgt] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.pss-head[b-ysdxrd1hgt] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.pss-actions[b-ysdxrd1hgt] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.pss-note[b-ysdxrd1hgt] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

/*
  Two named tracks rather than auto-fit, for the reason RPPS documents: auto-fit derives the track
  count from the available width and would lay out a third column the full-width fieldset then fills,
  shrinking the panels instead of widening anything.
*/
.pss-cols[b-ysdxrd1hgt] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .pss-cols[b-ysdxrd1hgt] {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pss-panel h6[b-ysdxrd1hgt] {
  font-size: .8125rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

.pss-subhead[b-ysdxrd1hgt] {
  margin-top: .875rem !important;
}

/* Checkbox and its caption on one line, caption wrapping under itself rather than under the box. */
.pss-check[b-ysdxrd1hgt] {
  display: flex;
  align-items: flex-start;
  gap: .4375rem;
  margin-bottom: .375rem;
}

.pss-check label[b-ysdxrd1hgt] {
  font-size: .8125rem;
  line-height: 1.3;
}

.pss-field[b-ysdxrd1hgt] {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  margin: .625rem 0;
  max-width: 30rem;
}

.pss-field label[b-ysdxrd1hgt] {
  font-size: .75rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

/* The SQL statement is long enough that a 30rem cap would waste the pane. */
.pss-wide[b-ysdxrd1hgt] {
  max-width: none;
}

.pss-fieldset[b-ysdxrd1hgt] {
  border: 1px solid var(--rz-border-color, #dee2e6);
  border-radius: 4px;
  padding: .625rem .75rem .75rem;
  margin-top: 1rem;
}

.pss-fieldset legend[b-ysdxrd1hgt] {
  font-size: .8125rem;
  font-weight: 600;
  width: auto;
  padding: 0 .375rem;
  margin-bottom: .25rem;
}

/* Block-level so the inputs fill their column rather than sitting at their intrinsic width. */
.pss-field[b-ysdxrd1hgt]  .rz-dropdown,
.pss-field[b-ysdxrd1hgt]  .rz-textarea,
.pss-field[b-ysdxrd1hgt]  .rz-spinner {
  width: 100%;
}

/*
  The Update Mode captions are whole sentences - the longest runs to 92 characters - and the theme
  CENTRES a drop-down's selected text. Centred text that overflows spills off BOTH edges, so the
  longest option rendered as "ees in two stages, in order to limit the spread (Use the Limit_Spread
  paramete" - unreadable, and easy to mistake for a truncated value rather than a full one.

  Left-aligning is the fix; the rest keeps it to one line and puts an ellipsis on the overflow.
  flex-basis 0 rather than auto because a flex item sized from its content (596px inside a 480px
  control) never triggers its own ellipsis, it just overflows.

  Note innerText is useless for checking this - it returns the whole string whatever is on screen.
  Judge it from a screenshot.
*/
.pss-field[b-ysdxrd1hgt]  .rz-dropdown-label {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 0;
}
/* /Components/Pages/AgentInternal/Settings/Client/PaymentScheduleTemplates.razor.rz.scp.css */
/*
  System Setup > Client > Payment Schedule Templates: a header carrying the four toolbar actions,
  above the list grid. The editor dialogs opened from here bring their own layout, which lives in
  app.css (.pstd-*) because four components share it and Blazor scopes a stylesheet to one.
*/

.pst-page[b-pha6rn3j74] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.pst-head[b-pha6rn3j74] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.pst-actions[b-pha6rn3j74] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/* Names the row the toolbar will act on, so its target is never guessed from the grid cursor. */
.pst-note[b-pha6rn3j74] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #6c757d);
  margin-bottom: .5rem;
}
/* /Components/Pages/AgentInternal/Settings/Client/PaymentScheduleUdfs.razor.rz.scp.css */
/*
  System Setup > Client > Payment Schedule UDFs. Nine identical cards; the Windows form stacks them
  in one tall column, here they wrap into as many columns as the pane allows.
*/

.udf-page[b-pfl2cn7j1i] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.udf-head[b-pfl2cn7j1i] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.udf-actions[b-pfl2cn7j1i] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.udf-note[b-pfl2cn7j1i] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

/*
  auto-fill rather than auto-fit: with nine cards and a wide pane, auto-fit would stretch the last
  row's cards across the leftover space and make them wider than the rest.
*/
.udf-grid[b-pfl2cn7j1i] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .75rem;
  align-items: start;
}

.udf-card[b-pfl2cn7j1i] {
  border: 1px solid var(--rz-border-color, #dee2e6);
  border-radius: 4px;
  padding: .625rem .75rem .75rem;
  background: var(--rz-base-background-color, #fff);
}

.udf-cardhdr[b-pfl2cn7j1i] {
  font-weight: 600;
  font-size: .8125rem;
  margin-bottom: .5rem;
}

.udf-field[b-pfl2cn7j1i] {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  margin-bottom: .5rem;
}

.udf-field:last-child[b-pfl2cn7j1i] {
  margin-bottom: 0;
}

.udf-field label[b-pfl2cn7j1i] {
  font-size: .75rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

/* The inputs are block-level so they fill the card rather than sitting at their intrinsic width. */
.udf-field[b-pfl2cn7j1i]  .rz-textbox,
.udf-field[b-pfl2cn7j1i]  .rz-dropdown,
.udf-field[b-pfl2cn7j1i]  .rz-textarea {
  width: 100%;
}
/* /Components/Pages/AgentInternal/Settings/Client/RequirementsScreen.razor.rz.scp.css */
/*
  Shared by System Setup > Client > Client Requirements and > Lead Requirements.

  Lives beside RequirementsScreen.razor, NOT the two routed pages: Blazor scopes an isolated
  stylesheet to the component whose file it is named after, so on either page it would compile to a
  scope id this markup never carries and none of it would apply.
*/

/* Wide: these boxes hold SQL, and the screen has nothing else competing for the width. */
.req-page[b-rv1ukqduyl] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
  max-width: 1600px;
}

.req-head[b-rv1ukqduyl] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.req-actions[b-rv1ukqduyl] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.req-dirty[b-rv1ukqduyl] {
  font-size: .8125rem;
  color: var(--rz-warning-dark, #b26a00);
  margin-bottom: .5rem;
}

.req-field[b-rv1ukqduyl] {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1rem;
}

.req-field > label[b-rv1ukqduyl] {
  font-size: .875rem;
  font-weight: 600;
}

/* These hold SQL, so monospace and no wrapping mid-statement - the same treatment the payment
   schedule formula boxes get. Drag-to-grow because a requirement can run to many lines.

   ::deep is REQUIRED, not decorative: the textarea is rendered by RadzenTextArea, so it never
   carries this component's scope attribute and a plain `.req-sql` rule - even with the class passed
   to the component - compiles to `.req-sql[b-xxxxx]` and matches nothing. Styling it through a div
   this component DOES render is what makes the rule land. (The first cut got this wrong and the
   boxes silently kept Arial and their default height.) */
.req-field[b-rv1ukqduyl]  textarea {
  width: 100%;
  min-height: 20rem;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
  font-size: .8125rem;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  tab-size: 4;
}

/* The per-box state the Windows form showed by toggling its own Alert label and turning the text
   dark red. */
.req-field-invalid[b-rv1ukqduyl]  textarea {
  border-color: #d32f2f;
  background: #fdecea;
}

.req-alert[b-rv1ukqduyl] {
  font-size: .8125rem;
  color: #c00000;
}

.req-check[b-rv1ukqduyl] {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.req-shared-note[b-rv1ukqduyl] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #6c757d);
  margin: .25rem 0 1rem 1.75rem;
}

.req-help[b-rv1ukqduyl] {
  border-top: 1px solid var(--rz-base-200, #e9ecef);
  padding-top: .75rem;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

.req-help-title[b-rv1ukqduyl] {
  font-weight: 600;
  margin-top: .5rem;
}

.req-example[b-rv1ukqduyl] {
  margin: .25rem 0 0;
  padding: .5rem;
  background: var(--rz-base-100, #f8f9fa);
  border: 1px solid var(--rz-base-200, #e9ecef);
  border-radius: .25rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: .75rem;
  white-space: pre;
  overflow-x: auto;
}
/* /Components/Pages/AgentInternal/Settings/Client/StatusAssignScreen.razor.rz.scp.css */
/*
  Shared by System Setup > Client > Account Status and > Client Status. A header carrying the one
  bespoke action, above the hosted generic data form - so there is no layout here beyond the header
  row; the grid and the edit fields bring their own (SettingsDataForm.razor.css).

  Lives beside StatusAssignScreen.razor, NOT the routed pages: Blazor scopes an isolated stylesheet
  to the component whose file it is named after, so on the page it would compile to a scope id the
  markup below never carries and none of it would apply.
*/

.as-page[b-u7akpr4bxq] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.as-head[b-u7akpr4bxq] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.as-actions[b-u7akpr4bxq] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/* Names the row Assign will act on, so the button's target is never guessed from the grid cursor. */
.as-note[b-u7akpr4bxq] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #6c757d);
  margin-bottom: .5rem;
}
/* /Components/Pages/AgentInternal/Settings/Client/WorkflowRulesScreen.razor.rz.scp.css */
/*
  Shared by the five workflow rule screens. A header carrying the one bespoke action, above the
  hosted generic data form - so there is no layout here beyond the header row; the grid and the edit
  fields bring their own (SettingsDataForm.razor.css).

  Lives beside WorkflowRulesScreen.razor, NOT the five routed pages: Blazor scopes an isolated
  stylesheet to the component whose file it is named after, so on a page it would compile to a scope
  id this markup never carries and none of it would apply.
*/

.wfr-page[b-ed7qqx7fua] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.wfr-head[b-ed7qqx7fua] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.wfr-actions[b-ed7qqx7fua] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/* Names the rule Copy will act on, so the button's target is never guessed from the grid cursor. */
.wfr-note[b-ed7qqx7fua] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #6c757d);
  margin-bottom: .5rem;
}
/* /Components/Pages/AgentInternal/Settings/CompanyInformation/CompanyGeneral.razor.rz.scp.css */
/*
  Company Information > General. Two columns, mirroring the Windows screen: company details on the
  left, the regional / time zone / multi-country sections on the right. Collapses to one column when
  the pane is narrow - the /settings screen pane is the narrowest of its three.
*/

.cg-page[b-kb9vtvi83n] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.cg-head[b-kb9vtvi83n] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.cg-actions[b-kb9vtvi83n] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.cg-cols[b-kb9vtvi83n] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1rem;
  align-items: start;
}

.cg-panel[b-kb9vtvi83n] {
  min-width: 0;
}

.cg-group[b-kb9vtvi83n] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  padding: .5rem .75rem .75rem;
  margin: 0 0 .75rem;
  min-width: 0;
}

.cg-group > legend[b-kb9vtvi83n] {
  float: none;
  width: auto;
  padding: 0 .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.cg-field[b-kb9vtvi83n] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  min-width: 0;
}

.cg-field > label[b-kb9vtvi83n] {
  flex: 0 0 9.5rem;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The second label on a shared row (the Fax beside a phone) does not need the full column. */
.cg-field > label.cg-label2[b-kb9vtvi83n] {
  flex: 0 0 auto;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.cg-input[b-kb9vtvi83n] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

.cg-input[b-kb9vtvi83n]  .rz-textbox,
.cg-input[b-kb9vtvi83n]  .rz-dropdown,
.cg-input[b-kb9vtvi83n]  .rz-spinner {
  width: 100%;
}

.cg-inlinebtn[b-kb9vtvi83n] {
  flex: 0 0 auto;
}

.cg-check[b-kb9vtvi83n] {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}

.cg-check > label[b-kb9vtvi83n] {
  font-size: .8125rem;
  line-height: 1.35;
}

.cg-help[b-kb9vtvi83n],
.cg-note[b-kb9vtvi83n] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.cg-note[b-kb9vtvi83n] {
  padding: .375rem 0;
}

.cg-logo[b-kb9vtvi83n] {
  display: block;
  max-width: 100%;
  /* The Windows PictureBox is 300x150; keep the same envelope so a logo sized for it looks right. */
  max-height: 150px;
  margin-bottom: .5rem;
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  background: #fff;
}

.cg-logoactions[b-kb9vtvi83n] {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.cg-logoactions[b-kb9vtvi83n] >  input[type="file"] {
  max-width: 22rem;
}
/* /Components/Pages/AgentInternal/Settings/Financial/CCProcessors.razor.rz.scp.css */
/*
  System Setup > Financial > CC Processors. Two columns, mirroring the Windows screen: the list of
  processors on the left, the selected processor's fields on the right. Collapses to one column when
  the pane is narrow - the /settings screen pane is the narrowest of its three.
*/

.cp-page[b-hgz0w81d33] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.cp-head[b-hgz0w81d33] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.cp-actions[b-hgz0w81d33] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.cp-body[b-hgz0w81d33] {
  display: grid;
  grid-template-columns: minmax(320px, 4fr) minmax(420px, 6fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .cp-body[b-hgz0w81d33] {
    grid-template-columns: 1fr;
  }
}

.cp-list[b-hgz0w81d33],
.cp-detail[b-hgz0w81d33] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: .375rem;
  padding: .625rem;
  background: var(--rz-base-background-color, #fff);
}

.cp-section[b-hgz0w81d33] {
  font-weight: 600;
  font-size: .875rem;
  margin: .875rem 0 .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--rz-base-300, #dee2e6);
}

.cp-section:first-child[b-hgz0w81d33] {
  margin-top: 0;
}

.cp-field[b-hgz0w81d33] {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: .5rem;
}

.cp-field > label[b-hgz0w81d33] {
  flex: 0 0 11rem;
  padding-top: .35rem;
  font-size: .875rem;
  text-align: right;
}

/* min-width:0 so a long key cannot push the column wider than the grid track. */
.cp-input[b-hgz0w81d33] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.cp-input :deep(.rz-textbox)[b-hgz0w81d33],
.cp-input :deep(.rz-dropdown)[b-hgz0w81d33] {
  width: 100%;
}

/* A masked field and its show/hide toggle on one row. */
.cp-secret[b-hgz0w81d33] {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
}

/* min-width:0 so the key does not push the toggle button off the end of the column. */
.cp-secret-input[b-hgz0w81d33] {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-hint[b-hgz0w81d33] {
  font-size: .75rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

.cp-hint-warn[b-hgz0w81d33] {
  color: var(--rz-warning-dark, #b26a00);
  font-weight: 600;
}

.cp-note[b-hgz0w81d33] {
  font-size: .875rem;
  color: var(--rz-text-secondary-color, #6c757d);
  padding: .5rem;
}

.cp-inline-note[b-hgz0w81d33] {
  padding-left: 11.625rem;
}

@media (max-width: 700px) {
  .cp-field[b-hgz0w81d33] {
    flex-direction: column;
    gap: .25rem;
  }

  .cp-field > label[b-hgz0w81d33] {
    flex: none;
    text-align: left;
  }

  .cp-inline-note[b-hgz0w81d33] {
    padding-left: .5rem;
  }
}
/* /Components/Pages/AgentInternal/Settings/Financial/CreditCardGeneral.razor.rz.scp.css */
/*
  System Setup > Financial > Credit Card General. Two columns of grouped settings, collapsing to
  one below 980px - which is what the /settings screen pane gets.
*/

.ccg-page[b-nl63kpj1co] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.ccg-head[b-nl63kpj1co] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.ccg-actions[b-nl63kpj1co] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/*
  Two declared tracks, not auto-fit: auto-fit derives the count from the available width, which
  shrinks the panels instead of widening anything. (Same trap as the RPPS and Client General screens.)
*/
.ccg-cols[b-nl63kpj1co] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media (max-width: 980px) {
  .ccg-cols[b-nl63kpj1co] {
    grid-template-columns: 1fr;
  }
}

.ccg-panel[b-nl63kpj1co] {
  min-width: 0;
}

.ccg-group[b-nl63kpj1co] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  padding: .5rem .75rem .75rem;
  margin: 0 0 .75rem;
  min-width: 0;
}

.ccg-group > legend[b-nl63kpj1co] {
  float: none;
  width: auto;
  padding: 0 .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.ccg-field[b-nl63kpj1co] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  min-width: 0;
  flex-wrap: wrap;
}

.ccg-field > label[b-nl63kpj1co] {
  flex: 0 0 15rem;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.ccg-input[b-nl63kpj1co] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

/* Processor names, stored procedure names and questionnaire labels are long; they take the rest. */
.ccg-wide[b-nl63kpj1co] {
  flex: 1 1 12rem;
  max-width: 100%;
}

.ccg-input[b-nl63kpj1co]  .rz-textbox,
.ccg-input[b-nl63kpj1co]  .rz-dropdown {
  width: 100%;
}

.ccg-check[b-nl63kpj1co] {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}

.ccg-check > label[b-nl63kpj1co] {
  font-size: .8125rem;
  line-height: 1.35;
}

/* Depends on the checkbox above it; the Windows screen says the same thing with position alone. */
.ccg-sub[b-nl63kpj1co] {
  margin-left: 1.5rem;
}

.ccg-note[b-nl63kpj1co] {
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  padding: .375rem 0;
}
/* /Components/Pages/AgentInternal/Settings/Financial/CreditCardTypes.razor.rz.scp.css */
/*
  System Setup > Financial > Credit Card Types. Two columns, mirroring the Windows screen: the list
  of types on the left, the selected type's fields on the right. Collapses to one column when the
  pane is narrow - the /settings screen pane is the narrowest of its three.
*/

.cct-page[b-hyzm1tel5i] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.cct-head[b-hyzm1tel5i] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.cct-actions[b-hyzm1tel5i] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.cct-body[b-hyzm1tel5i] {
  display: grid;
  grid-template-columns: minmax(320px, 6fr) minmax(360px, 4fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .cct-body[b-hyzm1tel5i] {
    grid-template-columns: 1fr;
  }
}

.cct-list[b-hyzm1tel5i],
.cct-detail[b-hyzm1tel5i] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: .375rem;
  padding: .625rem;
  background: var(--rz-base-background-color, #fff);
  min-width: 0;
}

.cct-field[b-hyzm1tel5i] {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: .5rem;
}

.cct-field > label[b-hyzm1tel5i] {
  flex: 0 0 9rem;
  padding-top: .35rem;
  font-size: .875rem;
  text-align: right;
}

/* min-width:0 so a long type name cannot push the column wider than the grid track. */
.cct-input[b-hyzm1tel5i] {
  flex: 0 1 14rem;
  min-width: 0;
}

.cct-wide[b-hyzm1tel5i] {
  flex: 1 1 14rem;
}

.cct-input[b-hyzm1tel5i]  .rz-textbox,
.cct-input[b-hyzm1tel5i]  .rz-dropdown {
  width: 100%;
}

.cct-note[b-hyzm1tel5i] {
  font-size: .875rem;
  color: var(--rz-text-secondary-color, #6c757d);
  padding: .5rem;
}

@media (max-width: 700px) {
  .cct-field[b-hyzm1tel5i] {
    flex-direction: column;
    gap: .25rem;
  }

  .cct-field > label[b-hyzm1tel5i] {
    flex: none;
    text-align: left;
  }
}
/* /Components/Pages/AgentInternal/Settings/Internet/InternetMenuItemEditor.razor.rz.scp.css */
/*
  InternetMenuItemEditor: the shared item editor, embedded in /settings/internetmenus (toolbar on top)
  or hosted by InternetMenuItemDialog (footer). Field layout reuses app.css .pstd-form / .pstd-field /
  .pstd-footer (shared by every settings editor dialog); this file adds the header, the state dot, the
  inline field groups, the preview / test panels and the SvgIcon sizing.

  .fa-primary / .fa-secondary tone rules stay in app.css (global) - they cannot be scoped.
*/

.ime-root[b-smk07gx3st] {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 0;
}

.ime-dialog[b-smk07gx3st] {
  height: 100%;
}

/* ---- header ---- */
.ime-head[b-smk07gx3st] {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rz-base-300, #dee2e6);
}

.ime-title[b-smk07gx3st] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ime-actions[b-smk07gx3st] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

/* The WinForms state tint as a dot: inactive salmon, active-hidden teal, active-visible green. */
.ime-state[b-smk07gx3st] {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  flex: none;
  background: var(--rz-base-400, #ced4da);
}

.ime-state.im-inactive[b-smk07gx3st] { background: #f08080; }
.ime-state.im-hidden[b-smk07gx3st] { background: #20b2aa; }
.ime-state.im-visible[b-smk07gx3st] { background: #3cb371; }

/* ---- delete confirmation strip (inline, so it re-renders with the editor) ---- */
.ime-delete-strip[b-smk07gx3st] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .5rem .75rem;
  border: 1px solid var(--rz-danger, #dc3545);
  border-radius: .375rem;
  background: rgba(220, 53, 69, .06);
  font-size: .875rem;
}

.ime-delete-buttons[b-smk07gx3st] {
  display: flex;
  gap: .375rem;
  align-items: center;
}

/* ---- fields ---- */
.ime-form[b-smk07gx3st] {
  padding: .25rem 0;
}

.ime-field[b-smk07gx3st] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.ime-inline[b-smk07gx3st] {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
}

.ime-inline > .rz-textbox[b-smk07gx3st],
.ime-inline > .rz-textarea[b-smk07gx3st],
.ime-inline > .rz-autocomplete[b-smk07gx3st] {
  flex: 1 1 auto;
  min-width: 0;
}

.ime-wrap[b-smk07gx3st] {
  flex-wrap: wrap;
}

.ime-checks[b-smk07gx3st] {
  gap: .35rem;
}

.ime-checks > label[b-smk07gx3st] {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .875rem;
}

.ime-html-preview[b-smk07gx3st] {
  border: 1px dashed var(--rz-base-300, #dee2e6);
  border-radius: .25rem;
  padding: .25rem .5rem;
  font-size: .875rem;
}

.ime-preview[b-smk07gx3st] {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .4rem .6rem;
  border-radius: .25rem;
  background: var(--rz-base-100, #f8f9fa);
  font-size: .875rem;
  word-break: break-all;
}

.ime-classic[b-smk07gx3st] {
  margin-top: .5rem;
  border-top: 1px solid var(--rz-base-300, #dee2e6);
  padding-top: .4rem;
}

.ime-classic > summary[b-smk07gx3st] {
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
}

.ime-ro[b-smk07gx3st] {
  display: block;
  padding: .3rem .45rem;
  background: var(--rz-base-100, #f8f9fa);
  border-radius: .25rem;
  word-break: break-all;
}

/* ---- visibility tester ---- */
.ime-test[b-smk07gx3st] {
  margin-top: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: .375rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.ime-test-title[b-smk07gx3st] {
  font-weight: 600;
  font-size: .875rem;
}

.ime-verdict[b-smk07gx3st] {
  padding: .4rem .6rem;
  border-radius: .25rem;
  border-left: 4px solid var(--rz-base-400, #ced4da);
  background: var(--rz-base-100, #f8f9fa);
  font-size: .875rem;
}

.ime-verdict-allowed[b-smk07gx3st] { border-left-color: var(--rz-success, #198754); }
.ime-verdict-hidden[b-smk07gx3st] { border-left-color: var(--rz-warning, #ffc107); }
.ime-verdict-error[b-smk07gx3st] { border-left-color: var(--rz-danger, #dc3545); }

.ime-sql[b-smk07gx3st] {
  margin: 0;
  padding: .35rem .5rem;
  font-size: .75rem;
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--rz-base-background-color, #fff);
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: .25rem;
  max-height: 200px;
  overflow: auto;
}

/* ---- info ---- */
.ime-info th[b-smk07gx3st] {
  width: 10rem;
  font-weight: 600;
  white-space: nowrap;
}

/* SvgIcon renders <i class="fa-icon-v7"> with the inlined <svg>; neither carries this component's
   scope attribute, so the sizing needs ::deep anchored on an element this component owns
   (SettingsExplorer.razor.css explains the trap). */
.ime-root[b-smk07gx3st]  .rz-button .fa-icon-v7 {
  width: 1em;
  height: 1em;
}

.ime-root[b-smk07gx3st]  .fa-icon-v7 svg {
  display: block;
}

/* Dialog host: the tabs take the remaining height and scroll inside. */
.ime-dialog[b-smk07gx3st]  .rz-tabview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ime-dialog[b-smk07gx3st]  .rz-tabview-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 700px) {
  .ime-form .pstd-field[b-smk07gx3st] {
    flex-direction: column;
    align-items: stretch;
  }

  .ime-form .pstd-field > label[b-smk07gx3st] {
    flex: none;
    padding-top: 0;
  }
}
/* /Components/Pages/AgentInternal/Settings/Internet/InternetMenuLinkWizardDialog.razor.rz.scp.css */
/*
  Link URL Wizard (InternetMenuLinkWizardDialog): three panels on the left, the persistent preview card
  on the right, the footer buttons below. The dialog is opened at 900 x 640, resizable, so the root fills
  the dialog body and only the main panel scrolls.

  The footer reuses app.css .pstd-footer (shared by every settings editor dialog).
*/

.imw-root[b-rhmepzkkwk] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: .5rem;
}

/* ---- step indicator ---- */
.imw-steps[b-rhmepzkkwk] {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0 0 .25rem 0;
  border-bottom: 1px solid var(--rz-base-300, #dee2e6);
  font-size: .875rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

.imw-steps li[b-rhmepzkkwk] {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.imw-step-no[b-rhmepzkkwk] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: .75rem;
}

.imw-step-current[b-rhmepzkkwk] {
  color: var(--rz-primary, #0d6efd);
  font-weight: 600;
}

.imw-step-done[b-rhmepzkkwk] {
  color: var(--rz-success, #198754);
}

/* ---- body: main + preview ---- */
.imw-body[b-rhmepzkkwk] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: .75rem;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 760px) {
  .imw-body[b-rhmepzkkwk] {
    grid-template-columns: 1fr;
  }
}

.imw-main[b-rhmepzkkwk] {
  min-height: 0;
  overflow-y: auto;
  padding-right: .25rem;
}

.imw-toolbar[b-rhmepzkkwk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.imw-audience[b-rhmepzkkwk] {
  font-size: .875rem;
}

.imw-check[b-rhmepzkkwk] {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  margin: 0;
}

/* ---- step 1 cards ---- */
.imw-cards[b-rhmepzkkwk] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .5rem;
}

.imw-card[b-rhmepzkkwk] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: .375rem;
  padding: .5rem .6rem;
  cursor: pointer;
  background: var(--rz-base-background-color, #fff);
  outline: none;
}

.imw-card:hover[b-rhmepzkkwk],
.imw-card:focus-visible[b-rhmepzkkwk] {
  border-color: var(--rz-primary, #0d6efd);
}

.imw-card-selected[b-rhmepzkkwk] {
  border-color: var(--rz-primary, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, .2);
}

.imw-card-disabled[b-rhmepzkkwk] {
  cursor: not-allowed;
  opacity: .6;
}

.imw-card-disabled:hover[b-rhmepzkkwk] {
  border-color: var(--rz-base-300, #dee2e6);
}

.imw-card-head[b-rhmepzkkwk] {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9rem;
}

.imw-radio[b-rhmepzkkwk] {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  border: 1px solid var(--rz-text-secondary-color, #6c757d);
  flex: none;
}

.imw-card-selected .imw-radio[b-rhmepzkkwk] {
  border-color: var(--rz-primary, #0d6efd);
  background: radial-gradient(circle, var(--rz-primary, #0d6efd) 45%, transparent 50%);
}

.imw-badge[b-rhmepzkkwk] {
  font-size: .65rem;
  font-weight: 500;
}

.imw-card-desc[b-rhmepzkkwk] {
  font-size: .8125rem;
  margin-top: .2rem;
}

.imw-card-example[b-rhmepzkkwk] {
  font-size: .75rem;
  color: var(--rz-text-secondary-color, #6c757d);
  margin-top: .2rem;
  word-break: break-all;
}

.imw-card-reason[b-rhmepzkkwk] {
  font-size: .75rem;
  color: var(--rz-danger, #dc3545);
  margin-top: .3rem;
}

/* ---- step 2 ---- */
.imw-typed[b-rhmepzkkwk] {
  margin-bottom: .6rem;
}

.imw-empty[b-rhmepzkkwk] {
  padding: 1rem 0;
}

/* ---- step 3 ---- */
.imw-options[b-rhmepzkkwk] {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.imw-option-title[b-rhmepzkkwk] {
  font-weight: 600;
  font-size: .9rem;
}

.imw-param-list[b-rhmepzkkwk] {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.imw-param code[b-rhmepzkkwk] {
  font-size: .75rem;
}

.imw-legacy summary[b-rhmepzkkwk] {
  cursor: pointer;
  font-size: .875rem;
}

.imw-legacy-list[b-rhmepzkkwk] {
  margin: .25rem 0 0 0;
  padding-left: 1.2rem;
  font-size: .8125rem;
}

/* ---- preview card ---- */
.imw-preview[b-rhmepzkkwk] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: .375rem;
  padding: .6rem .7rem;
  background: var(--rz-base-100, #f8f9fa);
  overflow-y: auto;
  min-height: 0;
  font-size: .8125rem;
}

.imw-preview-title[b-rhmepzkkwk] {
  font-weight: 600;
  margin-bottom: .4rem;
}

.imw-preview-list[b-rhmepzkkwk] {
  margin: 0;
}

.imw-preview-list dt[b-rhmepzkkwk] {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--rz-text-secondary-color, #6c757d);
  margin-top: .45rem;
}

.imw-preview-list dd[b-rhmepzkkwk] {
  margin: .1rem 0 0 0;
  word-break: break-all;
}

.imw-preview-warnings[b-rhmepzkkwk] {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* SvgIcon inside this component's buttons: the <i>/<svg> carry no scope attribute, so ::deep. */
.imw-root[b-rhmepzkkwk]  .rz-button .fa-icon-v7 {
  width: 1em;
  height: 1em;
}
/* /Components/Pages/AgentInternal/Settings/Internet/InternetMenus.razor.rz.scp.css */
/*
  Web Portal > Menus (/settings/internetmenus): header with the toolbar, a two-column body (tree on
  the left, the embedded InternetMenuItemEditor on the right) that stacks at <= 900px.

  No padding on the page root: the inset from the chrome is the layout content container (app.css
  "PAGE GUTTER"); inside the Settings Explorer the pane is flush, which is the accepted state.

  The tree's icons are SvgIcon (<i class="fa-icon-v7"> with the inlined <svg>), which belong to no
  component and therefore need ::deep anchored on an element this component owns (.im-tree) - see
  SettingsExplorer.razor.css for the full explanation. The .fa-primary / .fa-secondary tone rules
  must stay in app.css; a scoped copy would compile to .fa-primary[b-xxxx] and match nothing.
*/

.im-page[b-runbdobqe4] {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}

/* ---- header ---- */
.im-head[b-runbdobqe4] {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}

.im-actions[b-runbdobqe4] {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.im-switch[b-runbdobqe4] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  margin: 0 .25rem;
  cursor: pointer;
  user-select: none;
}

/* The two reset indicators (A2). Orange = this node changed the menu and other web servers have not
   seen it; muted = the classic portal's own reset flag, which only CreditSoftWin can clear. */
.im-chip[b-runbdobqe4] {
  display: inline-block;
  font-size: .72rem;
  line-height: 1.2;
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}

.im-chip-reset[b-runbdobqe4] {
  background: #fff3cd;
  color: #8a5a00;
  border: 1px solid #f0c36d;
}

.im-chip-classic[b-runbdobqe4] {
  background: var(--rz-base-200, #eceff1);
  color: var(--rz-text-secondary-color, #6c757d);
  border: 1px solid var(--rz-base-300, #dee2e6);
}

/* ---- body ---- */
.im-body[b-runbdobqe4] {
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  gap: .75rem;
  align-items: start;
  min-width: 0;
}

.im-tree[b-runbdobqe4] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: .375rem;
  background: var(--rz-base-background-color, #fff);
  padding: .25rem;
  min-width: 0;
  overflow: auto;
  /* Stays in view while the (possibly tall) editor scrolls; sticky works inside the explorer's
     scrolling pane and under the direct route alike. */
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
}

.im-editor[b-runbdobqe4] {
  min-width: 0;
}

.im-findnote[b-runbdobqe4] {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--rz-text-secondary-color, #6c757d);
  padding: .2rem .4rem;
}

.im-link[b-runbdobqe4] {
  background: none;
  border: 0;
  padding: 0;
  color: var(--rz-primary, #0d6efd);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}

.im-legend[b-runbdobqe4] {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  align-items: center;
  font-size: .72rem;
  color: var(--rz-text-secondary-color, #6c757d);
  padding: .4rem .4rem .2rem;
  border-top: 1px solid var(--rz-base-300, #dee2e6);
  margin-top: .35rem;
}

.im-legend > span[b-runbdobqe4] {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* ---- node template ---- */
.im-node[b-runbdobqe4] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  max-width: 100%;
  padding-right: 1.6rem; /* room for the kebab */
  position: relative;
  line-height: 1.5;
}

/* The WinForms state cues: inactive salmon / active-hidden teal / active-visible green. */
.im-dot[b-runbdobqe4] {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rz-base-400, #adb5bd);
}

.im-node.im-inactive > .im-dot[b-runbdobqe4], .im-dot.im-inactive[b-runbdobqe4] { background: #f08080; }
.im-node.im-hidden > .im-dot[b-runbdobqe4], .im-dot.im-hidden[b-runbdobqe4] { background: #20b2aa; }
.im-node.im-visible > .im-dot[b-runbdobqe4], .im-dot.im-visible[b-runbdobqe4] { background: #3cb371; }
.im-node.im-pseudo > .im-dot[b-runbdobqe4] { background: #e0a800; }

.im-node.im-inactive .im-name[b-runbdobqe4] { color: var(--rz-text-disabled-color, #8a8f94); }
.im-node.im-root .im-name[b-runbdobqe4] { font-weight: 600; }
.im-node.im-pseudo .im-name[b-runbdobqe4] { font-style: italic; }

.im-name[b-runbdobqe4] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.im-caption[b-runbdobqe4] {
  color: var(--rz-text-secondary-color, #6c757d);
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.im-node.im-match[b-runbdobqe4] {
  background: #fff8c5;
  border-radius: 3px;
}

.im-tag[b-runbdobqe4] {
  flex: none;
  font-size: .62rem;
  line-height: 1.1;
  padding: .12rem .35rem;
  border-radius: 999px;
  background: var(--rz-base-200, #eceff1);
  color: var(--rz-text-secondary-color, #6c757d);
  border: 1px solid var(--rz-base-300, #dee2e6);
  white-space: nowrap;
}

.im-tag-inactive[b-runbdobqe4] { background: #fde2e2; color: #8b2c2c; border-color: #f2b8b8; }
.im-tag-hidden[b-runbdobqe4] { background: #d9f2f0; color: #145f5a; border-color: #a9dcd7; }
.im-tag-warn[b-runbdobqe4] { background: #fff3cd; color: #8a5a00; border-color: #f0c36d; }

/* Per-node actions: shown on hover / keyboard focus so the tree stays quiet, but always present in
   the DOM (right-click is not the only route - see the CSGrid.OnRowActions directive). */
.im-kebab[b-runbdobqe4] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease-in-out;
}

.im-node:hover > .im-kebab[b-runbdobqe4],
.im-node:focus-within > .im-kebab[b-runbdobqe4],
.im-kebab:focus[b-runbdobqe4] {
  opacity: 1;
}

.im-kebab:hover[b-runbdobqe4] {
  background: var(--rz-base-200, #eceff1);
}

/* ---- icons (see the header comment for why ::deep) ---- */
.im-tree[b-runbdobqe4]  .fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 14px;
  height: 14px;
  line-height: 1;
}

.im-tree[b-runbdobqe4]  .fa-icon-v7 svg {
  width: 14px;
  height: 14px;
  display: block;
}

.im-tree[b-runbdobqe4]  .im-kebab .fa-icon-v7,
.im-tree[b-runbdobqe4]  .im-kebab .fa-icon-v7 svg {
  width: 12px;
  height: 12px;
}

/* Let the template span use the row's width so the ellipsis and the kebab position work. */
.im-tree[b-runbdobqe4]  .rz-treenode-label {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

/* ---- editor placeholder ---- */
.im-placeholder[b-runbdobqe4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--rz-base-300, #dee2e6);
  border-radius: .375rem;
  color: var(--rz-text-secondary-color, #6c757d);
  max-width: 34rem;
}

.im-editor[b-runbdobqe4]  .im-placeholder-ico,
.im-editor[b-runbdobqe4]  .im-placeholder-ico svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .im-body[b-runbdobqe4] {
    grid-template-columns: 1fr;
  }

  .im-tree[b-runbdobqe4] {
    position: static;
    max-height: 45vh;
  }

  .im-actions[b-runbdobqe4] {
    margin-left: 0;
  }
}
/* /Components/Pages/AgentInternal/Settings/IssueTracking/ContactPlanDetailDialog.razor.rz.scp.css */
.cpd[b-mcgo7nbe8q] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cpd-row[b-mcgo7nbe8q] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cpd-inline[b-mcgo7nbe8q] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* The three advanced boxes hold SQL, so they get a code face and keep the whitespace the user typed
   - a Not Exists guard pasted from the documentation is unreadable reflowed. */
.cpd-sql[b-mcgo7nbe8q]  textarea,
.cpd-sql[b-mcgo7nbe8q] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre;
}

.cpd-buttons[b-mcgo7nbe8q] {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--rz-border-color, #e0e0e0);
  padding-top: 12px;
}
/* /Components/Pages/AgentInternal/Settings/IssueTracking/ContactPlanTemplates.razor.rz.scp.css */
.cpt-page[b-zkeyxc9noq] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.cpt-head[b-zkeyxc9noq] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cpt-actions[b-zkeyxc9noq] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.cpt-list[b-zkeyxc9noq] {
  margin-bottom: 16px;
}

.cpt-detail[b-zkeyxc9noq] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rz-border-color, #e0e0e0);
  padding-top: 12px;
}

/* The header fields sit on one line while there is room and stack below that; the two narrow ones
   (the Active switch and the Save button) never need a share of the width. */
.cpt-fields[b-zkeyxc9noq] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cpt-field[b-zkeyxc9noq] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 260px;
  min-width: 0;
}

.cpt-field-narrow[b-zkeyxc9noq] {
  flex: 0 0 auto;
}

.cpt-subhead[b-zkeyxc9noq] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* /Components/Pages/AgentInternal/Settings/SettingsDataForm.razor.rz.scp.css */
/*
  Generic AC data form: grid on top, the selected row's fields underneath, mirroring the Windows
  Administration Console. The screen pane that hosts this already scrolls, so nothing here sets its
  own height - the grid takes what it needs and the detail panel follows it down the page.
*/

.sdf-grid[b-uip49wosap] {
  margin-bottom: .75rem;
}

.sdf-detail[b-uip49wosap] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  background: var(--rz-base-background-color, #fff);
}

.sdf-detailhdr[b-uip49wosap] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--rz-base-300, #d8dde3);
  background: var(--rz-base-200, #f4f6f8);
}

.sdf-actions[b-uip49wosap] {
  display: flex;
  gap: .375rem;
}

/*
  Fields wrap into as many columns as fit. auto-fill rather than auto-fit so a screen with two
  fields keeps them at a readable width instead of stretching each across half the pane.
*/
.sdf-fields[b-uip49wosap] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .5rem 1.25rem;
  padding: .75rem;
}

.sdf-field[b-uip49wosap] {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
}

.sdf-field > label[b-uip49wosap] {
  flex: 0 0 40%;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.sdf-input[b-uip49wosap] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

.sdf-input[b-uip49wosap]  .rz-textarea,
.sdf-input[b-uip49wosap]  .rz-textbox,
.sdf-input[b-uip49wosap]  .rz-dropdown,
.sdf-input[b-uip49wosap]  .rz-spinner {
  width: 100%;
}

/* A multi-line field is worth the full cell rather than the 40/60 split. */
.sdf-input.wi_dq_multiline[b-uip49wosap] {
  --fieldw: 100%;
}

.sdf-note[b-uip49wosap] {
  padding: .75rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  font-size: .875rem;
}
/* /Components/Pages/AgentInternal/Settings/SettingsExplorer.razor.rz.scp.css */
/* Settings Explorer - three-pane navigator. Follows mockups.html in the plan folder.
   Scoped CSS: remember to bump the ?v= on ICCOBlazorApp1.styles.css in App.razor after editing. */

.sx-bar[b-owfd0z5kfj] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 11px 16px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-rule);
}

.sx-brand[b-owfd0z5kfj] {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: none;
  text-decoration: none;
  color: inherit;
}

.sx-brand strong[b-owfd0z5kfj] { font-size: 15px; letter-spacing: -0.01em; }
.sx-brand span[b-owfd0z5kfj] { font-size: 11px; color: var(--app-ink-2); }
.sx-brand:hover strong[b-owfd0z5kfj] { text-decoration: underline; }

.sx-search[b-owfd0z5kfj] { flex: 1 1 260px; min-width: 190px; position: relative; }

.sx-search input[b-owfd0z5kfj] {
  width: 100%;
  font-size: 13px;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--app-rule);
  border-radius: 4px;
  background: var(--app-ground);
  color: var(--app-ink);
}

.sx-search input:focus[b-owfd0z5kfj] {
  outline: 2px solid var(--app-primary-light);
  outline-offset: 1px;
  border-color: var(--app-primary);
  background: var(--app-surface);
}

.sx-clear[b-owfd0z5kfj] {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--app-ink-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 3px;
}

.sx-clear:hover[b-owfd0z5kfj] { background: var(--app-surface-2); color: var(--app-ink); }

.sx-seg[b-owfd0z5kfj] { display: flex; border: 1px solid var(--app-rule); border-radius: 4px; overflow: hidden; flex: none; }

.sx-seg button[b-owfd0z5kfj] {
  font-size: 11.5px;
  padding: 6px 11px;
  background: var(--app-surface);
  border: 0;
  border-right: 1px solid var(--app-rule);
  color: var(--app-ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.sx-seg button:last-child[b-owfd0z5kfj] { border-right: 0; }
.sx-seg button[aria-pressed="true"][b-owfd0z5kfj] { background: var(--app-primary-soft); color: var(--app-primary); font-weight: bold; }

.sx-toggle[b-owfd0z5kfj] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--app-ink-2);
  flex: none;
  margin: 0;
  cursor: pointer;
}

/* The right-hand group. The auto margin lives HERE and not on .sx-who, because the who-label is
   absent for a session whose full name did not resolve and the Reset Site button is absent for a
   read-only user - with the margin on either one, whichever survives would stop being flushed right. */
.sx-bar-end[b-owfd0z5kfj] { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }

.sx-who[b-owfd0z5kfj] { flex: none; font-size: 11.5px; color: var(--app-ink-2); }

.sx-reset[b-owfd0z5kfj] {
  flex: none;
  font-size: 12px;
  padding: 6px 11px;
  border: 1px solid var(--app-rule);
  border-radius: 4px;
  background: var(--app-ground);
  color: var(--app-primary);
  cursor: pointer;
}

.sx-reset:hover:not(:disabled)[b-owfd0z5kfj] { background: var(--app-primary-soft); border-color: var(--app-primary-light); }
.sx-reset:disabled[b-owfd0z5kfj] { color: var(--app-ink-3); cursor: default; }

/* flex-basis 100% breaks it onto its own line of the wrapping bar. */
.sx-resetmsg[b-owfd0z5kfj] { flex: 1 0 100%; font-size: 11.5px; color: var(--app-primary); }

/* ---- three panes ---- */

.sx-body[b-owfd0z5kfj] {
  display: flex;
  align-items: stretch;
  /* Fills the tab below the toolbar. The toolbar wraps on a narrow window, so the panes take
     whatever is left rather than a fixed offset. */
  height: calc(100vh - 54px);
  min-height: 0;
}

.sx-explorer[b-owfd0z5kfj] {
  width: 250px;
  flex: none;
  border-right: 1px solid var(--app-rule);
  background: var(--app-surface);
  overflow-y: auto;
  padding: 6px 0 10px;
}

.sx-list[b-owfd0z5kfj] {
  width: 260px;
  flex: none;
  border-right: 1px solid var(--app-rule);
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sx-screen[b-owfd0z5kfj] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.sx-scroll[b-owfd0z5kfj], .sx-scrollbody[b-owfd0z5kfj] { overflow-y: auto; flex: 1; min-height: 0; }
.sx-scrollbody[b-owfd0z5kfj] { overflow-x: auto; }

@media (max-width: 900px) {
  .sx-body[b-owfd0z5kfj] { flex-direction: column; height: auto; }
  .sx-explorer[b-owfd0z5kfj], .sx-list[b-owfd0z5kfj] { width: auto; border-right: 0; border-bottom: 1px solid var(--app-rule); }
}

/* ---- pane 1 ---- */

.sx-grouphdr[b-owfd0z5kfj] {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--app-ink-2);
  padding: 12px 14px 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sx-gi[b-owfd0z5kfj] {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--app-ink);
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
}

.sx-gi:hover[b-owfd0z5kfj] { background: var(--app-surface-2); }
.sx-gi[aria-current="true"][b-owfd0z5kfj] { background: var(--app-primary-soft); box-shadow: inset 3px 0 0 var(--app-primary); font-weight: bold; }
.sx-gi-win[b-owfd0z5kfj] { color: var(--app-ink-3); }
.sx-gi-name[b-owfd0z5kfj] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- pane 2 ---- */

.sx-lphdr[b-owfd0z5kfj] {
  padding: 10px 14px;
  border-bottom: 1px solid var(--app-rule);
  background: var(--app-surface);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sx-lphdr strong[b-owfd0z5kfj] { font-size: 12.5px; }
.sx-lphdr span[b-owfd0z5kfj] { font-size: 10.5px; color: var(--app-ink-2); font-variant-numeric: tabular-nums; margin-left: auto; }

.sx-lpfilter[b-owfd0z5kfj] { padding: 8px 10px; border-bottom: 1px solid var(--app-rule); }

.sx-lpfilter input[b-owfd0z5kfj] {
  width: 100%;
  font-size: 12px;
  padding: 5px 9px;
  border: 1px solid var(--app-rule);
  border-radius: 4px;
  background: var(--app-ground);
}

.sx-li[b-owfd0z5kfj] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--app-ink);
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--app-surface-2);
}

.sx-li:hover:not(:disabled)[b-owfd0z5kfj] { background: var(--app-surface-2); }
.sx-li:disabled[b-owfd0z5kfj] { color: var(--app-ink-3); cursor: default; }
.sx-li[aria-current="true"][b-owfd0z5kfj] { background: var(--app-primary-soft); box-shadow: inset 3px 0 0 var(--app-primary); font-weight: bold; }
.sx-li-name[b-owfd0z5kfj] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sx-dot[b-owfd0z5kfj] { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sx-dot-ok[b-owfd0z5kfj] { background: var(--app-success); }
.sx-dot-win[b-owfd0z5kfj] { background: var(--app-rule-strong); }


/* search results */

.sx-hit[b-owfd0z5kfj] {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 14px;
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--app-surface-2);
}

.sx-hit:hover:not(:disabled)[b-owfd0z5kfj] { background: var(--app-surface-2); }
.sx-hit:disabled[b-owfd0z5kfj] { cursor: default; }

.sx-crumb[b-owfd0z5kfj] { font-size: 10.5px; color: var(--app-ink-2); }
.sx-found[b-owfd0z5kfj] { font-size: 12.5px; color: var(--app-ink); }
.sx-meta[b-owfd0z5kfj] { display: flex; align-items: center; gap: 8px; }
.sx-code[b-owfd0z5kfj] { font-family: Consolas, ui-monospace, monospace; font-size: 10px; color: var(--app-ink-3); }

.sx-chip[b-owfd0z5kfj] {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.sx-chip-ok[b-owfd0z5kfj] { background: var(--app-success-soft); color: var(--app-success); }
.sx-chip-win[b-owfd0z5kfj] { background: var(--app-warning-soft); color: var(--app-warning-ink); }

/* ---- pane 3 ---- */

.sx-schead[b-owfd0z5kfj] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-rule);
  background: var(--app-surface);
}

.sx-schead h1[b-owfd0z5kfj] { font-size: 16px; margin: 0; }
.sx-schead > span[b-owfd0z5kfj] { margin-left: auto; }

.sx-blank[b-owfd0z5kfj] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--app-ink-2);
  padding: 40px 20px;
  text-align: center;
}

.sx-blank strong[b-owfd0z5kfj] { font-size: 14px; color: var(--app-ink); }
.sx-blank span[b-owfd0z5kfj] { font-size: 12.5px; }

.sx-empty[b-owfd0z5kfj] { padding: 16px 14px; color: var(--app-ink-2); font-size: 12px; }

/*
  Icons need ::deep, and without it they are invisible rather than merely unstyled.

  SvgIcon renders <i class="fa-icon-v7 sx-ico"> and inlines the .svg file into it as a MarkupString.
  Neither element belongs to THIS component's markup, so a plain ".sx-ico" rule compiles to
  ".sx-ico[b-settingsexplorer]" and matches nothing. The <i> then has no size and the <svg> - which
  carries only a viewBox, no width or height - has nothing to size it either.

  Anchoring on .sx-explorer (which IS in this component) and reaching in with ::deep gives both
  elements a rule that actually applies.

  Note the same latent problem exists in RadzenNavMenu2.razor.css, whose ".fa-icon-v7 svg" compiles
  to ".fa-icon-v7 svg[b-...]" and has therefore never matched. SvgIcon having no stylesheet of its
  own is the root cause; fixing that properly is a shared-component change and is not done here.
*/
.sx-explorer[b-owfd0z5kfj]  .fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 15px;
  height: 15px;
  line-height: 1;
}

.sx-explorer[b-owfd0z5kfj]  .fa-icon-v7 svg {
  width: 15px;
  height: 15px;
  display: block;
}
/* /Components/Pages/AgentInternal/Settings/TelephonySettings.razor.rz.scp.css */
/*
  System Setup > Telephony > Company Settings.

  ONE column, unlike CreditCardGeneral.razor.css which this otherwise follows. Two reasons, and the
  second is the one that decides it:

    * the fields are long opaque strings - a client id, a secret, a redirect URI - where that screen
      has short labels and checkboxes;
    * the /settings screen pane is about 750px wide at a 1280px viewport, so a two-track grid gives
      each panel ~360px. A viewport media query cannot see that: the breakpoint would have to fire
      at 980px of VIEWPORT while the pane is already too narrow at 1280.

  Capped rather than filling the standalone /telephony route's full width: three fields stretched
  across 1400px read worse than the same three at a readable measure.
*/

.tel-page[b-1bzf3lsd2i] {
  /* No padding: the inset from the chrome is the layout content container (app.css "PAGE GUTTER"). */
}

.tel-head[b-1bzf3lsd2i] {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.tel-actions[b-1bzf3lsd2i] {
  display: flex;
  gap: .375rem;
  margin-left: auto;
}

.tel-body[b-1bzf3lsd2i] {
  max-width: 46rem;
}

.tel-panel[b-1bzf3lsd2i] {
  min-width: 0;
}

.tel-group[b-1bzf3lsd2i] {
  border: 1px solid var(--rz-base-300, #d8dde3);
  border-radius: 4px;
  padding: .5rem .75rem .75rem;
  margin: 0 0 .75rem;
  min-width: 0;
}

.tel-group > legend[b-1bzf3lsd2i] {
  float: none;
  width: auto;
  padding: 0 .375rem;
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--rz-text-secondary-color, #5c6a78);
}

.tel-field[b-1bzf3lsd2i] {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .375rem;
  min-width: 0;
  flex-wrap: wrap;
}

.tel-field > label[b-1bzf3lsd2i] {
  flex: 0 0 8rem;
  text-align: right;
  font-size: .8125rem;
  color: var(--rz-text-secondary-color, #5c6a78);
  overflow-wrap: anywhere;
}

/* The width cap comes from the shared wi_* classes in app.css, via --fieldw. */
.tel-input[b-1bzf3lsd2i] {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(var(--fieldw, 100%), 100%);
}

/* Client ids, secrets and redirect URIs are long opaque strings; they take the rest. */
.tel-wide[b-1bzf3lsd2i] {
  flex: 1 1 12rem;
  max-width: 100%;
}

.tel-input[b-1bzf3lsd2i]  .rz-textbox,
.tel-input[b-1bzf3lsd2i]  .rz-password {
  width: 100%;
}

.tel-check[b-1bzf3lsd2i] {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .375rem;
}

.tel-check > label[b-1bzf3lsd2i] {
  font-size: .8125rem;
  line-height: 1.35;
}

.tel-intro[b-1bzf3lsd2i],
.tel-note[b-1bzf3lsd2i] {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--rz-text-secondary-color, #5c6a78);
  padding: .375rem 0;
}

/* Sits under the field it explains, indented to the field column so it reads as belonging to it. */
.tel-hint[b-1bzf3lsd2i] {
  font-size: .75rem;
  line-height: 1.4;
  color: var(--rz-text-secondary-color, #5c6a78);
  margin: 0 0 .625rem 8.5rem;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .tel-field > label[b-1bzf3lsd2i] {
    flex: 1 1 100%;
    text-align: left;
  }

  .tel-hint[b-1bzf3lsd2i] {
    margin-left: 0;
  }
}

.tel-hint code[b-1bzf3lsd2i] {
  font-size: .75rem;
  overflow-wrap: anywhere;
}

.tel-status[b-1bzf3lsd2i] {
  margin-bottom: .5rem;
}

.tel-ok[b-1bzf3lsd2i] {
  font-size: .8125rem;
  color: var(--rz-success, #10b981);
}

.tel-warn[b-1bzf3lsd2i] {
  font-size: .8125rem;
  color: var(--rz-warning-dark, #b45309);
}
/* /Components/Pages/Public/PayByCode.razor.rz.scp.css */
/* Shares the plain centred card of the anonymous payment page - see PayNowPublic.razor.css. Those
   rules are NOT reused directly: scoped CSS is per-component, so the shape is restated here rather
   than making one page depend on another page's stylesheet. */

.paynow-public[b-ofsj23yh27] {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 3rem;
}

.paynow-public-card[b-ofsj23yh27] {
  width: 100%;
  max-width: 28rem;
}

.paynow-public-title[b-ofsj23yh27] {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.paynow-code-help[b-ofsj23yh27] {
  margin-bottom: 1rem;
}

/* Wide-tracked and oversized: this is read out loud and typed by someone who cannot see it, so the
   digits have to be checkable at a glance against what they heard. */
.paynow-code-input[b-ofsj23yh27] {
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  margin-bottom: 1rem;
}

.paynow-code-submit[b-ofsj23yh27] {
  width: 100%;
}
/* /Components/Pages/Public/PayNowPublic.razor.rz.scp.css */
/* The anonymous payment page. Deliberately a single centred card on a plain ground: there is no
   navigation here by design, so the page should not pretend to be part of a portal. Most payers
   arrive from an SMS on a phone. */

.paynow-public[b-o0vucctlpv] {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 3rem;
}

.paynow-public-card[b-o0vucctlpv] {
  width: 100%;
  max-width: 46rem;
}

.paynow-public-title[b-o0vucctlpv] {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

/* The sign-in offer. Quiet - it sits beside the form and must never read as something the payer
   has to do first. */
[b-o0vucctlpv] .paynow-login-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rz-border-color, #dee2e6);
  border-radius: var(--rz-border-radius, 4px);
  font-size: 0.9rem;
  color: var(--rz-text-secondary-color, #6c757d);
}
/* /Components/Shared/Accounts/AccountStatusTimeline.razor.rz.scp.css */
.ast-empty[b-g3jjte3lj6] {
  color: var(--rz-text-secondary-color, #6c757d);
  font-style: italic;
  padding: 0.5rem 0.25rem;
}

.ast-panel[b-g3jjte3lj6] {
  background: var(--rz-base-50, #f8f9fa);
  border-radius: 10px;
  padding: 14px 0 10px;
}

/* The one intentional horizontal scroll region: content (node count * fixed width) can exceed the
   panel, so a native scrollbar appears; there is no vertical scroll to conflict with it. */
.ast-scroll[b-g3jjte3lj6] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 16px 14px;
}

.ast-track[b-g3jjte3lj6] {
  display: flex;
  width: max-content;
}

.ast-node[b-g3jjte3lj6] {
  flex: 0 0 190px;
  position: relative;
}

.ast-rail[b-g3jjte3lj6] {
  position: relative;
  height: 20px;
}

/* The connecting line is drawn per-node and clipped at the first/last dot so consecutive segments
   meet exactly at the node boundary, forming one continuous line through every dot's center. */
.ast-rail[b-g3jjte3lj6]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rz-base-300, #dee2e6);
  transform: translateY(-50%);
}

.ast-node:first-child .ast-rail[b-g3jjte3lj6]::before {
  left: 50%;
}

.ast-node:last-child .ast-rail[b-g3jjte3lj6]::before {
  right: 50%;
}

.ast-dot[b-g3jjte3lj6] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rz-base-400, #9ca3af);
  box-shadow: 0 0 0 3px var(--rz-base-50, #f8f9fa);
  transform: translate(-50%, -50%);
}

.ast-dot-current[b-g3jjte3lj6] {
  width: 15px;
  height: 15px;
  background: var(--rz-primary, #0d6efd);
  box-shadow: 0 0 0 3px var(--rz-base-50, #f8f9fa), 0 0 0 5px rgba(13, 110, 253, 0.15);
}

/* Card background is the admin-configured AccountStatus color (a fixed Win32 color, not
   theme-aware), so its text uses fixed dark colors below rather than theme variables -- a
   theme-driven muted color could go light-on-light in dark mode against this fixed background. */
.ast-card[b-g3jjte3lj6] {
  margin: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--rz-base-100, #f1f3f5);
  padding: 10px 12px;
  min-height: 122px;
  position: relative;
}

.ast-card-current[b-g3jjte3lj6] {
  border: 2px solid var(--rz-primary, #0d6efd);
}

.ast-current-tag[b-g3jjte3lj6] {
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(13, 110, 253, 0.12);
  color: var(--rz-primary, #0d6efd);
  padding: 1px 8px;
  border-radius: 999px;
}

.ast-date[b-g3jjte3lj6] {
  font-size: 0.72rem;
  color: rgba(26, 26, 26, 0.6);
  margin-bottom: 5px;
}

.ast-transition[b-g3jjte3lj6] {
  font-size: 0.72rem;
  color: rgba(26, 26, 26, 0.6);
  margin-bottom: 2px;
}

.ast-created[b-g3jjte3lj6] {
  font-size: 0.72rem;
  color: rgba(26, 26, 26, 0.6);
  margin-bottom: 5px;
}

.ast-status-name[b-g3jjte3lj6] {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 5px;
}

.ast-meta[b-g3jjte3lj6] {
  font-size: 0.72rem;
  color: rgba(26, 26, 26, 0.6);
}

.ast-note[b-g3jjte3lj6] {
  font-size: 0.72rem;
  color: rgba(26, 26, 26, 0.75);
  margin-top: 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ast-hint[b-g3jjte3lj6] {
  font-size: 0.75rem;
  color: var(--rz-text-secondary-color, #6c757d);
  margin-top: 6px;
}
/* /Components/Shared/Accounts/HardshipScenarioDialog.razor.rz.scp.css */
/* Hardship Scenarios dialog. The three state colors are the Windows app's cell back colors
   (LightBlue / LightGreen / LightPink), named by the legend the screen itself shows. */

.hsd-top[b-9tz2xo8uj8] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: .75rem;
}

.hsd-budget[b-9tz2xo8uj8] {
  border: 1px solid var(--rz-border-color);
  border-radius: 4px;
  padding: .25rem .75rem .5rem;
  margin: 0;
}

  .hsd-budget legend[b-9tz2xo8uj8] {
    font-size: .8rem;
    font-weight: 600;
    padding: 0 .35rem;
    width: auto;
    margin: 0;
  }

  .hsd-budget div[b-9tz2xo8uj8] {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: .85rem;
    line-height: 1.5;
  }

.hsd-budget-remaining[b-9tz2xo8uj8] {
  border-top: 1px solid var(--rz-border-color);
  margin-top: .25rem;
  padding-top: .25rem;
}

.hsd-legend[b-9tz2xo8uj8] {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .85rem;
}

  .hsd-legend div[b-9tz2xo8uj8] {
    display: flex;
    align-items: center;
    gap: .4rem;
  }

.hsd-swatch[b-9tz2xo8uj8] {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--rz-border-color);
}

.hsd-level[b-9tz2xo8uj8] {
  margin-left: auto;
  text-align: right;
  font-size: .9rem;
}

.hsd-level-new[b-9tz2xo8uj8] {
  color: var(--rz-success, #2e7d32);
}

.hsd-gridwrap[b-9tz2xo8uj8] {
  overflow: auto;
  max-height: 55vh;
  border: 1px solid var(--rz-border-color);
}

.hsd-grid[b-9tz2xo8uj8] {
  border-collapse: collapse;
  width: 100%;
  font-size: .85rem;
}

  .hsd-grid th[b-9tz2xo8uj8],
  .hsd-grid td[b-9tz2xo8uj8] {
    border: 1px solid var(--rz-border-color);
    padding: 3px 8px;
    white-space: nowrap;
  }

  .hsd-grid thead th[b-9tz2xo8uj8] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--rz-base-background-color, #fff);
    font-weight: 600;
  }

  /* Both footer rows stay in view while the accounts scroll. The row height is pinned so the
     totals line can be offset by exactly one row and sit on top of the overage line rather than
     over it - a footer row measured by its content would drift. */
  .hsd-grid tfoot td[b-9tz2xo8uj8] {
    position: sticky;
    bottom: 0;
    height: 1.5rem;
    line-height: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--rz-base-background-color, #fff);
    font-weight: 600;
  }

.hsd-grid tfoot tr.hsd-totals td[b-9tz2xo8uj8] {
  bottom: 1.5rem;
}

.hsd-text[b-9tz2xo8uj8] {
  text-align: left;
}

.hsd-num[b-9tz2xo8uj8] {
  text-align: right;
}

.hsd-center[b-9tz2xo8uj8] {
  text-align: center;
}

/* Fee and fund-accumulation lines are calculated, not chosen: no state colors, no clicking. */
.hsd-nonaccount td[b-9tz2xo8uj8] {
  font-style: italic;
  color: var(--rz-text-secondary-color, #555);
}

.hsd-clickable[b-9tz2xo8uj8] {
  cursor: pointer;
}

  .hsd-clickable:hover[b-9tz2xo8uj8] {
    outline: 2px solid var(--rz-primary, #1976d2);
    outline-offset: -2px;
  }

.hsd-current[b-9tz2xo8uj8] {
  background-color: #add8e6; /* LightBlue - the level in force today */
}

.hsd-selected[b-9tz2xo8uj8] {
  background-color: #90ee90; /* LightGreen - the pending change */
}

.hsd-notallowed[b-9tz2xo8uj8] {
  background-color: #ffb6c1; /* LightPink - the creditor does not allow it */
}

/* A tier header carries the same two states as its cells. These have to out-specify the sticky
   header's own background above, which would otherwise paint straight over them. */
.hsd-grid thead th.hsd-current[b-9tz2xo8uj8] {
  background-color: #add8e6;
}

.hsd-grid thead th.hsd-selected[b-9tz2xo8uj8] {
  background-color: #90ee90;
}

.hsd-short[b-9tz2xo8uj8] {
  color: #d32f2f;
}

.hsd-footer[b-9tz2xo8uj8] {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .75rem;
}
/* /Components/Shared/Appointments/AppointmentDetailDialog.razor.rz.scp.css */
/* Detail dialog. The grouping box stands in for the desktop's GroupBox around the facts that only a
   reschedule can change, so the read-only half of the form reads as deliberate rather than broken. */

.appt-detail-section[b-9pkciv7rys] {
  border: 1px solid var(--rz-border, #dee2e6);
  border-radius: 4px;
  padding: 0.75rem 1rem 1rem;
  margin: 0;
  min-width: 0;
}

.appt-detail-legend[b-9pkciv7rys] {
  font-size: 0.875rem;
  font-weight: 600;
  width: auto;
  padding: 0 0.4rem;
  margin-bottom: 0;
}
/* /Components/Shared/Appointments/AppointmentsManagerView.razor.rz.scp.css */
.appt-userlist[b-icpetp306n] {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.appt-datepicker[b-icpetp306n] {
  width: 9.5rem;
}

.appt-recent[b-icpetp306n] {
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.8125rem;
}
/* /Components/Shared/Appointments/BookAppointmentDialog.razor.rz.scp.css */
/* Booking dialog. Grouping boxes stand in for the desktop's GroupBox controls so the availability
   search and the resulting date/time read as two steps rather than one long form. */

.appt-book-section[b-mlzdq4ks81] {
  border: 1px solid var(--rz-border, #dee2e6);
  border-radius: 4px;
  padding: 0.75rem 1rem 1rem;
  margin: 0;
  min-width: 0;
}

.appt-book-legend[b-mlzdq4ks81] {
  font-size: 0.875rem;
  font-weight: 600;
  width: auto;
  padding: 0 0.4rem;
  margin-bottom: 0;
}

/* The availability grid is the one part that can outgrow a narrow dialog, so it scrolls inside
   itself rather than pushing the dialog wide. */
.appt-book-grid[b-mlzdq4ks81] {
  max-width: 100%;
  overflow-x: auto;
}
/* /Components/Shared/Appointments/Day/CSDayView.razor.rz.scp.css */
.csday[b-ev64hzddpr] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.8125rem;
}

.csday-headrow[b-ev64hzddpr] {
  display: flex;
  background: var(--rz-base-200, #f1f3f5);
  border-bottom: 1px solid var(--rz-base-300, #dee2e6);
}

.csday-gutter[b-ev64hzddpr] {
  flex: 0 0 62px;
  border-right: 1px solid var(--rz-base-300, #dee2e6);
}

.csday-gutter-head[b-ev64hzddpr] {
  height: 30px;
}

.csday-colhead[b-ev64hzddpr] {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--rz-base-300, #dee2e6);
}

.csday-colhead:last-child[b-ev64hzddpr] {
  border-right: none;
}

.csday-scroll[b-ev64hzddpr] {
  overflow-y: auto;
}

.csday-body[b-ev64hzddpr] {
  display: flex;
  position: relative;
}

.csday-time[b-ev64hzddpr] {
  padding-right: 0.4rem;
  text-align: right;
  color: var(--rz-text-secondary-color, #6c757d);
  font-size: 0.6875rem;
  line-height: 1;
}

.csday-col[b-ev64hzddpr] {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  border-right: 1px solid var(--rz-base-300, #dee2e6);
}

.csday-col:last-child[b-ev64hzddpr] {
  border-right: none;
}

.csday-slot[b-ev64hzddpr] {
  border-bottom: 1px dotted var(--rz-base-300, #dee2e6);
}

/* The on-the-hour line is solid so half-hour slots read as subdivisions. */
.csday-slot-hour[b-ev64hzddpr] {
  border-top: 1px solid var(--rz-base-400, #ced4da);
}

/* A block is a <button> so it is focusable and openable from the keyboard, which the desktop's canvas
   is not. The button defaults have to be reset back to what the div looked like. */
.csday-block[b-ev64hzddpr] {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  overflow: hidden;
  padding: 1px 3px 1px 0;
  border: 1px solid var(--rz-base-500, #adb5bd);
  border-radius: 2px;
  line-height: 1.15;
  cursor: pointer;
  font: inherit;
  text-align: left;
  appearance: none;
}

.csday-block:focus-visible[b-ev64hzddpr] {
  outline: 2px solid var(--rz-primary, #0d6efd);
  outline-offset: -2px;
}

.csday-bar[b-ev64hzddpr] {
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: 1px;
}

.csday-text[b-ev64hzddpr] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* /Components/Shared/Appointments/GroupSessionSetupView.razor.rz.scp.css */
.gss-user[b-rjlg4zpkdh] {
  width: 15rem;
}

.gss-location[b-rjlg4zpkdh] {
  width: 12rem;
}

.gss-type[b-rjlg4zpkdh] {
  width: 14rem;
}

.gss-datepicker[b-rjlg4zpkdh] {
  width: 9.5rem;
}

.gss-delete-box[b-rjlg4zpkdh] {
  width: 200px;
}

.gss-rows[b-rjlg4zpkdh] {
  max-height: 640px;
  overflow-y: auto;
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: 4px;
  font-size: 0.8125rem;
}
/* /Components/Shared/Appointments/Timeline/CSTimelineView.razor.rz.scp.css */
.cstl-scroll[b-w0c20ba10j] {
  overflow: auto;
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: 4px;
  font-size: 0.8125rem;
}

/* The track is wider than the viewport by exactly (whole day / working day), so the working day
   fills the visible area at the desktop's column density and the rest of the day is a scroll away.
   The percentage resolves against the scroll container's content box, which is the visible width -
   that is what makes this work without measuring anything in JavaScript. */
.cstl-track[b-w0c20ba10j] {
  width: calc(var(--cstl-res-w) + (100% - var(--cstl-res-w)) * var(--cstl-ratio));
  min-width: 100%;
}

.cstl-row[b-w0c20ba10j] {
  display: flex;
  border-bottom: 1px solid var(--rz-base-300, #dee2e6);
}

.cstl-row:last-child[b-w0c20ba10j] {
  border-bottom: none;
}

.cstl-headrow[b-w0c20ba10j] {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 26px;
  background: var(--rz-base-200, #f1f3f5);
}

.cstl-res[b-w0c20ba10j] {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 var(--cstl-res-w);
  width: var(--cstl-res-w);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0 0.4rem;
  background: var(--rz-base-100, #fff);
  border-right: 1px solid var(--rz-base-300, #dee2e6);
  overflow: hidden;
}

.cstl-headrow .cstl-res[b-w0c20ba10j] {
  z-index: 4;
  background: var(--rz-base-200, #f1f3f5);
  font-weight: 600;
}

.cstl-res-group[b-w0c20ba10j] {
  border: none;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  background: var(--rz-base-200, #f1f3f5);
}

.cstl-row-location[b-w0c20ba10j] {
  background: var(--rz-base-200, #f1f3f5);
}

.cstl-caret[b-w0c20ba10j] {
  flex: 0 0 auto;
  font-size: 0.7rem;
}

/* TimeLineUserOrientation = 0: the desktop rotates its owner header text. */
.cstl-vertical-heads .cstl-res span[b-w0c20ba10j] {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.cstl-lane[b-w0c20ba10j] {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.cstl-colhead[b-w0c20ba10j],
.cstl-slot[b-w0c20ba10j] {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px dotted var(--rz-base-300, #dee2e6);
}

.cstl-colhead[b-w0c20ba10j] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--rz-text-color, #212529);
  overflow: hidden;
  white-space: nowrap;
  border-left: 1px solid var(--rz-base-400, #ced4da);
  border-right: none;
}

/* The on-the-hour boundary is solid so the half-hour slot reads as its subdivision. */
.cstl-slot-hour[b-w0c20ba10j] {
  border-left: 1px solid var(--rz-base-400, #ced4da);
}

/* As on the Day view, a block is a <button> so it can be reached and opened from the keyboard; the
   button defaults are reset back to the div's appearance. */
.cstl-block[b-w0c20ba10j] {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  overflow: hidden;
  padding: 0 2px 0 0;
  border: 1px solid var(--rz-base-500, #adb5bd);
  border-radius: 2px;
  line-height: 1.1;
  cursor: pointer;
  font: inherit;
  text-align: left;
  appearance: none;
}

.cstl-block:focus-visible[b-w0c20ba10j] {
  outline: 2px solid var(--rz-primary, #0d6efd);
  outline-offset: -2px;
}

.cstl-bar[b-w0c20ba10j] {
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: 1px;
}

.cstl-text[b-w0c20ba10j] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* /Components/Shared/Appointments/WorkingHoursView.razor.rz.scp.css */
.wh-user[b-2gnt5z6m5o] {
  width: 16rem;
}

.wh-location[b-2gnt5z6m5o] {
  width: 13rem;
}

.wh-datepicker[b-2gnt5z6m5o] {
  width: 9.5rem;
}

.wh-rows[b-2gnt5z6m5o] {
  max-height: 640px;
  overflow-y: auto;
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: 4px;
  font-size: 0.8125rem;
}
/* /Components/Shared/Appointments/WorkingHoursWeekView.razor.rz.scp.css */
.cswh[b-60niirbvye] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.8125rem;
}

.cswh-headrow[b-60niirbvye] {
  display: flex;
  background: var(--rz-base-200, #f1f3f5);
  border-bottom: 1px solid var(--rz-base-300, #dee2e6);
}

.cswh-gutter[b-60niirbvye] {
  flex: 0 0 62px;
  border-right: 1px solid var(--rz-base-300, #dee2e6);
}

.cswh-gutter-head[b-60niirbvye] {
  height: 30px;
}

.cswh-colhead[b-60niirbvye] {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--rz-base-300, #dee2e6);
}

.cswh-colhead:last-child[b-60niirbvye] {
  border-right: none;
}

/* The desktop grays out past days on its mini calendar (GrayOutPastDays); the header is where this
   grid can say the same thing. */
.cswh-past[b-60niirbvye] {
  color: var(--rz-text-disabled-color, #adb5bd);
  font-weight: 400;
}

.cswh-scroll[b-60niirbvye] {
  overflow-y: auto;
}

.cswh-body[b-60niirbvye] {
  display: flex;
  position: relative;
}

.cswh-time[b-60niirbvye] {
  padding-right: 0.4rem;
  text-align: right;
  color: var(--rz-text-secondary-color, #6c757d);
  font-size: 0.6875rem;
  line-height: 1;
}

.cswh-col[b-60niirbvye] {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  border-right: 1px solid var(--rz-base-300, #dee2e6);
}

.cswh-col:last-child[b-60niirbvye] {
  border-right: none;
}

.cswh-slot[b-60niirbvye] {
  border-bottom: 1px dotted var(--rz-base-300, #dee2e6);
}

/* The on-the-hour line is solid so half-hour slots read as subdivisions. */
.cswh-slot-hour[b-60niirbvye] {
  border-top: 1px solid var(--rz-base-400, #ced4da);
}

/* A block is a <button> so it is focusable and openable from the keyboard, which the desktop's canvas
   is not. The button defaults have to be reset back to what the div looked like. */
.cswh-block[b-60niirbvye] {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  overflow: hidden;
  padding: 1px 3px 1px 0;
  border: 1px solid var(--rz-base-500, #adb5bd);
  border-radius: 2px;
  line-height: 1.15;
  cursor: pointer;
  font: inherit;
  text-align: left;
  appearance: none;
}

.cswh-block:focus-visible[b-60niirbvye] {
  outline: 2px solid var(--rz-primary, #0d6efd);
  outline-offset: -2px;
}

.cswh-bar[b-60niirbvye] {
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: 1px;
}

.cswh-text[b-60niirbvye] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* /Components/Shared/Budget/BudgetEditor.razor.rz.scp.css */
/*
  CustomerMode (/mybudget) phone layout. Staff hosts never carry .budget-row, so nothing here
  can reach the counselor's screens.

  The problem this solves, measured in the browser at 375px: an amount box (120px) plus a
  cadence dropdown (130px) plus the row indent leaves the label under 100px, and Bootstrap's
  text-truncate then renders BOTH income rows as "Net Pay (tak..." - two different rows the
  consumer cannot tell apart. Widening the label is not enough on its own, because the two
  controls already shrink below their stated widths at that size.

  So below the Bootstrap sm breakpoint the row WRAPS: the label takes a full line of its own and
  the amount and cadence share the line underneath. The inline widths on the Radzen controls need
  !important because they are set as inline styles on the component root; ::deep because that root
  belongs to RadzenNumeric/RadzenDropDown and so never carries this component's scope attribute.
*/
@media (max-width: 575.98px) {
  .budget-row[b-sitzdsru5u] {
    flex-wrap: wrap;
  }

  /* The label claims the whole first line, so it is read in full rather than truncated. */
  .budget-row > span.flex-grow-1[b-sitzdsru5u] {
    flex: 1 0 100%;
    white-space: normal;
  }

  .budget-row[b-sitzdsru5u]  .rz-numeric,
  .budget-row[b-sitzdsru5u]  .rz-dropdown {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }
}
/* /Components/Shared/Chat/ChatDock.razor.rz.scp.css */
.chatdock-launcher[b-kz13ozls9a] {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1050;
  border-radius: 2rem;
  padding: 0.6rem 1.1rem;
}

.chatdock-panel[b-kz13ozls9a] {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  width: min(400px, calc(100vw - 2rem));
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #dee2e6;
}

/* Expanded: docked to the whole right side of the browser (an overlay - the page does not
   reflow), full height, wider column so long messages read comfortably. */
.chatdock-panel.chatdock-expanded[b-kz13ozls9a] {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  height: 100vh;
  width: min(480px, 92vw);
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}

.chatdock-bar[b-kz13ozls9a] {
  background: #0d6efd;
  color: #fff;
}

.chatdock-bar button[b-kz13ozls9a] {
  text-decoration: none;
  font-weight: bold;
}

/* The FontAwesome duotone icons have fixed navy/gray fills (not currentColor), so a plain
   button on the blue bar would leave them hard to see - a light chip keeps them legible. */
.chatdock-icon-btn[b-kz13ozls9a] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.chatdock-icon-btn:hover[b-kz13ozls9a] {
  background: #fff;
}

/* ::deep required - SvgIcon renders the <i>/<svg> outside this component's markup, so an
   unscoped-looking rule would compile to ".chatdock-icon[b-xxxxx]" and never match. */
.chatdock[b-kz13ozls9a]  .chatdock-icon {
  width: 15px;
  height: 15px;
  display: block;
}

.chatdock[b-kz13ozls9a]  .chatdock-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* /Components/Shared/Chat/ChatRatingPrompt.razor.rz.scp.css */
.chatroom-rating[b-9zj2lh0srx] {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
}

.chatroom-star[b-9zj2lh0srx] {
  font-size: 1.4rem;
  line-height: 1;
  color: #ced4da;
  cursor: pointer;
  padding: 0 0.05rem;
}

.chatroom-star.on[b-9zj2lh0srx] {
  color: #ffc107;
}
/* /Components/Shared/Chat/ChatRoom.razor.rz.scp.css */
.chatroom[b-new1wsx6tl] {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
  position: relative; /* anchors the authentication overlay */
}

.chatroom-auth-overlay[b-new1wsx6tl] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.chatroom-auth-dialog[b-new1wsx6tl] {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  width: min(340px, calc(100% - 2rem));
}

.chatroom-header[b-new1wsx6tl] {
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
}

.chatroom-messages[b-new1wsx6tl] {
  overflow-y: auto;
  background: #fdfdfd;
}

.chatroom-datesep[b-new1wsx6tl] {
  text-align: center;
  margin: 0.75rem 0 0.5rem;
  color: #6c757d;
  font-size: 0.75rem;
  position: relative;
}

.chatroom-datesep span[b-new1wsx6tl] {
  background: #f1f3f5;
  border-radius: 1rem;
  padding: 0.1rem 0.75rem;
}

.chatroom-handoff[b-new1wsx6tl] {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.35rem 0;
  font-size: 0.85rem;
}

.chatroom-handoff-title[b-new1wsx6tl] {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.chatroom-info[b-new1wsx6tl] {
  text-align: center;
  color: #6c757d;
  font-size: 0.8rem;
  margin: 0.35rem 0;
  white-space: pre-wrap;
}

.chatroom-row[b-new1wsx6tl] {
  display: flex;
  margin: 0.25rem 0;
}

.chatroom-row.mine[b-new1wsx6tl] {
  justify-content: flex-end;
}

.chatroom-row.theirs[b-new1wsx6tl] {
  justify-content: flex-start;
}

.chatroom-bubble[b-new1wsx6tl] {
  max-width: 75%;
  padding: 0.4rem 0.75rem;
  border-radius: 1rem;
  background: #e9ecef;
}

.chatroom-row.mine .chatroom-bubble[b-new1wsx6tl] {
  background: #cfe2ff;
  border-bottom-right-radius: 0.25rem;
}

.chatroom-row.theirs .chatroom-bubble[b-new1wsx6tl] {
  border-bottom-left-radius: 0.25rem;
}

.chatroom-caption[b-new1wsx6tl] {
  font-size: 0.68rem;
  color: #6c757d;
  margin-bottom: 0.1rem;
}

.chatroom-text[b-new1wsx6tl] {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
}

.chatroom-input[b-new1wsx6tl] {
  border-top: 1px solid #dee2e6;
  background: #f8f9fa;
  /* the textarea grows upward-looking; keep the buttons pinned to the bottom row */
  align-items: flex-end;
}

.chatroom-textarea[b-new1wsx6tl] {
  resize: none;
  overflow-y: hidden; /* iccoChatInitInput flips to auto when the 1/3-height cap is hit */
  min-height: calc(1.5em + 0.75rem + 2px); /* single-line form-control height */
}

/* compact AI mode dropdown in the header */
.chatroom-aimode[b-new1wsx6tl] {
  width: auto;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  font-size: 0.8rem;
}

/* FontAwesome Pro duotone icons (Download / Leave / Send / Attach / AI bot / Instant Help).

   ::deep is required, not cosmetic. These are rendered by SvgIcon, which inlines the file as
   <svg> inside <i class="fa-icon-v7 chatroom-icon"> so that app.css can drive the two tones -
   impossible through an <img>. Neither the <i> nor the <svg> is part of THIS component's markup,
   so a plain ".chatroom-icon" rule compiles to ".chatroom-icon[b-xxxxx]" and matches nothing,
   leaving the icons unsized and invisible. Anchoring on .chatroom (which IS in this component)
   and reaching in with ::deep gives both elements a rule that applies. Same trap as the one
   documented in SettingsExplorer.razor.css. */
.chatroom[b-new1wsx6tl]  .chatroom-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.chatroom[b-new1wsx6tl]  .chatroom-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.chatroom-icon-btn[b-new1wsx6tl] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chatroom[b-new1wsx6tl]  .chatroom-icon-busy {
  opacity: 0.4;
}

/* The bot icon sits inline with the sender's name in the message caption - override the
   block display (meant for standalone header buttons) so it doesn't break onto its own line. */
.chatroom[b-new1wsx6tl]  .chatroom-caption-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: text-bottom;
}

/* pending AI draft awaiting counselor review (same visual family as the handoff card) */
.chatroom-draft[b-new1wsx6tl] {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

.chatroom-draft-title[b-new1wsx6tl] {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* three bouncing dots */
.chatroom-typing span[b-new1wsx6tl] {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 1.5px;
  border-radius: 50%;
  background: #adb5bd;
  animation: chatroom-bounce-b-new1wsx6tl 1.2s infinite;
}

.chatroom-typing span:nth-child(2)[b-new1wsx6tl] {
  animation-delay: 0.15s;
}

.chatroom-typing span:nth-child(3)[b-new1wsx6tl] {
  animation-delay: 0.3s;
}

@keyframes chatroom-bounce-b-new1wsx6tl {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}
/* /Components/Shared/Chat/ChatWatcher.razor.rz.scp.css */
.chatwatcher-launcher[b-llpql3ffib] {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1050;
  border-radius: 2rem;
  padding: 0.6rem 1.1rem;
}

.chatwatcher-panel[b-llpql3ffib] {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  width: min(400px, calc(100vw - 2rem));
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #dee2e6;
}

/* Expanded: docked to the whole right side of the browser (overlay, no page reflow) so long
   messages read comfortably - same affordance as the public ChatDock. */
.chatwatcher-panel.chatwatcher-expanded[b-llpql3ffib] {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  height: 100vh;
  width: min(480px, 92vw);
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}

.chatwatcher-bar[b-llpql3ffib] {
  background: #198754;
  color: #fff;
}

.chatwatcher-bar button[b-llpql3ffib] {
  text-decoration: none;
  font-weight: bold;
}

/* The FontAwesome duotone icons have fixed navy/gray fills (not currentColor), so a plain
   button on the green bar would leave them hard to see - a light chip keeps them legible. */
.chatwatcher-icon-btn[b-llpql3ffib] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.chatwatcher-icon-btn:hover[b-llpql3ffib] {
  background: #fff;
}

/* ::deep required - SvgIcon renders the <i>/<svg> outside this component's markup, so an
   unscoped-looking rule would compile to ".chatwatcher-icon[b-xxxxx]" and never match. */
.chatwatcher-panel[b-llpql3ffib]  .chatwatcher-icon {
  width: 15px;
  height: 15px;
  display: block;
}

.chatwatcher-panel[b-llpql3ffib]  .chatwatcher-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Launcher sits on the green success button; the duotone icon's fixed bluegray fills would be
   low-contrast directly on green, so it rides in the same light chip the bar icons use.
   Now that the tones come from CSS this chip is no longer forced - overriding
   --fa-primary-color / --fa-secondary-color here would let the icon sit straight on the green.
   Left as-is deliberately: that is a visual design change, not part of wiring up the mechanism. */
.chatwatcher-launcher[b-llpql3ffib]  .chatwatcher-launcher-icon {
  width: 18px;
  height: 18px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.chatwatcher-launcher[b-llpql3ffib]  .chatwatcher-launcher-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* /Components/Shared/Checklist/ChecklistRow.razor.rz.scp.css */
/* The shared check list row. Lifted verbatim out of IssueChecklistCard.razor.css when the debtor
   check list needed the same row (port plan P4); that card keeps only the rules for markup it still
   renders itself - the ghost "Add item..." row, the "added here" chip and the attached-file chip.

   A check list is a list, so it is laid out as one: a fixed checkbox column, a flexible middle, and
   an action cluster that only appears when the row is being used. */

.checklist-row[b-3ybrq7ie0r] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem;
  border-bottom: 1px solid var(--rz-base-200, #eee);
}

.checklist-row:last-child[b-3ybrq7ie0r] {
  border-bottom: none;
}

.checklist-row:hover[b-3ybrq7ie0r] {
  background: var(--rz-base-100, #fafafa);
}

/* A required item still outstanding is the reason the record shows a warning, so it is marked on the
   row as well as counted in the header. */
.checklist-row-blocking[b-3ybrq7ie0r] {
  box-shadow: inset 3px 0 0 0 var(--rz-warning, #f0ad4e);
}

.checklist-main[b-3ybrq7ie0r] {
  flex: 1 1 auto;
  min-width: 0;          /* lets long descriptions wrap instead of pushing the actions off the row */
  padding-top: 0.15rem;
  line-height: 1.35;
}

.checklist-done[b-3ybrq7ie0r] {
  text-decoration: line-through;
  color: var(--rz-text-tertiary-color, #888);
}

.checklist-required[b-3ybrq7ie0r] {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 0.6rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  vertical-align: 0.08rem;
  background: var(--rz-warning-lighter, #fdf3e3);
  color: var(--rz-warning-dark, #8a6d3b);
}

.checklist-meta[b-3ybrq7ie0r] {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--rz-text-tertiary-color, #888);
  white-space: nowrap;
}

/* The action cluster. VISIBILITY, never display:none - a keyboard user tabbing through the row must
   be able to reach these, and :focus-within is what brings them back for that. Doing the reveal in
   CSS rather than with an @onmouseover handler also keeps the circuit out of pointer moves. */
.checklist-actions[b-3ybrq7ie0r] {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease-in-out;
}

.checklist-row:hover .checklist-actions[b-3ybrq7ie0r],
.checklist-row:focus-within .checklist-actions[b-3ybrq7ie0r] {
  visibility: visible;
  opacity: 1;
}

/* Touch has no hover, so the actions would be unreachable. Show them permanently there. */
@media (hover: none) {
  .checklist-actions[b-3ybrq7ie0r] {
    visibility: visible;
    opacity: 1;
  }
}
/* /Components/Shared/ContactPlan/ContactPlanRowActionsDialog.razor.rz.scp.css */
.cp-row-actions-head[b-yvzri8xtqj] {
  margin-bottom: 12px;
}

.cp-row-actions-list[b-yvzri8xtqj] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* /Components/Shared/ContactPlan/ContactPlanView.razor.rz.scp.css */
.cp-card[b-xgaawk1us5] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-head[b-xgaawk1us5] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The picker and its buttons wrap rather than scroll: this card sits inside the record workspace,
   which is already narrow beside the internal + nested menus. */
.cp-picker[b-xgaawk1us5] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cp-progress[b-xgaawk1us5] {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Without a min-width of 0 the bar's flex item refuses to shrink and pushes the card wide. */
  min-width: 0;
}
/* /Components/Shared/Controls/CSEditableGrid.razor.rz.scp.css */
.cseditablegrid[b-19ur70u9d4] {
  border: 1px solid var(--rz-base-300, #ddd);
  border-radius: 4px;
}

.cseditablegrid-table[b-19ur70u9d4] {
  width: 100%;
  border-collapse: collapse;
}

.cseditablegrid-table th[b-19ur70u9d4] {
  background-color: var(--rz-base-100, #f4f4f4);
  text-align: left;
  padding: 0.4rem 0.5rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--rz-base-300, #ddd);
}

.cseditablegrid-multiline .cseditablegrid-table th[b-19ur70u9d4] {
  white-space: normal;
}

.cseditablegrid-table td[b-19ur70u9d4] {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--rz-base-200, #eee);
  vertical-align: middle;
}

.cseditablegrid-input[b-19ur70u9d4] {
  width: 100%;
}

.cseditablegrid-actions[b-19ur70u9d4] {
  width: 42px;
  text-align: center;
}

.cseditablegrid-footer[b-19ur70u9d4] {
  margin-top: 0.4rem;
}
/* /Components/Shared/Controls/CSFilterBar.razor.rz.scp.css */
/* The potential-filters panel is hidden until the bar is hovered (pure CSS so it also
   stays open while the pointer is anywhere inside it, editor included) or forced open
   (pinned via the Filter button, or an editor is active). */
.csfilterbar-panel[b-6oljfu4kju] {
  display: none;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: 0.5rem;
  background: var(--rz-base-50, #f8f9fa);
}

.csfilterbar:hover .csfilterbar-panel[b-6oljfu4kju],
.csfilterbar-open .csfilterbar-panel[b-6oljfu4kju] {
  display: block;
}

.csfilterbar-group[b-6oljfu4kju] {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.csfilterbar-group + .csfilterbar-group[b-6oljfu4kju] {
  margin-top: 0.5rem;
}

.csfilterbar-group-title[b-6oljfu4kju] {
  min-width: 160px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rz-text-secondary-color, #6c757d);
}

/* Shared chip look: small rounded rectangles */
.csfilterbar-chip[b-6oljfu4kju] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* Potential filters: outlined, subtle */
.csfilterbar-chip-potential[b-6oljfu4kju] {
  border: 1px solid var(--rz-base-400, #ced4da);
  background: #fff;
  color: var(--rz-text-color, #212529);
}

.csfilterbar-chip-potential:hover[b-6oljfu4kju] {
  border-color: var(--rz-primary, #479cc8);
  color: var(--rz-primary, #479cc8);
}

/* Potential chip whose filter is currently applied */
.csfilterbar-chip-active[b-6oljfu4kju] {
  border-color: var(--rz-success, #4caf50);
  color: var(--rz-success, #4caf50);
  font-weight: 600;
}

/* Applied filters: filled chips next to the Filter button */
.csfilterbar-chip-applied[b-6oljfu4kju] {
  border: 1px solid var(--rz-success, #4caf50);
  background: var(--rz-success-lighter, #e8f5e9);
  color: var(--rz-text-color, #212529);
}

.csfilterbar-chip-x[b-6oljfu4kju] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rz-danger, #dc3545);
  cursor: pointer;
}

.csfilterbar-chip-x:hover[b-6oljfu4kju] {
  transform: scale(1.2);
}

.csfilterbar-chip-name[b-6oljfu4kju] {
  font-weight: 600;
}

.csfilterbar-chip-value[b-6oljfu4kju]::before {
  content: ": ";
  font-weight: 400;
}

.csfilterbar-editor[b-6oljfu4kju] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--rz-base-300, #dee2e6);
}

.csfilterbar-editor-label[b-6oljfu4kju] {
  font-weight: 600;
  font-size: 0.9rem;
}
/* /Components/Shared/Controls/CSGrid.razor.rz.scp.css */
.csgrid-toolbar[b-45xcyi3k70] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.csgrid-title[b-45xcyi3k70] {
  margin: 0;
}

/* Tabular/Card segmented view toggle: two flush icon buttons, the active view highlighted */
.csgrid-view-toggle[b-45xcyi3k70] {
  display: inline-flex;
  align-items: center;
}

.csgrid-view-toggle[b-45xcyi3k70]  .rz-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.csgrid-view-toggle[b-45xcyi3k70]  .rz-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* "this view/mode is on" highlight - the view toggle's active half, and the filter button while
   the filter row is showing */
.csgrid-header-buttons[b-45xcyi3k70]  .csgrid-view-active {
  background-color: var(--rz-base-300, #cbd5e1);
  box-shadow: inset 0 0 0 1px var(--rz-base-400, #94a3b8);
}

/* Grid header bar: the column picker collapses to an icon-only button on the LEFT and the
   toolbar controls (Card view / Export / Layout, rendered through HeaderTemplate) right-align.
   DOM order is custom-header -> group panel -> picker, so flex order re-arranges; a group
   panel stays in the middle-left, next to the picker. */
.csgrid[b-45xcyi3k70]  .rz-group-header {
  align-items: center;
}

.csgrid[b-45xcyi3k70]  .rz-column-picker {
  order: -1;
}

.csgrid[b-45xcyi3k70]  .rz-custom-header {
  order: 2;
  margin-left: auto;
}

.csgrid[b-45xcyi3k70]  .rz-column-picker .rz-dropdown {
  width: auto;
  min-width: 0;
  height: auto;
  border: none;
  background: transparent;
  box-shadow: none;
}

.csgrid[b-45xcyi3k70]  .rz-column-picker .rz-dropdown:hover {
  background-color: var(--rz-base-200, #e8e8e8);
  border-radius: 4px;
}

/* Hide the "X columns showing" text (kept for screen readers) and show the picker icon instead.

   MASK, not background-image. This is Radzen's own dropdown internals, so there is no markup of
   ours to hang an inlined SvgIcon on - but a background-image has the same defect as an <img>:
   the file's baked blue-over-grey is painted as-is and CSS cannot reach inside it, which is why
   this one icon stayed FontAwesome-blue after every other icon moved onto the theme.

   A mask uses only the SVG's alpha channel and paints it with background-color, so the glyph
   becomes a single solid tone that follows --app-icon-1 through both themes. Single-tone is the
   right call for a small toolbar affordance anyway; the duotone contract needs real markup. */
.csgrid[b-45xcyi3k70]  .rz-column-picker .rz-dropdown-label {
  width: 28px;
  height: 28px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background-color: var(--app-icon-1);
  -webkit-mask: url('assets/icons/grid-2-plus_bluegray.svg') center / 18px 18px no-repeat;
  mask: url('assets/icons/grid-2-plus_bluegray.svg') center / 18px 18px no-repeat;
}

.csgrid[b-45xcyi3k70]  .rz-column-picker .rz-dropdown:hover .rz-dropdown-label {
  background-color: var(--app-primary);
}

.csgrid[b-45xcyi3k70]  .rz-column-picker .rz-dropdown-trigger {
  display: none;
}

/* the a11y helper input is in-flow here and would stretch the dropdown back to text width */
.csgrid[b-45xcyi3k70]  .rz-column-picker .rz-helper-hidden-accessible {
  position: absolute;
}

.csgrid-header-buttons[b-45xcyi3k70] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.csgrid-header-buttons[b-45xcyi3k70]  .rz-button-icon-left {
  width: 18px;
  height: 18px;
}

/* The toolbar icons are SvgIcon now, not Radzen's Image= <img>, so that app.css can drive the two
   duotone tones. The rule above sizes the <i>; the inlined <svg> carries only a viewBox and needs
   its own size. Both sit outside this component's markup, hence ::deep. */
.csgrid-header-buttons[b-45xcyi3k70]  .rz-button-icon-left.fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.csgrid-header-buttons[b-45xcyi3k70]  .rz-button-icon-left.fa-icon-v7 svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* the split button main part renders an &nbsp; text span even without a Text */
.csgrid-header-buttons[b-45xcyi3k70]  .rz-splitbutton .rz-button-text {
  display: none;
}

/* the icon button opens the menu itself (AlwaysOpenPopup), so drop the chevron segment */
.csgrid-header-buttons[b-45xcyi3k70]  .rz-splitbutton-menubutton {
  display: none;
}

.csgrid-total-count[b-45xcyi3k70] {
  font-weight: 600;
}

.csgrid[b-45xcyi3k70]  .csgrid-command {
  cursor: pointer;
  white-space: nowrap;
  /* The command anchors carry no href (with one, they are live base-URL links whenever no
     handler is attached - prerender, circuit loss - and click navigates the page to "/").
     So the link affordance must not depend on global a[href] rules; the color comes from
     app.css's bare `a` rule. */
  text-decoration: underline;
}

.csgrid[b-45xcyi3k70]  .csgrid-check {
  color: var(--rz-success, #4caf50);
  font-size: 1.1rem;
}

.csgrid[b-45xcyi3k70]  .csgrid-donotuse {
  color: var(--rz-danger, #d32f2f);
  font-size: 1.1rem;
}

/* Small badge for indicator columns rendered through the "(h)" HTML convention
   (e.g. the debtor appointments grid's HUD column). */
.csgrid[b-45xcyi3k70]  .csgrid-hud-pill {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  background-color: #205493;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2rem;
  letter-spacing: 0.03em;
}

.csgrid[b-45xcyi3k70]  .csgrid-summary {
  font-weight: 600;
  white-space: nowrap;
}

/* Data-driven row colors (the backcolor/forecolor column convention) are set as an inline
   style on the tr; the theme paints an opaque background on every td which would hide them,
   so make cells transparent on rows that carry their own color. */
.csgrid[b-45xcyi3k70]  tr[style*="background-color"] > td {
  background-color: transparent !important;
}

/* ...and the forecolor half of the same pair has to be re-asserted on the cell CONTENT, because
   Radzen wraps every cell's value in <span class="rz-cell-data"> carrying an explicit
   color: var(--rz-grid-cell-color). An explicit color on the span beats the one it would inherit
   from the row, so the data's forecolor was never actually painted - invisibly, while the theme
   ink happened to be dark too. Under the dark theme that ink is light, which is what left a
   white AccountStatus row or a pastel credit-report row showing light text on a light fill.

   Keying off the inline background-color is safe because CSGridModel.BuildStyle never emits one
   half of the pair: an inline background-color always arrives with the color meant to sit on it. */
.csgrid[b-45xcyi3k70]  tr[style*="background-color"] > td .rz-cell-data,
.csgrid[b-45xcyi3k70]  td[style*="background-color"] .rz-cell-data {
  color: inherit;
}

/* Rule-based colorization classes, assigned through the *_cssclass column convention.
   Colors match the Windows app (CSControls.CSColors). */
/* The `tr >` prefix keeps these at the same specificity as the transparent override above,
   so being later in the file they win on rows that carry their own color. */
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-below-min {
  background-color: #ffb6c1 !important; /* CSColors.ColorBelowMinimum (LightPink) */
}

.csgrid[b-45xcyi3k70]  tr > td.cs-cell-invalid-mask,
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-invalid-mask a {
  color: var(--rz-danger, #d32f2f);
  text-decoration: underline;
}

.csgrid[b-45xcyi3k70]  tr > td.cs-cell-changed-fee {
  background-color: #ff0000 !important; /* fee changed from original (TrackFeeChanges) */
}

.csgrid[b-45xcyi3k70]  tr > td.cs-cell-warning {
  background-color: #ffff00 !important; /* CSColors.BackColorWarning (hardship level mismatch) */
}

/* These three fills come from the Windows palette and assume black text on them, which under the
   light theme is what the theme ink already was. Say it explicitly so the dark theme's light ink
   does not land on a pink/red/yellow cell - and let the cell CONTENT inherit it, for the same
   .rz-cell-data reason as the inline pair above. cs-cell-invalid-mask is here because its red was
   being swallowed by that span too; its color is a token, so it follows the theme by itself. */
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-below-min,
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-changed-fee,
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-warning {
  color: #000000;
}

.csgrid[b-45xcyi3k70]  tr > td.cs-cell-below-min .rz-cell-data,
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-changed-fee .rz-cell-data,
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-warning .rz-cell-data,
.csgrid[b-45xcyi3k70]  tr > td.cs-cell-invalid-mask .rz-cell-data {
  color: inherit;
}

/* Card view: each row displays as a card with "Header: value" lines (labels come from the
   data-label attribute set in CellRender). Two triggers share the same rules:
   - .csgrid-cards       always-on (user toggled the Card view checkbox, or >10 visible columns)
   - .csgrid-responsive  below the legacy 769px breakpoint only (gridstyle=0 equivalent) */
.csgrid-cards[b-45xcyi3k70]  .rz-grid-table thead {
  display: none;
}

.csgrid-cards[b-45xcyi3k70]  .rz-grid-table,
.csgrid-cards[b-45xcyi3k70]  .rz-grid-table tbody {
  display: block;
  width: 100% !important;
}

.csgrid-cards[b-45xcyi3k70]  .rz-grid-table tbody tr {
  display: block;
  border: 1px solid var(--rz-base-300, #ddd);
  border-radius: 6px;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.5rem;
}

.csgrid-cards[b-45xcyi3k70]  .rz-grid-table tbody tr td {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border: none;
  padding: 0.15rem 0.25rem;
  height: auto;
  text-align: left !important;
}

.csgrid-cards[b-45xcyi3k70]  .rz-grid-table tbody tr td:empty {
  display: none;
}

.csgrid-cards[b-45xcyi3k70]  .rz-grid-table tbody tr td[data-label]:not([data-label=""])::before {
  content: attr(data-label) ":";
  font-weight: 600;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .csgrid-responsive[b-45xcyi3k70]  .rz-grid-table thead {
    display: none;
  }

  .csgrid-responsive[b-45xcyi3k70]  .rz-grid-table,
  .csgrid-responsive[b-45xcyi3k70]  .rz-grid-table tbody {
    display: block;
    width: 100% !important;
  }

  .csgrid-responsive[b-45xcyi3k70]  .rz-grid-table tbody tr {
    display: block;
    border: 1px solid var(--rz-base-300, #ddd);
    border-radius: 6px;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.5rem;
  }

  .csgrid-responsive[b-45xcyi3k70]  .rz-grid-table tbody tr td {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    border: none;
    padding: 0.15rem 0.25rem;
    height: auto;
    text-align: left !important;
  }

  .csgrid-responsive[b-45xcyi3k70]  .rz-grid-table tbody tr td:empty {
    display: none;
  }

  .csgrid-responsive[b-45xcyi3k70]  .rz-grid-table tbody tr td[data-label]:not([data-label=""])::before {
    content: attr(data-label) ":";
    font-weight: 600;
    flex-shrink: 0;
  }
}
/* /Components/Shared/DebtorInteraction/DebtorInteractionView.razor.rz.scp.css */
/* Debtor Interaction — design tokens and rules ported from the interaction-ui-designs
   prototype (Alt-2 timeline cards + Style-2 task capsules + chat transcript pane). */

.workspace-grid[b-c8atvn68mb] {
  /* Design tokens (prototype light theme) */
  --font-primary: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  /* These arrived from the prototype as a FOURTH private palette - its own HSL ramp, its own
     blue highlight, none of it shared with the rest of the app. The names are kept (the whole
     file is written against them) but every value now resolves to the one palette in app.css,
     so this screen follows the theme instead of staying a light island on a dark page. */
  --bg-app: var(--app-ground);
  --bg-card: var(--app-surface);
  --bg-card-hover: var(--app-surface-2);
  --bg-sidebar: var(--app-surface-2);
  --text-main: var(--app-ink);
  --text-muted: var(--app-ink-2);
  --border-color: var(--app-rule);
  --shadow-sm: var(--app-shadow-card);
  --shadow-md: var(--app-shadow-card);
  --shadow-lg: var(--app-shadow-hover);

  /* The interaction TYPES stay distinguishable from one another - that is the point of the
     timeline - but they are now steps of the palette rather than three unrelated hues. */
  --color-chat: var(--app-primary);
  --color-chat-bg: var(--app-primary-softer);
  --color-message: var(--app-info);
  --highlight-blue: var(--app-primary);

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  /* Pin the single row to the container's height. Without this the implicit row is auto-sized
     to its content, grows past the height set here, and align-items:stretch then stretches the
     panels to that overgrown row — so their inner scrollers never engage and the whole column
     spills out of the component, scrolling the page instead. minmax(0, 1fr) also supplies the
     zero minimum the panels need in order to shrink. */
  grid-template-rows: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  /* Authoritative clip. Whatever a panel's internal sizing does, it can never extend past this
     box and grow the host page — the panels' own overflow-y:auto still gives them scrollbars.
     Measured on the real screen the grid was reporting scrollHeight 2638 against clientHeight
     863, i.e. ~1775px of content escaping and dragging a page scrollbar with it. */
  overflow: hidden;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.workspace-grid.show-chat-pane[b-c8atvn68mb] {
  grid-template-columns: 1.3fr 1.2fr 1fr;
}

.info-text[b-c8atvn68mb] {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

/* ------------------------------- timeline (left) ------------------------------ */

.timeline-container[b-c8atvn68mb] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  /* forces the feed below to take the leftover height and engage its own scrollbar, instead
     of the column growing to fit its content */
  overflow: hidden;
}

/* Sticky so the counts and the sort/filter controls stay reachable while a panel scrolls —
   and also when an outer app layout is the thing that scrolls rather than the panel. */
.timeline-header[b-c8atvn68mb],
.tasks-panel-header[b-c8atvn68mb] {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
  background-color: var(--bg-app);
}

.badge[b-c8atvn68mb] {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
}

/* ----------------------------- linking feedback ------------------------------ */

/* The base wrapper is static, so this is what gives the overlay a containing block - without it the
   overlay would size itself to the nearest positioned ancestor and cover far more than this card.
   Applied only while linking so the wrapper's normal stacking is untouched the rest of the time. */
.task-detail-card-wrapper.linking[b-c8atvn68mb] {
  position: relative;
}

.task-linking-overlay[b-c8atvn68mb] {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 12px;
  background-color: var(--app-surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--highlight-blue);
}

.task-linking-spinner[b-c8atvn68mb] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(59, 130, 246, 0.25);
  border-top-color: var(--highlight-blue);
  border-radius: 50%;
  animation: taskLinkingSpin-b-c8atvn68mb 0.7s linear infinite;
}

@keyframes taskLinkingSpin-b-c8atvn68mb {
  to { transform: rotate(360deg); }
}

/* A failed link used to take the circuit down; now it says so here and the screen survives. */
.link-error[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--app-danger);
  border-radius: 8px;
  background-color: var(--app-danger-soft);
  font-size: 0.75rem;
  color: var(--app-danger-ink);
}

.link-error-dismiss[b-c8atvn68mb] {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--app-danger-ink);
  cursor: pointer;
}

/* ------------------------------- debtor chip -------------------------------- */

/* Modelled on the task screen's linkage chip (IssueLinkageChips), whose styles are scoped to that
   component and so cannot be shared. Yellow-tinted rather than the timeline's blue so it reads as
   the record this screen is about, not as one more counter beside it. */
.debtor-chip[b-c8atvn68mb] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 22rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--app-warning);
  border-radius: 20px;
  background-color: var(--app-warning-soft);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.debtor-chip:hover[b-c8atvn68mb] {
  background-color: var(--app-warning-soft);
  border-color: var(--app-warning);
}

.debtor-chip:focus-visible[b-c8atvn68mb] {
  outline: 2px solid var(--highlight-blue);
  outline-offset: 1px;
}

.debtor-chip-icon[b-c8atvn68mb] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--app-warning-ink);
}

/* The name can be long; the id must never be the part that gets cut. */
.debtor-chip-text[b-c8atvn68mb] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debtor-chip-muted[b-c8atvn68mb] {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.count-badge[b-c8atvn68mb] {
  background: var(--app-primary-tint);
  color: var(--highlight-blue);
  white-space: nowrap;
}

.timeline-feed[b-c8atvn68mb] {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Fallback for when the fit script has not sized the screen (module blocked, or a host that
   gives the component no definite height): keeps each panel scrolling on its own instead of
   growing the page. Scoped to :not(.fitted) so it can never cut panel content short of a
   height the script has already measured exactly. */
.workspace-grid:not(.fitted) .timeline-feed[b-c8atvn68mb] {
  max-height: calc(100vh - 8rem);
}

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

.interaction-card[b-c8atvn68mb] {
  position: relative;
  transition: transform var(--transition-normal);
}

.interaction-card.draggable[b-c8atvn68mb] {
  cursor: grab;
}

/* chat-app stagger: debtor left, business/system right */
.interaction-card.orig-debtor[b-c8atvn68mb] {
  margin-right: 15%;
}

.interaction-card.orig-business[b-c8atvn68mb] {
  margin-left: 15%;
}

.card-body-alt2[b-c8atvn68mb] {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
}

/* asymmetric corner + thick side border on the originating side */
.interaction-card.orig-debtor .card-body-alt2[b-c8atvn68mb] {
  border-radius: 4px 16px 16px 16px;
  border-left: 4px solid var(--border-color);
}

.interaction-card.orig-business .card-body-alt2[b-c8atvn68mb] {
  border-radius: 16px 4px 16px 16px;
  border-right: 4px solid var(--border-color);
}

.interaction-card:hover .card-body-alt2[b-c8atvn68mb] {
  box-shadow: var(--shadow-md);
  border-color: var(--app-primary-light);
  transform: translateY(-1px);
}

/* JS cross-highlight (hover on the related task card) */
.interaction-card.highlighted-card[b-c8atvn68mb] {
  transform: scale(1.015);
}

.interaction-card.highlighted-card .card-body-alt2[b-c8atvn68mb] {
  border-color: var(--highlight-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), var(--shadow-md);
}

/* the note currently selected in the note-thread panel */
.interaction-card.note-selected .card-body-alt2[b-c8atvn68mb] {
  border-color: var(--highlight-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), var(--shadow-md);
}

/* transcript or thread open for this card */
.interaction-card.active-chat-card .card-body-alt2[b-c8atvn68mb] {
  border-color: var(--color-chat);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2), var(--shadow-md);
}

.card-header-row[b-c8atvn68mb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.card-header-actions[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.user-meta[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.inline-icon[b-c8atvn68mb] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.85;
}

.inline-icon.icon-action[b-c8atvn68mb] {
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.inline-icon.icon-action:hover[b-c8atvn68mb] {
  opacity: 1;
  transform: scale(1.12);
}

.sender-name[b-c8atvn68mb] {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-stamp[b-c8atvn68mb] {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.status-pill[b-c8atvn68mb] {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  background-color: var(--bg-sidebar);
  border: 1px solid var(--border-color);
}

.card-content[b-c8atvn68mb] {
  color: var(--text-main);
}

.summary-text[b-c8atvn68mb] {
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.summary-text.unread[b-c8atvn68mb] {
  font-weight: 700;
}

.card-footer-row[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.task-association[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.task-pills[b-c8atvn68mb] {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* One right-aligned group, however many badges a card ends up with. margin-left: auto rather than
   relying on the row's space-between, which only puts a single child on the right - a chat with
   both a transcript and notes would otherwise leave the transcript stranded mid-card. */
.card-footer-actions[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.task-pill[b-c8atvn68mb] {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  user-select: none;
}

.task-pill:hover[b-c8atvn68mb] {
  transform: scale(1.08);
  box-shadow: var(--shadow-sm);
}

.no-tasks-hint[b-c8atvn68mb] {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.chat-trigger-badge[b-c8atvn68mb] {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-chat);
  background-color: var(--color-chat-bg);
  border: 1px solid var(--color-chat);
  padding: 0.15rem 0.45rem;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.chat-trigger-badge:hover[b-c8atvn68mb] {
  background-color: var(--color-chat);
  color: var(--app-surface);
  transform: scale(1.05);
}

/* The note-thread badge deliberately reuses .chat-trigger-badge rather than having its own rule:
   both are the same "open this in the middle pane" affordance and should stay identical. */

/* ------------------------------ card actions menu ----------------------------- */

/* Muted at rest so a column of kebabs down a busy timeline stays quiet, full strength once
   the collector is on the card - and always full while its own menu is open. */
/* Pulled into the card's 20px padding. The 22px button wraps a 16px glyph, so left flush its icon
   would sit 3px further inset than the text below it and read as drifting inward; -6px lands the
   glyph 3px past the text column instead, which is what makes it look anchored to the edge. Well
   clear of the 12px corner radius, so the card's overflow:hidden never clips it. */
.card-menu-btn[b-c8atvn68mb] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: -0.375rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  opacity: 0.45;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.interaction-card:hover .card-menu-btn[b-c8atvn68mb],
.card-menu-btn:focus-visible[b-c8atvn68mb],
.card-menu-btn.open[b-c8atvn68mb] {
  opacity: 1;
}

.card-menu-btn:hover[b-c8atvn68mb],
.card-menu-btn.open[b-c8atvn68mb] {
  background-color: var(--bg-sidebar);
  color: var(--text-main);
}

/* Catches the click, wheel or right-click that should dismiss the menu. Transparent, and
   overscroll-behavior stops the wheel from scrolling the feed underneath on its way out. */
.card-menu-backdrop[b-c8atvn68mb] {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: transparent;
  overscroll-behavior: contain;
}

.card-menu[b-c8atvn68mb] {
  position: fixed;
  z-index: 41;
  width: 210px;
  padding: 5px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  outline: none;
  animation: cardMenuIn-b-c8atvn68mb 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardMenuIn-b-c8atvn68mb {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-menu-item[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 34px;
  padding: 0 0.6rem;
  border: none;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-main);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.card-menu-item:hover[b-c8atvn68mb],
.card-menu-item:focus-visible[b-c8atvn68mb] {
  background-color: var(--bg-sidebar);
}

/* --------------------------------- add note ---------------------------------- */

/* Above the menu's own backdrop (40/41) so opening the composer from the menu stacks correctly. */
.add-note-backdrop[b-c8atvn68mb] {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.25);
}

.add-note-panel[b-c8atvn68mb] {
  position: fixed;
  z-index: 51;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 2rem));
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.add-note-head[b-c8atvn68mb] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.add-note-head h4[b-c8atvn68mb] {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.add-note-text[b-c8atvn68mb] {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-main);
  background-color: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
}

.add-note-text:focus[b-c8atvn68mb] {
  outline: none;
  border-color: var(--highlight-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.add-note-error[b-c8atvn68mb] {
  margin: 0;
  font-size: 0.75rem;
  color: var(--app-danger-ink);
}

.add-note-actions[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.add-note-hint[b-c8atvn68mb] {
  margin-right: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.add-note-btn[b-c8atvn68mb] {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.add-note-btn:hover:not(:disabled)[b-c8atvn68mb] {
  border-color: var(--highlight-blue);
  color: var(--highlight-blue);
}

.add-note-btn.primary[b-c8atvn68mb] {
  background-color: var(--highlight-blue);
  border-color: var(--highlight-blue);
  color: var(--app-surface);
}

.add-note-btn.primary:hover:not(:disabled)[b-c8atvn68mb] {
  filter: brightness(1.08);
  color: var(--app-surface);
}

.add-note-btn:disabled[b-c8atvn68mb] {
  opacity: 0.5;
  cursor: default;
}

/* Muted against the label so the text stays the thing being read, then lifts with the row. */
.card-menu-icon[b-c8atvn68mb] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.card-menu-item:hover .card-menu-icon[b-c8atvn68mb],
.card-menu-item:focus-visible .card-menu-icon[b-c8atvn68mb] {
  color: var(--color-chat);
}

/* The label itself: ellipsis lives here now that the row is a flex container. */
.card-menu-item > span[b-c8atvn68mb] {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------- chat transcript (middle) -------------------------- */

.chat-panel-container[b-c8atvn68mb] {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  animation: slideInChat-b-c8atvn68mb 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Same fallback as .timeline-feed / .tasks-list — see the note there. */
.workspace-grid:not(.fitted) .chat-panel-container[b-c8atvn68mb] {
  max-height: calc(100vh - 8rem);
}

@keyframes slideInChat-b-c8atvn68mb {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-panel-header[b-c8atvn68mb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.chat-user-info[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chat-avatar[b-c8atvn68mb] {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--app-primary);
  color: var(--app-on-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-user-info h4[b-c8atvn68mb] {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.chat-sub[b-c8atvn68mb] {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.chat-close-btn[b-c8atvn68mb] {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  padding: 0;
}

.chat-close-btn:hover[b-c8atvn68mb] {
  background-color: var(--border-color);
  color: var(--text-main);
  transform: rotate(90deg);
}

.chat-messages-list[b-c8atvn68mb] {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-right: 0.25rem;
  min-height: 0;
}

.chat-messages-list[b-c8atvn68mb]::-webkit-scrollbar {
  width: 4px;
}

.chat-messages-list[b-c8atvn68mb]::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages-list[b-c8atvn68mb]::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.chat-time-separator[b-c8atvn68mb] {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.5rem 0;
  font-weight: 500;
}

.chat-msg[b-c8atvn68mb] {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}

.chat-msg .msg-bubble[b-c8atvn68mb] {
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  font-size: 0.825rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-msg .msg-meta[b-c8atvn68mb] {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  padding: 0 0.25rem;
}

.debtor-msg[b-c8atvn68mb] {
  align-self: flex-start;
}

.debtor-msg .msg-bubble[b-c8atvn68mb] {
  background-color: var(--bg-sidebar);
  color: var(--text-main);
  border-bottom-left-radius: 4px;
}

.agent-msg[b-c8atvn68mb] {
  align-self: flex-end;
  align-items: flex-end;
}

.agent-msg .msg-bubble[b-c8atvn68mb] {
  background-color: var(--color-message);
  color: var(--app-on-primary);
  border-bottom-right-radius: 4px;
}

/* ------------------------------- tasks board (right) --------------------------- */

.tasks-panel-container[b-c8atvn68mb] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  /* same as .timeline-container — the tasks list must take the leftover height and scroll
     itself rather than the column stretching to its content */
  overflow: hidden;
}

/* Vertical rule between the timeline and the tasks board, centered in the grid gap.
   The chat pane's own card border takes over as the boundary when the transcript is open. */
/* Drawn as a border rather than an absolutely-positioned ::before sitting in the grid gap:
   the column now clips its overflow, which would cut a pseudo-element placed outside its box. */
.tasks-panel-container[b-c8atvn68mb] {
  border-left: 1px solid var(--border-color);
  padding-left: 1rem;
}

/* With the transcript open, that card's own border is the boundary — a second rule would double up. */
.workspace-grid.show-chat-pane .tasks-panel-container[b-c8atvn68mb] {
  border-left: none;
  padding-left: 0;
}

.panel-instruction[b-c8atvn68mb] {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

/* ------------------------- header controls (sort / filter) --------------------- */

/* The left-hand group of a panel header - the count, and whatever sits beside it. Shared by the
   timeline and the tasks board so both headers read the same way; the header itself is
   space-between, so this group and .panel-controls are what push apart. */
.panel-title-row[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.panel-controls[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* WP-C: the board's create-task affordance. Borrows .sort-btn's shape so the header keeps one
   vocabulary, but reads as the primary action rather than a toggle. */
.new-task-btn[b-c8atvn68mb] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: transparent;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.new-task-btn:hover[b-c8atvn68mb],
.new-task-btn:focus-visible[b-c8atvn68mb] {
  border-style: solid;
  border-color: var(--highlight-blue);
  color: var(--highlight-blue);
}

.sort-btn[b-c8atvn68mb] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.sort-btn:hover[b-c8atvn68mb] {
  border-color: var(--highlight-blue);
  color: var(--highlight-blue);
}

.sort-caret[b-c8atvn68mb] {
  font-size: 0.8rem;
  line-height: 1;
}

/* segmented All / Open / Closed filter */
.segmented[b-c8atvn68mb] {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--bg-card);
}

.segmented button[b-c8atvn68mb] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  border-right: 1px solid var(--border-color);
  padding: 0.15rem 0.5rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.segmented button:last-child[b-c8atvn68mb] {
  border-right: none;
}

.segmented button:hover[b-c8atvn68mb] {
  color: var(--text-main);
  background-color: var(--bg-sidebar);
}

.segmented button.active[b-c8atvn68mb] {
  background-color: var(--highlight-blue);
  color: var(--app-surface);
}

.seg-count[b-c8atvn68mb] {
  font-size: 0.66rem;
  opacity: 0.75;
}

.segmented button.active .seg-count[b-c8atvn68mb] {
  opacity: 0.9;
}

.tasks-list[b-c8atvn68mb] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  /* horizontal/vertical room so the highlight ring isn't clipped by the scrollport */
  padding: 4px 0.4rem 4px 4px;
  flex: 1;
  min-height: 0;
}

/* same fallback as .timeline-feed — see the note there */
.workspace-grid:not(.fitted) .tasks-list[b-c8atvn68mb] {
  max-height: calc(100vh - 8rem);
}

.task-detail-card-wrapper[b-c8atvn68mb] {
  cursor: pointer;
  transition: all var(--transition-normal);
  border-radius: 12px;
}

.task-card-style2[b-c8atvn68mb] {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid transparent;
  border-radius: 10px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.task-detail-card-wrapper:hover .task-card-style2[b-c8atvn68mb] {
  box-shadow: var(--shadow-md);
  border-color: var(--app-primary-light);
  transform: translateY(-1px);
}

/* JS cross-highlight (hover on a related interaction card or task pill).
   Lift only — scaling would push the card edges outside the scrollport and clip
   the left/right border and ring. */
.task-detail-card-wrapper.highlighted-task[b-c8atvn68mb] {
  transform: translateY(-2px);
}

.task-detail-card-wrapper.highlighted-task .task-card-style2[b-c8atvn68mb] {
  border-color: var(--highlight-blue) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), var(--shadow-lg) !important;
}

.tc-header-row[b-c8atvn68mb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.tc-meta[b-c8atvn68mb] {
  display: flex;
  /* baseline keeps the category and the smaller date visually bottom-aligned */
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.tc-id-badge[b-c8atvn68mb] {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tc-category-text[b-c8atvn68mb] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-date-text[b-c8atvn68mb] {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.tc-summary[b-c8atvn68mb] {
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------ open / closed state ---------------------------- */

/* ✓ closed, ○ open. A glyph rather than colour alone: status names are agency-configurable
   and several statuses carry no configured colours, so the pill tint proves nothing. */
.status-glyph[b-c8atvn68mb] {
  margin-right: 0.3rem;
  font-size: 0.8em;
  line-height: 1;
}

/* Closed tasks stay legible but recede, so the open ones read as the actionable list.
   Card identity (left stripe hue, #ID badge) is left untouched — it drives cross-highlighting. */
.task-closed[b-c8atvn68mb] {
  background-color: var(--bg-sidebar);
}

.task-closed .tc-category-text[b-c8atvn68mb],
.task-closed .tc-summary[b-c8atvn68mb] {
  color: var(--text-muted);
}

.task-closed .status-pill[b-c8atvn68mb] {
  opacity: 0.85;
}

/* Hovering or highlighting a closed card restores full contrast — de-emphasis should never
   fight the collector when they are actually looking at it. */
.task-detail-card-wrapper:hover .task-closed[b-c8atvn68mb],
.task-detail-card-wrapper.highlighted-task .task-closed[b-c8atvn68mb] {
  background-color: var(--bg-card);
}

.task-detail-card-wrapper:hover .task-closed .tc-category-text[b-c8atvn68mb],
.task-detail-card-wrapper:hover .task-closed .tc-summary[b-c8atvn68mb],
.task-detail-card-wrapper.highlighted-task .task-closed .tc-category-text[b-c8atvn68mb],
.task-detail-card-wrapper.highlighted-task .task-closed .tc-summary[b-c8atvn68mb] {
  color: var(--text-main);
}

/* Screen-reader-only open/closed word, since the glyph is decorative to assistive tech. */
.visually-hidden[b-c8atvn68mb] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* drop-target feedback shared by task cards and the tasks header (drag & drop) */
.drop-active[b-c8atvn68mb],
.tasks-panel-header.drop-active[b-c8atvn68mb] {
  outline: 2px dashed var(--highlight-blue);
  outline-offset: 2px;
  border-radius: 12px;
  background-color: rgba(59, 130, 246, 0.06);
}

/* --------------------------------- responsive --------------------------------- */

@media (max-width: 1024px) {
  .workspace-grid[b-c8atvn68mb],
  .workspace-grid.show-chat-pane[b-c8atvn68mb] {
    grid-template-columns: 1fr;
    /* stacked: panels size to their content and the page scrolls, so release the pinned row */
    grid-template-rows: auto;
    height: auto;
    overflow-y: auto;
  }

  /* stacked: the panels sit one above the other, so a vertical rule makes no sense */
  .tasks-panel-container[b-c8atvn68mb] {
    border-left: none;
    padding-left: 0;
  }

  .timeline-feed[b-c8atvn68mb],
  .tasks-list[b-c8atvn68mb] {
    max-height: 60vh;
  }

  .chat-panel-container[b-c8atvn68mb] {
    max-height: 70vh;
  }

  .interaction-card.orig-debtor[b-c8atvn68mb] {
    margin-right: 5%;
  }

  .interaction-card.orig-business[b-c8atvn68mb] {
    margin-left: 5%;
  }
}

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

/* Same family as .sort-btn (its neighbour in the header controls), tinted toward the chat
   purple so the AI entry point reads as its own thing without shouting. */
.ai-toggle-btn[b-c8atvn68mb] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.ai-toggle-btn:hover[b-c8atvn68mb],
.ai-toggle-btn:focus-visible[b-c8atvn68mb],
.ai-toggle-btn.active[b-c8atvn68mb] {
  border-color: var(--color-chat);
  color: var(--color-chat);
}

.ai-toggle-btn.active[b-c8atvn68mb] {
  background-color: var(--color-chat-bg);
}

.ai-avatar[b-c8atvn68mb] {
  font-size: 1rem;
}

/* The scrolling middle of the pane; the footer below stays pinned like the transcript header. */
.ai-panel-body[b-c8atvn68mb] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ai-running[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.5rem 0.25rem;
}

.ai-error[b-c8atvn68mb] {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--app-danger);
  border-radius: 8px;
  background-color: var(--app-danger-soft);
  font-size: 0.78rem;
  color: var(--app-danger-ink);
}

.ai-suggestion-list[b-c8atvn68mb] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ai-suggestion[b-c8atvn68mb] {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-chat);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background-color: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.ai-suggestion-head[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.ai-kind-badge[b-c8atvn68mb] {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 20px;
  background-color: var(--color-chat-bg);
  color: var(--color-chat);
  white-space: nowrap;
}

.ai-open-task-btn[b-c8atvn68mb] {
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  background-color: transparent;
  padding: 0.1rem 0.45rem;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.ai-open-task-btn:hover[b-c8atvn68mb],
.ai-open-task-btn:focus-visible[b-c8atvn68mb] {
  border-style: solid;
  border-color: var(--highlight-blue);
  color: var(--highlight-blue);
}

.ai-suggestion-title[b-c8atvn68mb] {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.ai-suggestion-why[b-c8atvn68mb] {
  margin: 0.2rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.ai-dropped[b-c8atvn68mb] {
  margin: 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
}

.ai-panel-footer[b-c8atvn68mb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.7rem;
}

.ai-disclaimer[b-c8atvn68mb] {
  font-size: 0.7rem;
  color: var(--text-muted);
}
/* /Components/Shared/Debtor/DebtorChecklistCard.razor.rz.scp.css */
/* The debtor check list card.

   The shared row's own rules live in Components\Shared\Checklist\ChecklistRow.razor.css; what is
   here is this card's frame, its header line, and the chips it passes into the row's Badges and
   TrailingMeta slots - which must be styled HERE, because RenderFragment content carries the
   PARENT's scope id and would never match the shared component's scoped stylesheet. */

/* The workspace .section-card frame reserves 48px of side padding to clear an absolutely positioned
   icon and action cluster. That is right for the summary cards around it and wrong for a list: in a
   column this narrow it would leave the rows about two thirds of the width. This card puts its icon
   and title in FLOW instead, so it can take the padding back. */
.checklist-card[b-0qyye484fn] {
  padding: 14px 16px;
}

.checklist-card-header[b-0qyye484fn] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.checklist-card-icon[b-0qyye484fn] {
  color: var(--text-muted, #6b7280);
  opacity: 0.7;
}

.checklist-card-title[b-0qyye484fn] {
  font-weight: 600;
}

/* Pushed to the right-hand end of the header line. */
.checklist-card-add[b-0qyye484fn] {
  margin-left: auto;
}

/* The category chip. Quieter than the required badge beside it - it is context, not a warning. */
.checklist-category[b-0qyye484fn] {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  vertical-align: 0.08rem;
  background: var(--rz-base-200, #eee);
  color: var(--rz-text-tertiary-color, #777);
}

/* "waiting on a signed document" - the row the server will tick by itself. */
.checklist-auto[b-0qyye484fn] {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--rz-text-tertiary-color, #888);
}

.checklist-all-done[b-0qyye484fn] {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.25rem;
  font-size: 0.85rem;
  color: var(--rz-text-tertiary-color, #888);
}

/* The completed section's disclosure. A plain button, not a Radzen panel: it is one line of chrome
   and a panel would have brought its own border into a card that already has one. */
.checklist-completed-toggle[b-0qyye484fn] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.3rem 0.25rem;
  border: none;
  border-top: 1px solid var(--rz-base-200, #eee);
  background: transparent;
  font-size: 0.8rem;
  color: var(--rz-text-tertiary-color, #888);
  cursor: pointer;
  text-align: left;
}

.checklist-completed-toggle:hover[b-0qyye484fn] {
  color: var(--rz-text-secondary-color, #555);
}
/* /Components/Shared/Debtor/RequirementAlerts.razor.rz.scp.css */
.req-strip[b-llyrbcpr0q] {
  padding: 0.5rem 0.75rem 0.25rem;
}

/* Pills are <button>s for keyboard/AT access; the badge utilities supply the tint, this
   resets the button chrome and caps the preview width (full text via tooltip/expansion). */
.req-pill[b-llyrbcpr0q] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 34ch;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.req-pill .req-pill-text[b-llyrbcpr0q] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-toggle[b-llyrbcpr0q] {
  background: none;
  border: none;
  padding: 0 0.15rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.req-spin[b-llyrbcpr0q] {
  display: inline-flex;
  align-items: center;
  animation: req-spin-b-llyrbcpr0q 1s linear infinite;
}

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

.req-panel[b-llyrbcpr0q] {
  padding: 0.6rem 0.9rem;
  max-height: 40vh;
  overflow-y: auto;
  font-size: 0.78rem;
}

.req-panel-label[b-llyrbcpr0q] {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.req-panel-label-follow[b-llyrbcpr0q] {
  border-top: 1px solid var(--bs-border-color);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.req-line[b-llyrbcpr0q] {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.15rem 0;
  white-space: pre-wrap;
}

.req-html[b-llyrbcpr0q] {
  padding: 0.15rem 0;
}

.req-panel-footer[b-llyrbcpr0q] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  border-top: 1px solid var(--bs-border-color);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.req-refresh[b-llyrbcpr0q] {
  font-size: 0.7rem;
}
/* /Components/Shared/DynamicQuestionnaire/DynamicQuestionnaire.razor.rz.scp.css */
.dq2[b-y27venr54s] {
    padding: 1rem;
}

/* A read-only questionnaire. pointer-events inherits, so blocking it on the wrapper reaches every
   question control rendered by the child components without needing ::deep - which would not apply
   to them anyway, since scoped CSS only stamps this component's own markup. */
.wi_dq_readonly[b-y27venr54s] {
    pointer-events: none;
    opacity: 0.85;
}
/* /Components/Shared/DynamicQuestionnaire/QuestionnairePickerDialog.razor.rz.scp.css */
.qpk[b-w997fb3sph] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.qpk-list[b-w997fb3sph] {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--rz-base-300, #e0e0e0);
  border-radius: 4px;
}

.qpk-row[b-w997fb3sph] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--rz-base-200, #f0f0f0);
  background: transparent;
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
}

.qpk-row:last-child[b-w997fb3sph] {
  border-bottom: 0;
}

.qpk-row:hover[b-w997fb3sph],
.qpk-row:focus-visible[b-w997fb3sph] {
  background: var(--rz-base-100, #f5f5f5);
}

.qpk-icon[b-w997fb3sph] {
  flex: 0 0 auto;
  font-size: 1.1rem !important;
  color: var(--rz-text-secondary-color, #757575);
}

.qpk-title[b-w997fb3sph] {
  flex: 1 1 auto;
  min-width: 0;
}

.qpk-meta[b-w997fb3sph] {
  color: var(--rz-text-secondary-color, #757575);
  font-size: 0.78rem;
  white-space: nowrap;
}

.qpk-empty[b-w997fb3sph] {
  padding: 0.5rem 0.6rem;
}
/* /Components/Shared/DynamicQuestionnaire/QuestionnairesCard.razor.rz.scp.css */
/* List rows, not a DataGrid - the same reasoning as the check list card next to it: a
   questionnaire list is a list, and grid chrome (sorting, resizing, column headers) only gets
   between the reader and the one action each row offers. */

.dq-row[b-w09mv0b1t0] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .25rem;
    border-bottom: 1px solid var(--rz-base-300, #eee);
}

.dq-row:last-of-type[b-w09mv0b1t0] {
    border-bottom: none;
}

.dq-main[b-w09mv0b1t0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0;
}

.dq-title[b-w09mv0b1t0] {
    font-weight: 500;
}

.dq-meta[b-w09mv0b1t0] {
    color: var(--rz-text-secondary-color, #6c757d);
    font-size: .8rem;
}

.dq-actions[b-w09mv0b1t0] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}

.dq-attempts[b-w09mv0b1t0] {
    padding: .25rem 0 .5rem 1.5rem;
}

.dq-attempt[b-w09mv0b1t0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .85rem;
}

.dq-attempt-date[b-w09mv0b1t0] {
    min-width: 10rem;
}

.dq-active[b-w09mv0b1t0] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    font-size: .8rem;
}

.dq-code[b-w09mv0b1t0] {
    width: 12rem;
}

.dq-code-text[b-w09mv0b1t0] {
    font-family: monospace;
}

.dq-attempt-actions[b-w09mv0b1t0] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}

.dq-preview[b-w09mv0b1t0] {
    border: 1px solid var(--rz-base-300, #eee);
    border-radius: .25rem;
    margin: .25rem 0 .75rem 1.5rem;
    max-height: 30rem;
    overflow-y: auto;
}
/* /Components/Shared/Feedback/FeedbackPromptCard.razor.rz.scp.css */
/* Sits at the top of the customer body on whatever page the agency made the landing page, so it
   has to read as an invitation rather than as part of that page's own content. */
.fb-prompt[b-p3yme6sy54] {
  position: relative;
  border: 1px solid #cfe2ff;
  border-left: 4px solid #0d6efd;
  border-radius: 0.5rem;
  padding: 0.85rem 2.25rem 0.85rem 1rem;
  margin-bottom: 1rem;
  background: #f5f9ff;
}

.fb-prompt-title[b-p3yme6sy54] {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.fb-prompt-sub[b-p3yme6sy54] {
  font-size: 0.875rem;
  color: #495057;
  margin-bottom: 0.25rem;
  /* Task summaries are free text and can carry a long unbroken token. */
  overflow-wrap: break-word;
}

.fb-prompt-close[b-p3yme6sy54] {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #6c757d;
  cursor: pointer;
  border-radius: 0.25rem;
}

.fb-prompt-close:hover:not(:disabled)[b-p3yme6sy54] {
  color: #212529;
  background: rgba(0, 0, 0, 0.05);
}

.fb-prompt-close:focus-visible[b-p3yme6sy54] {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
}

.fb-prompt-comment[b-p3yme6sy54] {
  margin-top: 0.4rem;
  resize: vertical;
}

.fb-prompt-actions[b-p3yme6sy54] {
  margin-top: 0.5rem;
}

.fb-prompt-expand[b-p3yme6sy54] {
  font-size: 0.85rem;
}

.fb-prompt-error[b-p3yme6sy54] {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #b02a37;
}
/* /Components/Shared/Feedback/IssueFeedbackCard.razor.rz.scp.css */
.feedback-card[b-fjw4vnshli] {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  background: #fbfbfc;
  max-width: 34rem;
}

.feedback-head[b-fjw4vnshli] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.feedback-title[b-fjw4vnshli] {
  font-weight: 600;
}

.feedback-quote[b-fjw4vnshli] {
  margin: 0.5rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid #e0e0e0;
  color: #333;
  font-size: 0.925rem;
  /* Customer free text, up to 255 characters with no spaces guaranteed. */
  overflow-wrap: break-word;
}

.feedback-meta[b-fjw4vnshli] {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #6c757d;
}

.feedback-comment[b-fjw4vnshli] {
  margin-top: 0.5rem;
  resize: vertical;
}

.feedback-actions[b-fjw4vnshli] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.feedback-error[b-fjw4vnshli] {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #b02a37;
}
/* /Components/Shared/Feedback/StarRating.razor.rz.scp.css */
.star-rating[b-dmiktlzuso] {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  flex-wrap: wrap;
}

.star[b-dmiktlzuso] {
  font-size: 1.6rem;
  line-height: 1;
  color: #ced4da;
}

.star.on[b-dmiktlzuso] {
  color: #f0a500;
}

/* Half a star: the legacy portal's ten-position control wrote values like 89, and they are in the
   data. Painted as a left-to-right gradient rather than a second glyph so the two halves stay
   perfectly aligned at any font size. */
.star.half[b-dmiktlzuso] {
  background: linear-gradient(90deg, #f0a500 50%, #ced4da 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Entry stars are thumb-sized, not text-sized. 44px is the smallest comfortable touch target. */
.star-button[b-dmiktlzuso] {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}

.star-button:hover:not(:disabled)[b-dmiktlzuso],
.star-button:focus-visible[b-dmiktlzuso] {
  color: #f0a500;
  transform: scale(1.12);
}

.star-button:focus-visible[b-dmiktlzuso] {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.star-button:disabled[b-dmiktlzuso] {
  cursor: default;
  transform: none;
}

.star-percent[b-dmiktlzuso] {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: #6c757d;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .star-button[b-dmiktlzuso] {
    transition: none;
  }

  .star-button:hover:not(:disabled)[b-dmiktlzuso],
  .star-button:focus-visible[b-dmiktlzuso] {
    transform: none;
  }
}
/* /Components/Shared/Header/CustomerAppointmentsLink.razor.rz.scp.css */
/* Sits beside the language and user dropdowns in .app-header__actions, so it matches their height
   and target size rather than inheriting link styling from the page. */
.customer-appointments-link[b-l9ti3hwfka] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    color: #4a5568;
    text-decoration: none;
}

.customer-appointments-link:hover[b-l9ti3hwfka],
.customer-appointments-link:focus-visible[b-l9ti3hwfka] {
    background-color: #e9e9e9;
    color: #1a202c;
}

/* The icon renders as an inline SVG inside an <i class="fa-icon-v7"> (FontAwesomeIcon). */
.customer-appointments-link[b-l9ti3hwfka]  .fa-icon-v7 svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}
/* /Components/Shared/Header/LanguageDropdown.razor.rz.scp.css */
/* Scoped styles for LanguageDropdown.razor */

.language_dropdown_wrapper[b-intcaeu3ze] {
  position: relative;
  display: inline-block;
}

.language_dropdown_toggle[b-intcaeu3ze] {
  background: transparent;
  border: none;
  color: var(--app-ink-2);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.language_dropdown_toggle:hover[b-intcaeu3ze] {
  background-color: var(--app-primary-softer);
  color: var(--app-primary);
}

.globe_icon[b-intcaeu3ze] {
  font-size: 1.25rem;
  color: var(--app-primary);
  display: flex;
  align-items: center;
}

.language_name[b-intcaeu3ze] {
  font-family: 'Inter', sans-serif;
  color: var(--app-ink-2);
}

.language_dropdown_toggle:hover .language_name[b-intcaeu3ze] {
  color: var(--app-primary);
}

.small_chevron[b-intcaeu3ze] {
  font-size: 0.75rem;
  color: var(--app-ink-3);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
}

.language_dropdown_wrapper.show .small_chevron[b-intcaeu3ze] {
  transform: rotate(180deg);
}

.user_dropdown_menu[b-intcaeu3ze] {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  display: none;
  min-width: 170px;
  padding: 0.5rem 0;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--app-ink);
  text-align: left;
  list-style: none;
  background-color: var(--app-surface);
  background-clip: padding-box;
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius-card);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px var(--app-primary-softer);
}

.user_dropdown_menu.show[b-intcaeu3ze] {
  display: block;
  animation: slideDown-b-intcaeu3ze 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.user_dropdown_header[b-intcaeu3ze] {
  padding: 0.5rem 1.25rem;
  margin-bottom: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--app-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.user_dropdown_item[b-intcaeu3ze] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1.25rem;
  clear: both;
  font-weight: 500;
  color: var(--app-ink-2);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user_dropdown_item:hover[b-intcaeu3ze] {
  color: var(--app-primary);
  background-color: var(--app-primary-softer);
}

.user_dropdown_item.active[b-intcaeu3ze] {
  color: var(--app-primary);
  background-color: var(--app-primary-soft);
}

.check_icon[b-intcaeu3ze] {
  color: var(--app-success);
  font-size: 0.85rem;
}

.dropdown_backdrop[b-intcaeu3ze] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: transparent;
}

/* Deep selection rules to style child FontAwesomeIcon SVGs */
[b-intcaeu3ze] .fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[b-intcaeu3ze] .fa-icon-v7 svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
}

@keyframes slideDown-b-intcaeu3ze {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* /Components/Shared/Header/MessageCenterLink.razor.rz.scp.css */
/* Matches CustomerAppointmentsLink so the two header icons are the same size and target area,
   with position:relative added to anchor the count badge. */
.message-center-link[b-xtl0iy25sr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    color: #4a5568;
    text-decoration: none;
}

.message-center-link:hover[b-xtl0iy25sr],
.message-center-link:focus-visible[b-xtl0iy25sr] {
    background-color: #e9e9e9;
    color: #1a202c;
}

/* The icon renders as an inline SVG inside an <i class="fa-icon-v7"> (FontAwesomeIcon). */
.message-center-link[b-xtl0iy25sr]  .fa-icon-v7 svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.message-center-badge[b-xtl0iy25sr] {
    position: absolute;
    top: 0.15rem;
    right: 0.05rem;
    min-width: 1rem;
    padding: 0 0.2rem;
    border-radius: 0.5rem;
    background-color: #6c757d;
    color: #fff;
    font-size: 0.65rem;
    line-height: 1rem;
    text-align: center;
    font-weight: 600;
}

/* MessageCenterIndicator returns a NEGATIVE count when at least one message has never been seen.
   That is the case worth a colour, so the badge is grey for "unread but already seen" and red for
   genuinely new - the distinction the sign was invented to carry. */
.message-center-badge.is-new[b-xtl0iy25sr] {
    background-color: #dc3545;
}
/* /Components/Shared/Header/ThemeDropdown.razor.rz.scp.css */
/* Scoped styles for ThemeDropdown.razor.

   Mirrors LanguageDropdown/UserDropdown so the three header controls read as one set - scoped CSS
   is scoped, so the shared class names cannot be shared and each component carries its own copy.

   Token-only: this component is the switch for the dark theme, so a literal here would be the one
   colour that fails to follow it. */

.theme_dropdown_wrapper[b-1f6cvmmvo0] {
  position: relative;
  display: inline-block;
}

.theme_dropdown_toggle[b-1f6cvmmvo0] {
  background: transparent;
  border: none;
  color: var(--app-ink-2);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.theme_dropdown_toggle:hover[b-1f6cvmmvo0] {
  background-color: var(--app-primary-softer);
  color: var(--app-primary);
}

.theme_dropdown_toggle:focus-visible[b-1f6cvmmvo0] {
  outline: none;
  box-shadow: var(--app-focus-ring);
}

.theme_icon[b-1f6cvmmvo0] {
  font-size: 1.25rem;
  color: var(--app-primary);
  display: flex;
  align-items: center;
}

.small_chevron[b-1f6cvmmvo0] {
  font-size: 0.75rem;
  color: var(--app-ink-3);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
}

.theme_dropdown_wrapper.show .small_chevron[b-1f6cvmmvo0] {
  transform: rotate(180deg);
}

.user_dropdown_menu[b-1f6cvmmvo0] {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  display: none;
  min-width: 200px;
  padding: 0.5rem 0;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--app-ink);
  text-align: left;
  list-style: none;
  background-color: var(--app-surface);
  background-clip: padding-box;
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius-card);
  box-shadow: var(--app-shadow-hover);
}

.user_dropdown_menu.show[b-1f6cvmmvo0] {
  display: block;
  animation: themeSlideDown-b-1f6cvmmvo0 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.user_dropdown_header[b-1f6cvmmvo0] {
  padding: 0.5rem 1.25rem;
  margin-bottom: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--app-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.user_dropdown_item[b-1f6cvmmvo0] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1.25rem;
  clear: both;
  font-weight: 500;
  color: var(--app-ink-2);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user_dropdown_item:hover[b-1f6cvmmvo0] {
  color: var(--app-primary);
  background-color: var(--app-primary-softer);
}

.user_dropdown_item.active[b-1f6cvmmvo0] {
  color: var(--app-primary);
  background-color: var(--app-primary-soft);
}

.theme_option_icon[b-1f6cvmmvo0] {
  font-size: 0.95rem;
  color: var(--app-ink-3);
}

.user_dropdown_item.active .theme_option_icon[b-1f6cvmmvo0],
.user_dropdown_item:hover .theme_option_icon[b-1f6cvmmvo0] {
  color: var(--app-primary);
}

.check_icon[b-1f6cvmmvo0] {
  color: var(--app-success);
  font-size: 0.85rem;
}

.dropdown_backdrop[b-1f6cvmmvo0] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: transparent;
}

/* Deep rules to style the child FontAwesomeIcon SVGs, which are inlined as a MarkupString and so
   carry no scope attribute of their own. */
[b-1f6cvmmvo0] .fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[b-1f6cvmmvo0] .fa-icon-v7 svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
}

@keyframes themeSlideDown-b-1f6cvmmvo0 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* /Components/Shared/Header/UserDropdown.razor.rz.scp.css */
/* Scoped styles for UserDropdown.razor */

.user_dropdown_wrapper[b-7fgs1qymtc] {
  position: relative;
  display: inline-block;
}

.user_dropdown_toggle[b-7fgs1qymtc] {
  background: transparent;
  border: none;
  color: var(--app-ink-2);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.user_dropdown_toggle:hover[b-7fgs1qymtc] {
  background-color: var(--app-primary-softer);
  color: var(--app-primary);
}

.avatar_icon[b-7fgs1qymtc] {
  font-size: 1.35rem;
  color: var(--app-primary);
  display: flex;
  align-items: center;
}

.pro_user_name[b-7fgs1qymtc] {
  font-family: 'Inter', sans-serif;
  color: var(--app-ink-2);
}

.user_dropdown_toggle:hover .pro_user_name[b-7fgs1qymtc] {
  color: var(--app-primary);
}

.small_chevron[b-7fgs1qymtc] {
  font-size: 0.75rem;
  color: var(--app-ink-3);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
}

.user_dropdown_wrapper.show .small_chevron[b-7fgs1qymtc] {
  transform: rotate(180deg);
}

.user_dropdown_menu[b-7fgs1qymtc] {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  display: none;
  min-width: 170px;
  padding: 0.5rem 0;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--app-ink);
  text-align: left;
  list-style: none;
  background-color: var(--app-surface);
  background-clip: padding-box;
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius-card);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px var(--app-primary-softer);
}

.user_dropdown_menu.show[b-7fgs1qymtc] {
  display: block;
  animation: slideDown-b-7fgs1qymtc 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.user_dropdown_header[b-7fgs1qymtc] {
  padding: 0.5rem 1.25rem;
  margin-bottom: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--app-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.user_dropdown_item[b-7fgs1qymtc] {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1.25rem;
  clear: both;
  font-weight: 500;
  color: var(--app-ink-2);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user_dropdown_item:hover[b-7fgs1qymtc] {
  color: var(--app-primary);
  background-color: var(--app-primary-softer);
}

.dropdown_backdrop[b-7fgs1qymtc] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: transparent;
}

/* Deep selection rules to style child FontAwesomeIcon SVGs */
[b-7fgs1qymtc] .fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[b-7fgs1qymtc] .fa-icon-v7 svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
}

@keyframes slideDown-b-7fgs1qymtc {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* /Components/Shared/Issues/IssueAttachmentsCard.razor.rz.scp.css */
.attachment-row[b-i7d6ijkwai] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.2rem;
  border-bottom: 1px solid var(--rz-base-200, #f0f0f0);
  font-size: 0.875rem;
}

.attachment-row:last-child[b-i7d6ijkwai] {
  border-bottom: 0;
}

.attachment-icon[b-i7d6ijkwai] {
  flex: 0 0 auto;
  font-size: 1.1rem !important;
  color: var(--rz-text-secondary-color, #757575);
}

/* The file name is the open affordance, drawn as a link. */
.attachment-name[b-i7d6ijkwai] {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rz-link-color, #1976d2);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.attachment-name:hover[b-i7d6ijkwai] {
  text-decoration: underline;
}

.attachment-meta[b-i7d6ijkwai] {
  margin-left: auto;
  color: var(--rz-text-secondary-color, #757575);
  font-size: 0.78rem;
  white-space: nowrap;
}

.attachment-note-icon[b-i7d6ijkwai] {
  flex: 0 0 auto;
  font-size: 1rem !important;
  color: var(--rz-text-disabled-color, #9e9e9e);
  cursor: help;
}
/* /Components/Shared/Issues/IssueChecklistCard.razor.rz.scp.css */
/* What is left here after P4 moved the shared row to Components\Shared\Checklist\ChecklistRow.

   Scoped CSS only matches markup a component renders ITSELF, and content passed into a component as
   a RenderFragment keeps the PARENT's scope id. So the chips this card puts into ChecklistRow's
   Badges and Meta slots are styled here, not there - including a copy of .checklist-meta, which the
   shared stylesheet also carries for the completion stamp it renders itself. That small duplication
   is the cost of scoped CSS; the alternative is a global stylesheet, which is worse. */

/* The "added here" chip on an ad-hoc row. Same geometry as the shared .checklist-required badge,
   deliberately - they sit side by side. */
.checklist-adhoc[b-v416d1wjmz] {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 0.6rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  vertical-align: 0.08rem;
  background: var(--rz-base-200, #eee);
  color: var(--rz-text-tertiary-color, #777);
}

/* Muted trailing detail inside the Meta slot. Mirrors ChecklistRow's own rule - see the note above. */
.checklist-meta[b-v416d1wjmz] {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--rz-text-tertiary-color, #888);
  white-space: nowrap;
}

.checklist-file[b-v416d1wjmz] {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* The ghost "Add item..." row reads as an invitation rather than a field until it is used. It is NOT
   a ChecklistRow - no checkbox, nothing to tick - so it carries its own layout rather than reusing
   .checklist-row, which now lives in the shared component's scoped stylesheet and would not match
   markup rendered here. */
.checklist-ghost[b-v416d1wjmz] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem;
  opacity: 0.75;
}

.checklist-ghost:hover[b-v416d1wjmz],
.checklist-ghost:focus-within[b-v416d1wjmz] {
  opacity: 1;
}

.checklist-ghost-main[b-v416d1wjmz] {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.15rem;
  line-height: 1.35;
}

.checklist-ghost-icon[b-v416d1wjmz] {
  margin-top: 0.3rem;
  color: var(--rz-text-tertiary-color, #999);
}

.checklist-ghost-input[b-v416d1wjmz]  input,
input.checklist-ghost-input[b-v416d1wjmz] {
  border: none;
  border-bottom: 1px dashed var(--rz-base-300, #ccc);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
}

.checklist-ghost-input[b-v416d1wjmz]  input:focus,
input.checklist-ghost-input:focus[b-v416d1wjmz] {
  border-bottom-style: solid;
  box-shadow: none;
}
/* /Components/Shared/Issues/IssueCollaboratorsChip.razor.rz.scp.css */
/* The (+N) chip and its hover/focus peek. Same pattern as the linkage chips' peek: pure CSS
   reveal on :hover and :focus-within, so keyboard users get it too. */

.collab-chip-wrap[b-o7hzga8i54] {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.collab-chip[b-o7hzga8i54] {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rz-base-300, #ccc);
  border-radius: 999px;
  background: var(--rz-base-100, #f4f4f4);
  color: var(--rz-text-secondary-color, #555);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}

button.collab-chip:hover:not(:disabled)[b-o7hzga8i54] {
  background: var(--rz-base-200, #e8e8e8);
  color: var(--rz-text-color, #333);
}

/* Empty-but-addable: the dashed ghost, matching the linkage strip's ghost chips. */
.collab-chip-ghost[b-o7hzga8i54] {
  border-style: dashed;
  background: transparent;
  font-weight: 400;
}

.collab-chip-static[b-o7hzga8i54] {
  cursor: default;
}

/* The names, revealed on hover and on keyboard focus. */
.collab-peek[b-o7hzga8i54] {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1080;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 11rem;
  max-width: 20rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--rz-base-300, #ccc);
  border-radius: 0.4rem;
  background: var(--rz-base-background-color, #fff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-size: 0.8rem;
}

.collab-chip-wrap:hover .collab-peek[b-o7hzga8i54],
.collab-chip-wrap:focus-within .collab-peek[b-o7hzga8i54] {
  display: flex;
}

.collab-peek-title[b-o7hzga8i54] {
  font-weight: 600;
  color: var(--rz-text-secondary-color, #666);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.1rem;
}

.collab-peek-row[b-o7hzga8i54] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* /Components/Shared/Issues/IssueFeedbackChip.razor.rz.scp.css */
/* The feedback stars chip under the status pill, and its "New" (unreviewed) dot. */

.feedback-chip-row[b-9lu7gy6gtf] {
  margin-bottom: 0.5rem;
}

.feedback-chip[b-9lu7gy6gtf] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--rz-base-300, #ccc);
  border-radius: 999px;
  background: var(--rz-base-100, #f7f7f7);
  color: var(--rz-text-secondary-color, #555);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
}

.feedback-chip:hover[b-9lu7gy6gtf] {
  background: var(--rz-base-200, #ececec);
}

/* The shared StarRating renders 2rem touch targets for ENTRY; this is a read-only chip, so the
   glyphs shrink to text size. ::deep because the spans live in the child component. */
.feedback-chip[b-9lu7gy6gtf]  .star-rating .star {
  font-size: 0.85rem;
  line-height: 1;
}

.feedback-chip[b-9lu7gy6gtf]  .star-rating .star-percent {
  font-size: 0.8rem;
  font-weight: 600;
}

.feedback-chip-icon[b-9lu7gy6gtf] {
  font-size: 1rem;
}

/* Amber "New" dot: cleared by Mark reviewed. */
.feedback-chip-new[b-9lu7gy6gtf] {
  position: absolute;
  top: -0.2rem;
  right: -0.1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--rz-warning, #ffa726);
  border: 1px solid var(--rz-base-background-color, #fff);
}
/* /Components/Shared/Issues/IssueLinkageChips.razor.rz.scp.css */
/* Chip strip for the task's linked records. Scoped, so nothing here can reach the rest of the page.
   Remember to bump the ?v= on ICCOBlazorApp1.styles.css in App.razor when editing this file - the
   scoped bundle is cached hard and an un-bumped edit simply does not arrive. */

.linkage-strip[b-zghjmrwobs] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
}

.linkage-chip[b-zghjmrwobs] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  padding: .2rem .6rem;
  border: 1px solid var(--rz-border, #d5d7da);
  border-radius: 999px;
  background: var(--rz-base-background-color, #fff);
  color: inherit;
  font-size: .8125rem;
  line-height: 1.4;
  text-decoration: none;
}

a.linkage-chip:hover[b-zghjmrwobs],
a.linkage-chip:focus-visible[b-zghjmrwobs] {
  border-color: var(--rz-primary, #0d6efd);
  color: var(--rz-primary, #0d6efd);
  text-decoration: none;
}

.linkage-chip[b-zghjmrwobs]  .rz-icon,
.linkage-chip[b-zghjmrwobs]  i {
  font-size: 1rem;
  opacity: .65;
}

.linkage-chip-text[b-zghjmrwobs] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linkage-chip-muted[b-zghjmrwobs] {
  opacity: .6;
  font-size: .75rem;
  white-space: nowrap;
}

/* A closed account still has to be readable - the desktop turned it red, which on the web reads as
   an error rather than as a state. Muted plus an explicit status word says the same thing. */
.linkage-chip-closed[b-zghjmrwobs] {
  opacity: .65;
}

/* Context, not a destination: a debtor task's creditor comes from its account. */
.linkage-chip-static[b-zghjmrwobs] {
  background: transparent;
  border-style: dotted;
}

.linkage-chip-ghost[b-zghjmrwobs] {
  border-style: dashed;
  background: transparent;
  opacity: .75;
  cursor: pointer;
}

.linkage-chip-ghost:hover[b-zghjmrwobs],
.linkage-chip-ghost:focus-visible[b-zghjmrwobs] {
  opacity: 1;
  border-color: var(--rz-primary, #0d6efd);
  color: var(--rz-primary, #0d6efd);
}

/* ---- hover peek ---- */

.linkage-chip-wrap[b-zghjmrwobs] {
  position: relative;
  display: inline-flex;
}

.linkage-peek[b-zghjmrwobs] {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 1080;
  display: none;
  flex-direction: column;
  gap: .15rem;
  min-width: 15rem;
  max-width: 22rem;
  padding: .55rem .7rem;
  border: 1px solid var(--rz-border, #d5d7da);
  border-radius: .4rem;
  background: var(--rz-base-background-color, #fff);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  font-size: .8125rem;
}

/* Focus-within as well as hover: the peek has to be reachable by keyboard, and the chip inside is a
   real anchor, so tabbing to it is what opens this. */
.linkage-chip-wrap:hover .linkage-peek[b-zghjmrwobs],
.linkage-chip-wrap:focus-within .linkage-peek[b-zghjmrwobs] {
  display: flex;
}

.linkage-peek-title[b-zghjmrwobs] {
  font-weight: 600;
  margin-bottom: .2rem;
}

.linkage-peek-row[b-zghjmrwobs] {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.linkage-peek-row > span:first-child[b-zghjmrwobs] {
  opacity: .6;
  white-space: nowrap;
}

.linkage-peek-row > span:last-child[b-zghjmrwobs] {
  text-align: right;
}
/* /Components/Shared/Menu/DynamicNavMenu.razor.rz.scp.css */
.navbar-toggler[b-ikc7v9aezs] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ikc7v9aezs] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ikc7v9aezs] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ikc7v9aezs] {
    font-size: 1.1rem;
}

.bi[b-ikc7v9aezs] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ikc7v9aezs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ikc7v9aezs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ikc7v9aezs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ikc7v9aezs] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ikc7v9aezs] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ikc7v9aezs] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ikc7v9aezs]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ikc7v9aezs]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-ikc7v9aezs]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-ikc7v9aezs] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ikc7v9aezs] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ikc7v9aezs] {
        display: none;
    }

    .nav-scrollable[b-ikc7v9aezs] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        /*min-height: calc(100vh - 3.5rem);*/
        overflow-y: auto;
    }
}
/* /Components/Shared/Menu/MenuCustomContent.razor.rz.scp.css */
/* The four page-chrome panels an InternetMenus row can add. Scoped to this component rather than
   to MainLayout because the panel's own root element is the panel — the layout cannot style it,
   and it must contribute no box at all when nothing is configured (the component renders nothing,
   so these rules never apply). */

.menu-custom-content[b-dkubv83hbu] {
    min-width: 0; /* never let wide custom content force the page to scroll sideways */
    /* Same intent as min-width above, for the case that rule cannot reach: a single unbreakable
       token (a long URL, a filename) is wider than the panel, so it overhangs the viewport and the
       whole page scrolls sideways. Inherited, so it covers the ::deep custom content too. */
    overflow-wrap: break-word;
}

/* Full-width bands above and below the page body. */
.menu-custom-content--top[b-dkubv83hbu] {
    border-bottom: 1px solid #d6d5d5;
}

.menu-custom-content--bottom[b-dkubv83hbu] {
    border-top: 1px solid #d6d5d5;
}

/* Sits beside the page as a sibling of .main-content, so it matches the RightDetails aside it
   renders next to (MainLayout.razor.css .right-details). */
.menu-custom-content--right[b-dkubv83hbu] {
    flex: 0 0 25%;
    border-left: 1px solid #d6d5d5;
}

/* Under the menu rail (legacy _LeftBottomContent): the rail sets the width, so this only needs to
   separate itself from the menu above it. */
.menu-custom-content--left[b-dkubv83hbu] {
    border-top: 1px solid #d6d5d5;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* Custom content is authored as standalone HTML pages, so images in it routinely carry their own
   intrinsic width and would otherwise overflow a panel narrower than they are. */
.menu-custom-content[b-dkubv83hbu]  img {
    max-width: 100%;
    height: auto;
}
/* /Components/Shared/Menu/NavigationButtons.razor.rz.scp.css */
.wi-navigation-buttons[b-2qcnvi37bc] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 8px;
  border-top: 1px solid var(--rz-base-300, #e0e0e0);
}

.nav-btn[b-2qcnvi37bc] {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 4px;
  border: 1px solid var(--rz-primary, #3f51b5);
  color: var(--rz-primary, #3f51b5);
  background: transparent;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.nav-btn:hover[b-2qcnvi37bc] {
  background: var(--rz-primary-lighter, #e8eaf6);
  text-decoration: none;
}

.nav-btn-next[b-2qcnvi37bc] {
  background: var(--rz-primary, #3f51b5);
  color: var(--rz-on-primary, #fff);
}

.nav-btn-next:hover[b-2qcnvi37bc] {
  background: var(--rz-primary-dark, #303f9f);
  color: var(--rz-on-primary, #fff);
}
/* /Components/Shared/Menu/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-tviv1qmnx1] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-tviv1qmnx1] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-tviv1qmnx1] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-tviv1qmnx1] {
    font-size: 1.1rem;
}

.bi[b-tviv1qmnx1] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-tviv1qmnx1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-tviv1qmnx1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-tviv1qmnx1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-tviv1qmnx1] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-tviv1qmnx1] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-tviv1qmnx1] {
        padding-bottom: 1rem;
    }

    .nav-item[b-tviv1qmnx1]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 8px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-tviv1qmnx1]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-tviv1qmnx1]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-tviv1qmnx1] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-tviv1qmnx1] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-tviv1qmnx1] {
        display: none;
    }

    .nav-scrollable[b-tviv1qmnx1] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);*/
        overflow-y: auto;
    }
}
/* /Components/Shared/Menu/RadzenNavMenu2.razor.rz.scp.css */
/* Rounded, tinted background for the panel menu. ::deep is required because the
   <ul.rz-panel-menu> markup is rendered by the child RadzenPanelMenu component,
   not directly in this component's markup. */
/* Paint the wrapper with the same tint so the panel's rounded corners reveal
   the rail tint rather than the dark menu container the layouts place behind it. */
.nav2-wrapper[b-8ko9htcwaj] {
  background-color: var(--app-rail);
  /* eliminate the rounded border now that the menus are flushed left */
  /*border-radius: 12px;
    */

  overflow: hidden; /* clip the menu/title to the rounded corners */
  /* padding: 12px; bring menus closer together */
  position: relative;
  width: 100%;
}

/* Header container for title and pin button */
.nav2-header-container[b-8ko9htcwaj] {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--app-rule);
  padding-bottom: 10px;
  height: 38px;
  margin-bottom: 10px;
  margin-top: 2px;
}

/* Menu title — also the collapse toggle (a <label>) at narrow widths. */
.nav2-title[b-8ko9htcwaj] {
  display: block;
  text-align: center;
  color: var(--app-primary);
  font-size: 1.15rem; /* Slightly reduced title size */
  font-weight: 600;
}

/* Pin / Toggle Buttons styling */
.sidebar-pin-btn[b-8ko9htcwaj] {
  position: absolute;
  right: 6px;
  top: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--app-primary);
  font-size: 1rem;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0.65;
  
}

.sidebar-pin-btn:hover[b-8ko9htcwaj] {
  background-color: var(--app-rail-hover);
  opacity: 1;
}

.sidebar-pin-btn .fa-icon-v7[b-8ko9htcwaj] {
  width: 14px;
  height: 14px;
  display: inline-flex;
  transition: transform 0.2s ease;
}

.sidebar-pin-btn.unpinned .fa-icon-v7[b-8ko9htcwaj] {
  transform: rotate(-45deg);
  color: #8b8896;
}

.sidebar-pin-btn.pinned .fa-icon-v7[b-8ko9htcwaj] {
  transform: rotate(0deg);
}

.fa-icon-v7[b-8ko9htcwaj] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.fa-icon-v7 svg[b-8ko9htcwaj] {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
}

.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-icon.fa-icon-v7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-icon.fa-icon-v7 svg {
  width: 100%;
  height: 100%;
}

/* Compact (Unpinned) Mode Styling */
.nav2-wrapper-compact[b-8ko9htcwaj] {
  
  position: absolute;
  left: 6px;
  top: 12px;
  width: 58px; /* 70px - 12px spacing */
  height: calc(100% - 24px);
  z-index: 100;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Hover expansion */
.nav2-wrapper-compact:hover[b-8ko9htcwaj] {
  width: var(--expanded-width, 250px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.1);
  overflow: visible; /* Let text and hover shadows display nicely */
  z-index: 120 !important; /* Stand above everything when hovered */
}

/* Hide elements when compact and not hovered */
.nav2-wrapper-compact:not(:hover) .nav2-title[b-8ko9htcwaj],
.nav2-wrapper-compact:not(:hover)[b-8ko9htcwaj]  .rz-navigation-item-text,
.nav2-wrapper-compact:not(:hover)[b-8ko9htcwaj]  .rz-navigation-item-icon-children,
.nav2-wrapper-compact:not(:hover) .sidebar-pin-btn[b-8ko9htcwaj],
.nav2-wrapper-compact:not(:hover) .admin-menu-header[b-8ko9htcwaj] {
  opacity: 0 !important;
  pointer-events: none;
}

.nav2-wrapper-compact:not(:hover)[b-8ko9htcwaj]  .rz-navigation-item-text,
.nav2-wrapper-compact:not(:hover)[b-8ko9htcwaj]  .rz-navigation-item-icon-children {
  display: none !important;
}

.nav2-wrapper-compact:not(:hover) .nav2-header-container[b-8ko9htcwaj],
.nav2-wrapper-compact:not(:hover) .admin-menu-header[b-8ko9htcwaj] {
  border-bottom-color: transparent;
}

/* Animate text fading back in */
.nav2-wrapper-compact .nav2-title[b-8ko9htcwaj],
.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-text,
.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-icon-children,
.nav2-wrapper-compact .sidebar-pin-btn[b-8ko9htcwaj],
.nav2-wrapper-compact .admin-menu-header[b-8ko9htcwaj] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease 0.05s;
}

/* Center icons when compact and not hovered. The collapsed row (.rz-navigation-item-wrapper)
   only has ~34px of content width (58px wrapper minus 24px of padding), so the normal
   10px left/right margin plus a left-padding offset pushed the 20px icon past the row's
   right edge, where it got clipped by that row's overflow:hidden. Zero out the margin and
   let flexbox center the icon within the full available width instead. */
.nav2-wrapper-compact:not(:hover)[b-8ko9htcwaj]  .rz-navigation-item-link {
  padding: 6px 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center;
}

.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-link {
  transition: padding 0.2s ease, margin 0.2s ease;
}

/* Bigger icons in the fully collapsed (not hovered) strip — there's no text next to
   them there, and more visual room now that the link has no left/right margin. */
.nav2-wrapper-compact:not(:hover)[b-8ko9htcwaj]  .rz-navigation-item-icon.fa-icon-v7 {
  font-size: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  transition: none;
}

/* ============================================================================
   Tooltip-compact mode (CompactTooltipMode="true"; the main internal menu).
   The unpinned strip NEVER widens on hover. Instead, hovering the menu fades in
   the pin thumbtack at the top strip (click to pin → expanded), and hovering an
   individual item shows its caption as a bubble tooltip beside the icon. Because
   the strip is always visually compact, these rules apply regardless of :hover.
   They sit after the plain-compact rules so equal-specificity ties resolve here.
   ============================================================================ */

/* Do not expand on hover: keep the 58px strip; drop the lift shadow; let the
   caption bubbles overflow the strip. (3 classes beats the plain :hover rule.) */
.nav2-tooltip-mode.nav2-wrapper-compact:hover[b-8ko9htcwaj] {
  width: 58px;
  box-shadow: none;
  overflow: visible;
}

/* Keep the compact visuals (centered enlarged icons, no captions inline) whether
   or not the strip is hovered — the plain-compact versions above are gated on
   :not(:hover), which stops applying once you hover to read a tooltip. */
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-link {
  padding: 6px 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center;
  position: relative; /* anchor for the caption bubble */
}

.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-icon.fa-icon-v7 {
  font-size: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

/* No room for the expand chevron in the strip. */
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-icon-children {
  display: none !important;
}

/* The menu group titles ("Main menu", "Administrator Menu") have no room. */
.nav2-tooltip-mode.nav2-wrapper-compact .nav2-title[b-8ko9htcwaj],
.nav2-tooltip-mode.nav2-wrapper-compact .admin-menu-header[b-8ko9htcwaj] {
  display: none !important;
}

/* Slim empty top strip that holds the pin thumbtack. */
.nav2-tooltip-mode.nav2-wrapper-compact .nav2-header-container[b-8ko9htcwaj] {
  height: 26px;
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: none;
}

/* Center the pin thumbtack in the top strip; it still fades in on menu hover via
   the shared .sidebar-pin-btn reveal rules above. */
.nav2-tooltip-mode.nav2-wrapper-compact .sidebar-pin-btn[b-8ko9htcwaj] {
  right: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Let the caption bubble escape every ancestor's clipping. The Radzen panel-menu
   <ul> defaults to overflow:auto; since the (absolutely-positioned) caption bubbles
   extend to the right of the 58px strip, that overflow would otherwise inflate the
   ul's scroll area and paint themed scrollbars. Force visible so bubbles show and no
   scrollbars appear. */
.nav2-tooltip-mode.nav2-wrapper-compact .nav2-menu-body[b-8ko9htcwaj] {
  overflow: visible !important;
}

.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-panel-menu,
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-menu,
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item,
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-wrapper {
  overflow: visible !important;
  /* Remove the horizontal inset so each row's link fills the full 58px strip. This
     makes the caption pill's geometry predictable: left:0 = strip left, so the pill
     wraps the centered icon and reaches the right bar without a gap. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Caption "tooltip": a rounded pill anchored to the row's left edge that wraps around
   the centered icon and extends past the strip's right bar with the caption text. It
   spans the full row (left:0 / top:0 / bottom:0), so its rounded border encloses the
   icon and it touches the strip's right bar seamlessly — no gap. Revealed only while
   its item is hovered. The icon is lifted above this pill (rule below) so it stays
   visible on the purple field. */
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-text {
  display: flex !important;
  align-items: center;
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  padding-left: 56px;   /* clear the centered icon; text lands just past the 58px strip */
  padding-right: 14px;
  background-color: var(--app-primary);
  color: var(--app-on-primary) !important;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 0.8rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 200;
}

.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-link:hover .rz-navigation-item-text {
  opacity: 1;
}

/* Lift the icon above the caption pill and give it its own light chip that matches
   the strip tint. The chip is invisible against the resting strip (same colour) and
   only reveals once the purple pill lays behind it on hover — so the icon keeps its
   normal dark colour on its familiar background instead of sitting on the purple.
   box-sizing:content-box keeps the glyph at 1.5rem and grows the chip via padding. */
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .rz-navigation-item-icon {
  position: relative;
  z-index: 210;
  background-color: var(--app-rail);
  border-radius: 6px;
  padding: 5px;
  box-sizing: content-box;
}

/* ============================================================================
   Right-click target (administrators: the InternetMenus context menu).
   Every item's Template content is wrapped in span.nav2-item-body carrying the
   @oncontextmenu handler. It fills the link (flex:1 1 auto) so a right-click on the
   icon, the caption or the row's padding all reach it - in the collapsed rails the
   caption span is display:none / pointer-events:none, so the wrapper is what makes
   the whole row a target there. position:static on purpose: the tooltip-mode caption
   pill (absolute, rules above) is anchored on .rz-navigation-item-link
   {position:relative}, and a positioned wrapper would steal that anchor. ::deep
   because the span is rendered inside RadzenPanelMenuItem's own markup.
   ============================================================================ */
.nav2-wrapper[b-8ko9htcwaj]  .nav2-item-body {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  position: static;
}

/* Collapsed strips center their icon through .rz-navigation-item-link
   {justify-content:center}; now that the icon sits inside the full-width wrapper,
   the wrapper has to do the centering. */
.nav2-wrapper-compact:not(:hover)[b-8ko9htcwaj]  .nav2-item-body,
.nav2-tooltip-mode.nav2-wrapper-compact[b-8ko9htcwaj]  .nav2-item-body {
  justify-content: center;
}

/* General Menu Item Font Size and Spacing Reductions */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-text {
  font-size: 0.875rem !important; /* Reduced from 1rem default */
}

.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-link {
  padding: 6px 10px !important; /* Tightened from 8px 16px */
  margin: 2px 10px !important;  /* Tightened vertical margin */
}

/* Step children in so the parent/child relationship reads visually (e.g. Intake's
   Applicant/Credit Report/Accounts children) — the blanket padding override above
   flattens Radzen's own per-level offset (it targets every .rz-navigation-item-link
   alike), so reapply a smaller step-in here. Scoped to :not(.nav2-wrapper-compact) so
   it never competes with the compact/tooltip-mode resets below, which keep collapsed
   icons centered with zero padding and never show an expanded tree. */
.nav2-wrapper:not(.nav2-wrapper-compact)[b-8ko9htcwaj]  .rz-navigation-menu .rz-navigation-item-link {
  padding-inline-start: 28px !important;
}

.nav2-wrapper:not(.nav2-wrapper-compact)[b-8ko9htcwaj]  .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link {
  padding-inline-start: 46px !important;
}

/* ...and cancel the negative pull the theme puts on every nested icon
   (.rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon sets
   margin-inline: -26px 10px). That pull assumes nested rows have no icon, so the
   child's TEXT lands under the parent's; with an icon in every row it instead
   dragged each child icon 8px left of its parent's and the step-in above was
   cancelled out — the hierarchy read backwards. Only the start margin is reset,
   keeping the theme's 10px icon-to-text gap. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-menu .rz-navigation-item-icon {
  margin-inline-start: 0;
}

/* The collapse checkbox is a state holder only; never shown. */
.nav2-toggle-input[b-8ko9htcwaj] {
  display: none;
}

/* Below the stacking breakpoint, hide the menu body until the title is clicked.
   At wider widths this rule is inactive, so the menu is always visible. */
@media (max-width: 640.98px) {
  .nav2-toggle-input:not(:checked) ~ .nav2-menu-body[b-8ko9htcwaj] {
    display: none;
  }

  /* The title only acts as a toggle when stacked, so show the pointer here only. */
  .nav2-title[b-8ko9htcwaj] {
    cursor: pointer;
  }
}

.nav2-wrapper[b-8ko9htcwaj]  .rz-panel-menu {
  background-color: var(--app-rail);
}

/* Expanded submenu container — the theme gives nested menus their own dark
   background; keep it transparent so the rail tint (--app-rail) shows through. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-menu {
  background-color: transparent;
}

/* Black text/icons for the menu items. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-link,
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-text,
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-icon {
  color: var(--app-rail-ink);
}

/* The rail is the one surface where the duotone glyphs carry colour: eight identical
   grey icons is most of what made this rail read as dead. Content icons stay neutral. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-icon {
  --fa-primary-color: var(--app-rail-icon-1);
  --fa-secondary-color: var(--app-rail-icon-2);
}

.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-icon {
  --fa-primary-color: var(--app-primary-ink);
  --fa-secondary-color: var(--app-primary-light);
}

/* No dividing border between menu items. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item,
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-link {
  border: none;
}

/* Highlighted row (hover or selected) rendered as an inset row with rounded corners.
   The selected state is marked by .rz-navigation-item-wrapper-active on the wrapper. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-link {
  border-radius: 8px;
  margin: 3px 10px;
}

/* Keep every item wrapper (top-level and nested submenu rows) transparent so the
   highlight lives only on the inner link and the panel tint shows everywhere else.
   The theme tints these wrappers (and/or their ::before) dark for nested levels. */
/* !important because the theme's nested-submenu selector is more specific than
   this single-class rule and would otherwise win. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper {
  background-color: transparent !important;
  background-image: none !important;
}

/* The theme draws a highlight/tint via a ::before pseudo-element on the wrapper;
   neutralize its background so only the link's own highlight shows. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper::before {
  background: none !important;
}

/* The theme paints a grey hover (#B2A59F) on the item/wrapper that shows in the
   margin gap around the inset link. Keep it transparent so the rail tint (--app-rail)
   shows through and only the link itself highlights. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item:hover,
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper:hover {
  background-color: transparent;
}

.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-link:hover {
  background-color: var(--app-rail-hover);
}

/* Selected menu item. White text/icon so it stays legible on the dark background. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper-active > .rz-navigation-item-link {
  background-color: var(--app-primary-soft);
}

.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-text,
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-icon {
  color: var(--app-primary-ink);
}

/* Weight, not just tint. The selected row is the one question a rail exists to answer, and
   a pale tint on a pale rail was not answering it on its own. */
.nav2-wrapper[b-8ko9htcwaj]  .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-text {
  font-weight: 700;
}
/* /Components/Shared/NoteThread/NoteThreadView.razor.rz.scp.css */
/* Note thread control. Colours and shapes intentionally mirror the Debtor Interaction panels
   (task cards, count badges, status pills) so the thread reads as part of the same screen. */

.nt-root[b-fnq7dg43mq] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  font-size: 0.8rem;
  color: var(--app-ink);
}

.nt-info[b-fnq7dg43mq] {
  color: var(--app-ink-2);
  font-style: italic;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
}

/* ----------------------------------- toolbar ---------------------------------- */

.nt-toolbar[b-fnq7dg43mq] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

/* Same pill as the "N interactions" and task counts on the surrounding panels. */
.nt-count[b-fnq7dg43mq] {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--app-primary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
}

.nt-toggle-all[b-fnq7dg43mq] {
  margin-left: auto;
  background-color: var(--app-surface);
  border: 1px solid var(--app-rule);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--app-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nt-toggle-all:hover[b-fnq7dg43mq] {
  border-color: var(--app-primary);
  color: var(--app-primary);
}

/* Panel-width default: tree above, detail below. Side by side once there is room for it. */
.nt-split[b-fnq7dg43mq] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
}

.nt-tree[b-fnq7dg43mq] {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 55%;
  padding-right: 0.25rem;
}

/* ---------------------------------- tree rows --------------------------------- */

.nt-row[b-fnq7dg43mq] {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.nt-twisty[b-fnq7dg43mq] {
  flex: 0 0 16px;
  width: 16px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--app-ink-2);
  font-size: 0.7rem;
  line-height: 22px;
  cursor: pointer;
}

.nt-twisty.nt-leaf[b-fnq7dg43mq] {
  cursor: default;
}

.nt-card[b-fnq7dg43mq] {
  flex: 1;
  min-width: 0;
  background-color: var(--app-surface);
  border: 1px solid var(--app-rule);
  border-left: 3px solid var(--app-rule);
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nt-card:hover[b-fnq7dg43mq] {
  border-color: var(--app-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* The note the user arrived from keeps its marker no matter what is selected, so they never lose
   track of where they came in. Selection is a separate, louder treatment. */
.nt-card.nt-origin[b-fnq7dg43mq] {
  border-left-color: var(--app-primary);
}

.nt-card.nt-selected[b-fnq7dg43mq] {
  border-color: var(--app-primary);
  background-color: var(--app-primary-softer);
  box-shadow: 0 0 0 1px rgba(26, 93, 230, 0.25);
}

.nt-meta[b-fnq7dg43mq] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.nt-id[b-fnq7dg43mq] {
  font-size: 0.68rem;
  color: var(--app-ink-2);
  font-weight: 600;
}

.nt-date[b-fnq7dg43mq] {
  font-size: 0.68rem;
  color: var(--app-ink-2);
  margin-left: auto;
  white-space: nowrap;
  padding-left: 0.4rem;
}

.nt-origin-chip[b-fnq7dg43mq] {
  font-size: 0.62rem;
  font-weight: 600;
  background-color: var(--app-primary-softer);
  color: var(--app-primary-hover);
  border-radius: 10px;
  padding: 0 0.4rem;
  white-space: nowrap;
}

.nt-hidden-count[b-fnq7dg43mq] {
  font-size: 0.65rem;
  color: var(--app-ink-2);
  font-style: italic;
}

/* Two lines in the tree; the whole note is one click away in the detail pane. */
.nt-text[b-fnq7dg43mq] {
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------- detail pane -------------------------------- */

.nt-detail[b-fnq7dg43mq] {
  background-color: var(--app-surface);
  border: 1px solid var(--app-rule);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 45%;
}

.nt-detail-head[b-fnq7dg43mq] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--app-rule);
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
}

/* ------------------------- structured (JSON) note bodies ---------------------- */

.nt-raw-toggle[b-fnq7dg43mq] {
  margin-left: 0.3rem;
  background-color: var(--app-surface);
  border: 1px solid var(--app-rule);
  border-radius: 6px;
  padding: 0 0.35rem;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--app-ink-2);
  cursor: pointer;
}

.nt-raw-toggle:hover[b-fnq7dg43mq] {
  border-color: var(--app-primary);
  color: var(--app-primary);
}

.nt-fields[b-fnq7dg43mq] {
  margin: 0;
}

.nt-field[b-fnq7dg43mq] {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--app-surface-2);
}

.nt-field:last-child[b-fnq7dg43mq] {
  border-bottom: none;
}

.nt-field dt[b-fnq7dg43mq] {
  flex: 0 0 42%;
  font-size: 0.7rem;
  color: var(--app-ink-2);
  overflow-wrap: anywhere;
}

.nt-field dd[b-fnq7dg43mq] {
  flex: 1;
  margin: 0;
  font-size: 0.75rem;
  color: var(--app-ink);
  overflow-wrap: anywhere;
}

.nt-field dd.nt-empty[b-fnq7dg43mq] {
  color: var(--app-ink-3);
}

/* A nested object or list item: its name labels the block below it rather than a value. */
.nt-field-heading[b-fnq7dg43mq] {
  border-bottom: none;
  padding-top: 0.3rem;
}

.nt-field-heading dt[b-fnq7dg43mq] {
  flex: 1 1 auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--app-ink);
}

.nt-detail-body[b-fnq7dg43mq] {
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

/* Side by side once the host gives the control enough width (an overlay, or a wide screen). */
@media (min-width: 640px) {
  .nt-split[b-fnq7dg43mq] {
    flex-direction: row;
  }

  .nt-tree[b-fnq7dg43mq] {
    flex: 1 1 55%;
  }

  .nt-detail[b-fnq7dg43mq] {
    flex: 1 1 45%;
  }
}
/* /Components/Shared/Payments/PayNowPanel.razor.rz.scp.css */
/* The customer Pay Now dialog. Built mobile-first: this is the one screen a client is most likely
   to open from an SMS or an email link on a phone. */

.paynow-panel[b-l88kdwjiv7] {
  max-width: 46rem;
}

/* ---------- Amount headline ---------- */
/* The amount owed is a FACT, presented as one, not a pre-filled text box the customer can fat-finger.
   The legacy DQ put an editable amount in front of every payer. */
.paynow-amount[b-l88kdwjiv7] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-radius: var(--rz-border-radius, 4px);
  background: var(--rz-base-200, #f4f5f7);
}

.paynow-amount-label[b-l88kdwjiv7] {
  font-size: 0.9rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

.paynow-amount-value[b-l88kdwjiv7] {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Account mode: which account this amount belongs to. Sits directly under the figure it qualifies. */
.paynow-subject[b-l88kdwjiv7] {
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
  color: var(--rz-text-secondary-color, #6c757d);
  overflow-wrap: anywhere;
}

/* ---------- Amount / fee breakdown ---------- */
.paynow-summary[b-l88kdwjiv7] {
  margin: 0;
}

.paynow-summary > div[b-l88kdwjiv7] {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}

.paynow-summary dt[b-l88kdwjiv7] {
  font-weight: 400;
  color: var(--rz-text-secondary-color, #6c757d);
  margin: 0;
}

.paynow-summary dd[b-l88kdwjiv7] {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.paynow-summary-total[b-l88kdwjiv7] {
  border-top: 1px solid var(--rz-border-color, #dee2e6);
  margin-top: 0.25rem;
  padding-top: 0.5rem !important;
  font-weight: 600;
}

.paynow-summary-total dt[b-l88kdwjiv7] {
  color: inherit;
}

/* ---------- Form ---------- */
/* auto-fit rather than fixed columns: the same markup gives two columns on a desktop dialog and one
   on a phone with no media query to keep in step. */
.paynow-grid[b-l88kdwjiv7] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.paynow-field[b-l88kdwjiv7] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.paynow-field-wide[b-l88kdwjiv7] {
  grid-column: 1 / -1;
}

/* ---------- Result ---------- */
.paynow-result[b-l88kdwjiv7] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--rz-border-radius, 4px);
}

.paynow-result-ok[b-l88kdwjiv7] {
  background: var(--rz-success-lighter, #e8f5e9);
  color: var(--rz-success-dark, #1b5e20);
}

.paynow-result-ok .rz-icon[b-l88kdwjiv7] {
  font-size: 1.75rem;
}

.paynow-result-title[b-l88kdwjiv7] {
  font-weight: 600;
  font-size: 1.1rem;
}

.paynow-result-sub[b-l88kdwjiv7] {
  color: inherit;
  opacity: 0.85;
}

/* What the payment is for, under the amount. Quiet: it identifies, it does not sell. */
.paynow-target[b-l88kdwjiv7] {
  color: var(--rz-text-secondary-color);
  margin-top: -0.35rem;
  margin-bottom: 0.75rem;
}

.paynow-partial[b-l88kdwjiv7] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.paynow-partial-hint[b-l88kdwjiv7] {
  color: var(--rz-text-secondary-color);
  font-size: 0.875rem;
}
/* /Components/Shared/Payments/SendPaymentLinkDialog.razor.rz.scp.css */
/* The /pay short code (3E.7). Sits below the send buttons because it is the FALLBACK channel - if
   the debtor has a mobile, the text is strictly better. */

.paynow-code-channel[b-d9h0jsatif] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.1));
}

/* Large, spaced and monospaced: these digits are READ ALOUD off the screen while someone else types
   them, so they have to be unambiguous at a glance and impossible to lose your place in. */
.paynow-code-digits[b-d9h0jsatif] {
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
/* /Components/Shared/SearchBoxField.razor.rz.scp.css */
/* The searchbox field: looks like a textbox, acts like a button. Sizing tracks the Radzen
   inputs beside it so a mixed row of pickers and date pickers reads as one form. */

.sbx[b-30n1tbfevq] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--rz-input-border, #ccc);
  border-radius: var(--rz-input-border-radius, 4px);
  background: var(--rz-input-background-color, #fff);
  color: var(--rz-text-color, inherit);
  font-size: var(--rz-input-font-size, 0.875rem);
  text-align: left;
  cursor: pointer;
}

.sbx:hover:not(:disabled)[b-30n1tbfevq],
.sbx:focus-visible:not(:disabled)[b-30n1tbfevq] {
  border-color: var(--rz-input-hover-border, #999);
}

.sbx-text[b-30n1tbfevq] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbx-placeholder[b-30n1tbfevq] {
  color: var(--rz-text-disabled-color, #9e9e9e);
}

/* The magnifying glass: present for layout, invisible until the field is hovered or focused. */
.sbx-icon[b-30n1tbfevq] {
  flex: 0 0 auto;
  font-size: 1.05rem !important;
  color: var(--rz-text-secondary-color, #757575);
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.sbx:hover .sbx-icon[b-30n1tbfevq],
.sbx:focus-visible .sbx-icon[b-30n1tbfevq],
.sbx:focus .sbx-icon[b-30n1tbfevq] {
  opacity: 1;
}

.sbx-disabled[b-30n1tbfevq],
.sbx:disabled[b-30n1tbfevq] {
  background: var(--rz-input-disabled-background-color, #f5f5f5);
  color: var(--rz-text-disabled-color, #9e9e9e);
  cursor: default;
}
/* /Components/Shared/SearchPickerDialog.razor.rz.scp.css */
.spk[b-pqs6fus44s] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.spk-filter[b-pqs6fus44s] {
  padding: 0.35rem 0.5rem;
}

.spk-list[b-pqs6fus44s] {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--rz-base-300, #e0e0e0);
  border-radius: 4px;
}

.spk-row[b-pqs6fus44s] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--rz-base-200, #f0f0f0);
  background: transparent;
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
}

.spk-row:last-child[b-pqs6fus44s] {
  border-bottom: 0;
}

.spk-row:hover[b-pqs6fus44s],
.spk-row:focus-visible[b-pqs6fus44s] {
  background: var(--rz-base-100, #f5f5f5);
}

.spk-selected[b-pqs6fus44s] {
  font-weight: 600;
  background: var(--rz-info-lighter, #e3f2fd);
}

.spk-row-text[b-pqs6fus44s] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spk-check[b-pqs6fus44s] {
  flex: 0 0 auto;
  font-size: 1rem !important;
  color: var(--rz-info, #1976d2);
}

.spk-clear[b-pqs6fus44s] {
  color: var(--rz-text-secondary-color, #757575);
  font-style: italic;
}

.spk-empty[b-pqs6fus44s] {
  padding: 0.5rem 0.6rem;
}
/* /Components/Shared/Search/QueueCountBadge.razor.rz.scp.css */
/* Count pill. The number's own colours come from the SavedSearches row as an inline style, so nothing
   here may set background-color or color on the plain badge — it would win over the customer's. */

.queue-count-badge[b-bz87o2kigp] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bs-secondary-bg);
}

.queue-count-badge--muted[b-bz87o2kigp] {
  background: transparent;
  color: var(--bs-secondary-color);
  font-weight: 400;
}

.queue-count-badge--failed[b-bz87o2kigp] {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

/* Not-yet-counted. A shimmer rather than a spinner: a rail can show a dozen of these at once and a
   dozen spinners reads as an error state. */
.queue-count-badge--pending[b-bz87o2kigp] {
  background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 37%, var(--bs-secondary-bg) 63%);
  background-size: 400% 100%;
  animation: queue-count-shimmer-b-bz87o2kigp 1.4s ease infinite;
}

@keyframes queue-count-shimmer-b-bz87o2kigp {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .queue-count-badge--pending[b-bz87o2kigp] { animation: none; }
}
/* /Components/Shared/Search/SavedSearchRail.razor.rz.scp.css */
/* Queue rail. Scoped to this component only — nothing here is meant to reach CSGrid rows. */

.saved-search-rail[b-vacmt0pg37] {
  height: 100%;
  overflow-y: auto;
}

.rail-header[b-vacmt0pg37] {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  position: sticky;
  top: 0;
  background: var(--bs-body-bg);
  z-index: 1;
}

.rail-group-title[b-vacmt0pg37] {
  padding: 0.6rem 0.75rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* A button, not a div, so the rail is reachable and operable from the keyboard for free. */
.rail-row[b-vacmt0pg37] {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name  count"
    "desc  count";
  align-items: center;
  gap: 0 0.5rem;
  width: 100%;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  color: inherit;
}

.rail-row:hover[b-vacmt0pg37] {
  background: var(--bs-secondary-bg);
}

.rail-row--selected[b-vacmt0pg37] {
  background: var(--bs-primary-bg-subtle);
  border-left-color: var(--bs-primary);
}

.rail-row-name[b-vacmt0pg37] {
  grid-area: name;
  font-size: 0.86rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.rail-row-description[b-vacmt0pg37] {
  grid-area: desc;
  font-size: 0.74rem;
  color: var(--bs-secondary-color);
  /* Descriptions are free text and run long; two lines is enough to disambiguate two similar queues. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rail-row-count[b-vacmt0pg37] {
  grid-area: count;
  justify-self: end;
}
/* /Components/Shared/SectionStub.razor.rz.scp.css */
.section-stub[b-5resyageg4] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  margin-bottom: 1rem;
  border: 1px dashed var(--rz-base-300, #e0e0e0);
  border-radius: 6px;
  color: var(--rz-text-secondary-color, #757575);
  font-size: 0.85rem;
}

/* ::deep, because SvgIcon renders the <i>/<svg> outside this component's markup - a plain
   .section-stub-icon would compile to .section-stub-icon[b-xxxxx] and match nothing. The tones
   come from the two variables rather than color:, and font-size still drives the size (app.css
   sizes the inner svg in em). */
.section-stub[b-5resyageg4]  .section-stub-icon {
  font-size: 1.1rem;
  color: var(--rz-text-disabled-color, #9e9e9e);
  --fa-primary-color: var(--rz-text-disabled-color, #9e9e9e);
  --fa-secondary-color: var(--rz-text-disabled-color, #9e9e9e);
}

.section-stub-title[b-5resyageg4] {
  font-weight: 600;
}

.section-stub-hint[b-5resyageg4] {
  color: var(--rz-text-disabled-color, #9e9e9e);
}

/* The (+): reserved space always, visible on hover or when reached by keyboard. */
.section-stub-add[b-5resyageg4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--rz-base-300, #e0e0e0);
  border-radius: 50%;
  background: var(--rz-base-background-color, #fff);
  color: var(--rz-text-secondary-color, #757575);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.section-stub:hover .section-stub-add[b-5resyageg4],
.section-stub:focus-within .section-stub-add[b-5resyageg4] {
  opacity: 1;
}

.section-stub-add:hover[b-5resyageg4] {
  background: var(--rz-base-100, #f5f5f5);
  color: var(--rz-text-color, #212121);
}
/* /Components/Shared/Telephony/IncomingCallCard.razor.rz.scp.css */
/*
   The inbound-call card. Bottom centre, per the mockup: out of the reading path, nothing above it
   moves, and it is where the chat dock already lives.

   Every colour is an app token, so it follows the portal's light and dark palettes without a
   second definition here.
*/

.icco-call-card[b-67rxhl3bu2] {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  width: 420px;
  max-width: calc(100vw - 32px);
  z-index: 1080;                      /* above page chrome, below Radzen dialogs */
  background: var(--app-surface);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius-card);
  box-shadow: var(--app-shadow-hover);
  overflow: hidden;
}

.icco-call-accent[b-67rxhl3bu2] {
  height: 3px;
  background: var(--app-primary);
}

.icco-call-accent.on-call[b-67rxhl3bu2] {
  background: var(--app-success);
}

.icco-call-body[b-67rxhl3bu2] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
}

.icco-call-badge[b-67rxhl3bu2] {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icco-call-badge.ringing[b-67rxhl3bu2] {
  background: var(--app-primary-soft);
  color: var(--app-primary-ink);
  animation: icco-call-pulse-b-67rxhl3bu2 1.6s ease-out infinite;
}

.icco-call-badge.on-call[b-67rxhl3bu2] {
  background: var(--app-success-soft);
  color: var(--app-success-ink);
}

@keyframes icco-call-pulse-b-67rxhl3bu2 {
  0%   { box-shadow: 0 0 0 0 var(--app-primary-tint); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* An agent who prefers no motion still gets the card, just without the pulse. */
@media (prefers-reduced-motion: reduce) {
  .icco-call-badge.ringing[b-67rxhl3bu2] { animation: none; }
}

.icco-call-main[b-67rxhl3bu2] {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.icco-call-eyebrow[b-67rxhl3bu2] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-ink-2);
}

.icco-call-timer[b-67rxhl3bu2] {
  font-family: Consolas, "Courier New", monospace;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--app-ink-2);
}

.icco-call-number[b-67rxhl3bu2] {
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--app-ink-3);
}

.icco-call-name[b-67rxhl3bu2] {
  font-size: 16px;
  font-weight: bold;
  color: var(--app-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icco-call-sub[b-67rxhl3bu2] {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--app-ink-2);
}

.icco-call-chip[b-67rxhl3bu2] {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--app-info-soft);
  color: var(--app-info-ink);
  font-size: 11px;
  font-weight: bold;
}

.icco-call-chip.muted[b-67rxhl3bu2] {
  background: var(--app-primary-softer);
  color: var(--app-ink-2);
}

.icco-call-actions[b-67rxhl3bu2] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- the multi-match list ---------------------------------------------------------------- */

.icco-call-list[b-67rxhl3bu2] {
  border-top: 1px solid var(--app-rule);
  background: var(--app-ground);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.icco-call-row[b-67rxhl3bu2] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--app-surface);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius-control);
  cursor: pointer;
}

.icco-call-row:hover[b-67rxhl3bu2] {
  border-color: var(--app-primary);
  background: var(--app-primary-softer);
}

/* Inactive is shown, never hidden - a call from a closed record is when that matters most. */
.icco-call-row.inactive[b-67rxhl3bu2] {
  border-style: dashed;
}

.icco-call-row.inactive .icco-call-row-name[b-67rxhl3bu2] {
  color: var(--app-ink-2);
}

/* No route means no access. Still listed - knowing who is calling is not the same as being
   allowed to read the file - but not clickable, and it says why. */
.icco-call-row.locked[b-67rxhl3bu2] {
  cursor: not-allowed;
  opacity: 0.75;
}

.icco-call-row.locked:hover[b-67rxhl3bu2] {
  border-color: var(--app-rule);
  background: var(--app-surface);
}

.icco-call-row-main[b-67rxhl3bu2] {
  flex-grow: 1;
  min-width: 0;
}

.icco-call-row-name[b-67rxhl3bu2] {
  font-size: 13px;
  font-weight: bold;
  color: var(--app-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icco-call-row-sub[b-67rxhl3bu2] {
  font-size: 11px;
  color: var(--app-ink-3);
}

.icco-call-id[b-67rxhl3bu2] {
  font-size: 11px;
  color: var(--app-ink-3);
  min-width: 46px;
  text-align: right;
}

/* On a narrow viewport the card spans the width rather than sitting in a fixed 420px column. */
@media (max-width: 520px) {
  .icco-call-card[b-67rxhl3bu2] {
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
}

/* ---- the live call log ------------------------------------------------------------------
   Opens by itself when the call connects. That is deliberate: an agent who has to go looking
   for somewhere to type will not type, and a call log written after the call from memory is
   the thing this is meant to replace.
*/

.icco-call-log[b-67rxhl3bu2] {
  border-top: 1px solid var(--app-rule);
  background: var(--app-ground);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.icco-call-log-head[b-67rxhl3bu2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-ink-3);
}

/* The consequence of the chosen result, spelled out BEFORE saving. The desktop only ever asked
   afterwards, and never mentioned the do-not-call side effect at all. */
.icco-call-log-consequence[b-67rxhl3bu2] {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--app-warn-ink, var(--app-ink-2));
  background: var(--app-warn-softer, var(--app-surface));
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius-control);
  padding: 6px 8px;
}

.icco-call-log-actions[b-67rxhl3bu2] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icco-call-log-note[b-67rxhl3bu2] {
  font-size: 0.78rem;
  color: var(--app-ink-3);
  flex: 1;
  min-width: 0;
}

.icco-call-log-saved[b-67rxhl3bu2] {
  font-size: 0.78rem;
  color: var(--app-success-ink, var(--app-ink-2));
}
/* /Components/Views/PaymentsView.razor.rz.scp.css */
.payments-next[b-v25jiqg4mc] {
  border-left: 4px solid var(--rz-primary);
}

.payments-next-amount[b-v25jiqg4mc] {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

/* The row the Pay button is about, so the card and the table cannot be read as two different
   payments. */
.payments-row-next > td[b-v25jiqg4mc] {
  font-weight: 600;
}

.payments-table th[b-v25jiqg4mc] {
  font-weight: 600;
  white-space: nowrap;
}
/* /Components/Views/ViewClientInline.razor.rz.scp.css */
/* Merged into wwwroot/workspace-inline.css */
/* /Components/Views/ViewDebtorAccountCustomer.razor.rz.scp.css */
/* Customer account detail. Read-only by design - the classic portal's own layout for this screen
   marks every field IsReadOnly - so this is typography, not a form. */

.cust-acctd-head[b-q3rziv3g0w] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cust-acctd-figures[b-q3rziv3g0w] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.cust-acctd-figure[b-q3rziv3g0w] {
  display: flex;
  flex-direction: column;
}

.cust-acctd-label[b-q3rziv3g0w] {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rz-text-secondary-color, #6c757d);
}

/* The money is the page. Tabular figures so the columns of numbers line up. */
.cust-acctd-big[b-q3rziv3g0w] {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.cust-acctd-note[b-q3rziv3g0w] {
  font-size: 0.75rem;
  color: var(--rz-text-secondary-color, #6c757d);
}

/* Label/value pairs. A two-column grid rather than a table: it collapses to one column on a narrow
   screen without the horizontal scroll a table would force. */
.cust-acctd-detail[b-q3rziv3g0w] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem 2rem;
}

.cust-acctd-row[b-q3rziv3g0w] {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rz-base-200, #e9ecef);
}

.cust-acctd-rowlabel[b-q3rziv3g0w] {
  color: var(--rz-text-secondary-color, #6c757d);
}

.cust-acctd-rowvalue[b-q3rziv3g0w] {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  /* A flex item's min-width is auto, so a long co-applicant name would otherwise widen the row
     past its column instead of wrapping. */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* /Components/Views/ViewDebtorAccountList.razor.rz.scp.css */
/* Collection lens cell treatments (B3).
   Scoped to this component, so nothing here can reach another screen's CSGrid. */

/* ---- collected progress bar ---- */

.csacct-progress[b-54jcok37x3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 7rem;
}

    .csacct-progress[b-54jcok37x3]  .rz-progressbar {
        flex: 1 1 auto;
        min-width: 3.5rem;
    }

/* The bar clamps at 100%; this label carries the true figure, which can exceed it once fees and
   interest have also been paid. */
.csacct-progress-label[b-54jcok37x3] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-secondary-color, #6c757d);
}

/* ---- pills ---- */

.csacct-pill[b-54jcok37x3] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: nowrap;
    border: 1px solid transparent;
}

.csacct-pill-plan[b-54jcok37x3] {
    background: var(--rz-info-lighter, #e7f1ff);
    border-color: var(--rz-info-light, #b6d4fe);
    color: var(--rz-info-dark, #084298);
}

.csacct-pill-active[b-54jcok37x3] {
    background: var(--rz-warning-lighter, #fff3cd);
    border-color: var(--rz-warning-light, #ffe69c);
    color: var(--rz-warning-dark, #664d03);
}

.csacct-pill-done[b-54jcok37x3] {
    background: var(--rz-success-lighter, #d1e7dd);
    border-color: var(--rz-success-light, #a3cfbb);
    color: var(--rz-success-dark, #0a3622);
}

.csacct-pill-warn[b-54jcok37x3] {
    background: var(--rz-danger-lighter, #f8d7da);
    border-color: var(--rz-danger-light, #f1aeb5);
    color: var(--rz-danger-dark, #58151c);
}

.csacct-pill-neutral[b-54jcok37x3] {
    background: var(--rz-base-200, #e9ecef);
    border-color: var(--rz-base-300, #dee2e6);
    color: var(--rz-text-secondary-color, #495057);
}
/* /Components/Views/ViewDebtorAccountListCustomer.razor.rz.scp.css */
/* Customer account list. Cards rather than a grid: a customer has a handful of accounts and reads
   them, and this survives a phone screen where the staff grid's twelve columns do not. */

.cust-acct-list[b-6b0qgtavkd] {
  display: grid;
  /* auto-fill with a min track rather than fixed columns: one card per row on a phone, two or three
     on a desktop, with no breakpoint to keep in step with the shell. minmax's first value must stay
     a length, not %, or a long creditor name forces the whole page to scroll sideways. */
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.75rem;
}

.cust-acct-card[b-6b0qgtavkd] {
  border: 1px solid var(--rz-base-300, #dee2e6);
  border-radius: var(--rz-border-radius, 0.375rem);
  background: var(--rz-base-background-color, #fff);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* The card is the click target for the whole account, so it needs a visible focus ring for
     anyone driving the page from the keyboard. */
  outline-offset: 2px;
}

.cust-acct-card:hover[b-6b0qgtavkd],
.cust-acct-card:focus-visible[b-6b0qgtavkd] {
  border-color: var(--rz-primary, #0d6efd);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* A closed account stays legible - it is still the customer's record and its payment history is
   the point of keeping it - but recedes from the ones that still need attention. */
.cust-acct-closed[b-6b0qgtavkd] {
  background: var(--rz-base-100, #f8f9fa);
}

.cust-acct-head[b-6b0qgtavkd] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.cust-acct-name[b-6b0qgtavkd] {
  display: flex;
  flex-direction: column;
  /* Without this a long creditor name refuses to shrink and pushes the badge out of the card:
     a flex item's min-width is auto, not 0. */
  min-width: 0;
}

.cust-acct-creditor[b-6b0qgtavkd] {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cust-acct-number[b-6b0qgtavkd] {
  font-size: 0.8rem;
  color: var(--rz-text-secondary-color, #6c757d);
  overflow-wrap: anywhere;
}

.cust-acct-figures[b-6b0qgtavkd] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.cust-acct-figure[b-6b0qgtavkd] {
  display: flex;
  flex-direction: column;
}

.cust-acct-label[b-6b0qgtavkd] {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rz-text-secondary-color, #6c757d);
}

.cust-acct-value[b-6b0qgtavkd] {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
/* /Components/Views/ViewIssue.razor.rz.scp.css */
/* Command-header indicator styles (UI shape build order step 1). */

.priority-badge-wrap[b-uhubyio12a] {
  position: relative;
  display: inline-flex;
}

/* The raised recency dot on the priority badge: a real button (clickable, focusable) drawn as a
   small amber circle on the badge's shoulder. */
.priority-recency-dot[b-uhubyio12a] {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rz-base-background-color, var(--app-surface));
  background: var(--rz-warning, var(--app-warning));
  cursor: pointer;
}

.priority-recency-dot:hover[b-uhubyio12a] {
  background: var(--rz-warning-dark, var(--app-warning-dark));
}

/* Est-vs-actual hours chip: amber, like the over-estimate stat the Time & Billing merge will use. */
.hours-over-chip[b-uhubyio12a] {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rz-warning, var(--app-warning));
  border-radius: 999px;
  background: var(--rz-warning-lighter, var(--app-warning-soft));
  color: var(--rz-warning-darker, var(--app-warning-ink));
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}

.hours-over-chip:hover[b-uhubyio12a] {
  background: var(--rz-warning-light, var(--app-warning-soft));
}

/* ---- Reminder chip (the alarm icon beside the Scheduled date) ---- */

.reminder-chip[b-uhubyio12a] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--rz-text-color, var(--app-ink));
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.reminder-chip:hover[b-uhubyio12a] {
  border-color: var(--rz-base-300, var(--app-rule));
  background: var(--rz-base-100, var(--app-surface-2));
}

/* No reminder set: just the muted icon, inviting but quiet. */
.reminder-chip-empty[b-uhubyio12a] {
  color: var(--rz-text-disabled-color, var(--app-ink-3));
}
/* /Components/Views/ViewIssueCustomer.razor.rz.scp.css */
/* Customer task page (/task/{id}). Deliberately small: the page is a stack of shared cards, so
   almost all of its appearance comes from Bootstrap and the Radzen theme. What is here is the
   heading, the facts list and the charges table. */

.cust-task[b-p2u2qyre6t] {
  padding: 1rem;
  /* The customer layout has no page-level max-width, and a bare .row inside it overflows narrow
     screens. Everything below is a plain block, so the only rule needed is one that stops the
     facts list and the table from stretching to a desktop's full width and becoming unreadable. */
  max-width: 60rem;
}

.cust-task-head[b-p2u2qyre6t] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
}

.cust-task-title[b-p2u2qyre6t] {
  margin: 0;
}

.cust-task-cat[b-p2u2qyre6t] {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .875rem;
}

.cust-task-summary[b-p2u2qyre6t] {
  margin: .5rem 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* The facts list. A two-column grid on anything but a phone, where it stacks: a label and its
   value must never be split across a wrap, which is why each pair is its own .cust-task-fact
   element rather than loose dt/dd children of the dl. */
.cust-task-facts[b-p2u2qyre6t] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .35rem 1.5rem;
  margin: 0 0 1rem;
}

.cust-task-fact dt[b-p2u2qyre6t] {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.2;
}

.cust-task-fact dd[b-p2u2qyre6t] {
  margin: 0;
  font-weight: 500;
}

.cust-task-actions[b-p2u2qyre6t] {
  margin-bottom: 1rem;
}

.cust-task-amount[b-p2u2qyre6t] {
  font-weight: 600;
  font-size: 1.0625rem;
}

.cust-task-items th[b-p2u2qyre6t] {
  font-weight: 500;
  font-size: .8125rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Money and quantities read as columns only when they line up, which proportional digits do not
   do on their own. */
.cust-task-items td.text-end[b-p2u2qyre6t] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* /Components/Views/ViewLeadInline.razor.rz.scp.css */
/* Merged into wwwroot/workspace-inline.css */