/*!
 *
 * DecisionVault specific CSS
 *
 */

[x-cloak] {
    display: none !important;
}

/* Intake: flag an important (but still optional) field with a left red rail,
   matching the important-custom-question treatment on a single edge. */
.dv-field-important {
    border-left: 4px solid var(--danger, #e55353);
    border-radius: .25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.htmx-indicator {
    display: none;
}

.htmx-request .hxfeedback {
    display: inline;
}

.htmx-request.hxfeedback {
    display: inline;
}

/* HTMX Tab Transitions - Smooth fade effect */
#matter-tabs {
    transition: opacity 0.2s ease-in-out;
}

/* Fade out when swapping */
#matter-tabs.htmx-swapping {
    opacity: 0;
}

/* Start invisible when settling */
#matter-tabs.htmx-settling {
    opacity: 0;
}

/* Fade in after settled */
#matter-tabs.htmx-settled {
    opacity: 1;
}

.dv-constrain-message {
    max-width: 850px;
}

.dv-constrain-intake-card {
    max-width: 1250px;
}

.dv-underline {
    text-decoration: underline;
}

.dv-form-error {
    color: red;
    font-size: 80%;
}

.clickable {
    cursor: pointer;
}

.topline {
    border-top: 1px solid #eee;
    margin-top: 5px;
    padding-top: 10px;
}

.dv-logo-sign {
    height: 30px;
    width: 30px;
}

.left-table-edge {
    border-left: solid 1px #d8dbe0;
}

.left-table-edge-summary {
    border-left: solid 2px #1f1f20;
}

.summary-box {
    background-color: #1f1f20;
    color: #ffffff;
    border-top: solid 1px #1f1f20;
    border-bottom: solid 1px #1f1f20;
}

/* Ensure black top border for summary box in table header */
.table th.summary-box {
    border-top-color: #1f1f20 !important;
}

.right-table-edge {
    border-right: solid 1px #d8dbe0;
}

.counter-block {
    width: 50px;
}

.time-width {
    width: 200px;
}

.lower-label {
    font-size: 80%;
    padding-left: 10px;
}

.constrain-role-box {
    border: 1px solid #d8dbe0;
    max-width: 800px;
    border-radius: 0.25rem;
}

.geography-selector {
    border: 1px solid #dedede;
    border-radius: 0.25rem;
}

.validation-error {
    color: red;
    font-size: 80%;
    display: block;
}

.read-only-field {
    background-color: #fafafc;
}

.floating-menu {
    z-index: 100;
    position: fixed;
    right: 10px
}

.dv-floating-menu
{
    z-index: 100;
    position: fixed;
}

.dv-right-menu-content
{
    position: absolute;
    right: 0px;
}

.wide-col {
  width: 40%;
}

.constrain-card {
    max-width: 1200px;
}

@media screen and (min-width: 2560px) {

    .dv-floating-menu
    {
        max-width: 577px;
    }
}

.constrain-menu {
  max-width: 650px;
}

.button-normal {
  width: 360px;
}

.button-counted {
  width: 300px;
}

/* Financial intake toggle switches - visible unchecked state */
.financial-intake-switch .c-switch-slider {
  background-color: #ebedef;
}

/* Email template HTMX button loading states */
#btn-action .btn-loading-label { display: none; }
#btn-action.htmx-request .btn-action-label { display: none; }
#btn-action.htmx-request .btn-loading-label { display: inline; }

/* Opt-in htmx label swap: put .hx-label-swap on the element that issues the
   request (form or button); its .btn-action-label / .btn-loading-label spans
   swap while that request is in flight. */
.hx-label-swap .btn-loading-label { display: none; }
.hx-label-swap.htmx-request .btn-action-label { display: none; }
.hx-label-swap.htmx-request .btn-loading-label { display: inline; }

/* The same swap for a plain form POST, where htmx never runs and so never adds
   .htmx-request. `blockFormMultiSubmit()` (js/dv-util.js) puts .is-submitting on
   the form on its first submit and blocks the rest. */
.dv-label-swap .btn-loading-label { display: none; }
.dv-label-swap.is-submitting .btn-action-label { display: none; }
.dv-label-swap.is-submitting .btn-loading-label { display: inline; }
.dv-label-swap.is-submitting button[type="submit"],
.dv-label-swap.is-submitting a {
  pointer-events: none;
  opacity: 0.65;
}

/* Default links */
.feed-tabs .nav-link {
    color: #636f83;
}

/* Active tab */
.feed-tabs .nav-item.active .nav-link {
    color: #39f !important;
}


.feed-tabs .nav-item hr {
    border: 1px solid #d8dbe0 !important;
}


.feed-tabs .nav-item.active hr {
    border-color: #39f !important;
}

/* Badge */
.feed-tabs .nav-item .nav-link .badge{
    background-color: #636f83; /* bg-dark */
    color: #fff;
    font-weight: normal;
}

.feed-tabs .nav-item.active .nav-link .badge{
    background-color: #39f; /* bg-info */
}

/* Responsive width utility: auto on md+ (Bootstrap 4 lacks w-md-auto) */
@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}

/* Mobile: ensure native <select> dropdowns inside intake modals have room
   to open downward, so Android Chrome doesn't flip the OS picker far above
   the trigger. Modal body scrolls the focused field upward via this margin. */
@media (max-width: 767.98px) {
    .modal-body .custom-select {
        scroll-margin-bottom: 50vh;
    }
}

/* iOS Safari auto-zooms any <input>/<select> with font-size <16px on focus,
   forcing the user to manually pinch-zoom out after typing. CoreUI's
   .form-control is 14px (0.875rem), so this affects every input on the form.
   See https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
@media (max-width: 767.98px) {
    .form-control,
    .custom-select,
    select.form-control,
    textarea.form-control {
        font-size: 16px;
    }
}

/* Stack .input-group children opt-in via .input-group-stack-mobile.
   !important defeats inline desktop max-width. */
@media (max-width: 767.98px) {
    .input-group-stack-mobile > .custom-select,
    .input-group-stack-mobile > .form-control {
        flex: 0 0 100%;
        max-width: 100% !important;
        border-radius: 0.25rem !important;
    }
}

/* Matter Progress stage arrows - chevron shapes via clip-path */
.stage-arrow {
  clip-path: polygon(0% 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 0% 100%, 14px 50%);
}
.stage-arrow:first-child {
  clip-path: polygon(0% 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 0% 100%);
}
.stage-arrow:last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 14px 50%);
}
.stage-arrow:only-child {
  clip-path: none;
}

/* Matter Progress table column widths */
.matter-stages-col-date {
  width: 150px;
}
.matter-stages-col-matter {
  width: 30%;
}
.matter-stages-col-submitted {
  width: 120px;
}


/* Matter Progress — Assigned-to filter (mockup-specification) */
.matter-stages-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5C6873;
  margin-left: auto;
}
.matter-stages-filter label {
  margin: 0;
}
.matter-stages-assigned-select {
  padding: 5px 10px;
  border: 1px solid #c8ced3;
  border-radius: 6px;
  font-size: 13px;
  color: #5C6873;
  background: #fff;
}
.matter-stages-assigned-select:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

/* Follow-up screen: contact table columns */
.fu-col-name {
  width: 24%;
}
.fu-col-relationship {
  width: 18%;
}

/* Follow-up screen: contact detail chips (provided = on file, on = flagged) */
.fu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 26px;
  vertical-align: middle;
  border: 1px solid #c8ced3;
  border-radius: 1rem;
  padding: 0 0.6rem;
  font-size: 0.72rem;
  color: #5c6873;
  margin: 0.12rem 0.25rem 0.12rem 0;
  cursor: pointer;
  background: #fff;
  white-space: nowrap;
}
.fu-chip input {
  margin: 0;
}
.fu-chip-on {
  border-color: #321fdb;
  background: #eef0fd;
  color: #321fdb;
  font-weight: 600;
}
.fu-chip-provided {
  border-color: #cdeed9;
  background: #eefaf2;
  color: #2eb85c;
  font-weight: 600;
  cursor: default;
}

.fu-role-badge {
  display: inline-block;
  background: #d9e8fa;
  color: #2f7ac9;
  font-size: 0.62rem;
  font-weight: 600;
  border-radius: 0.6rem;
  padding: 0.12rem 0.5rem;
  margin: 0.25rem 0.25rem 0 0;
  white-space: nowrap;
}

/* A flagged follow-up item: a document request row on the Follow-up screen,
   a requested item on the portal remaining-items page. */
.fu-req-row,
.fu-ask {
  border: 1px solid #e2e6ea;
  border-left: 4px solid #39f;
  border-radius: 0.25rem;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.5rem;
}
.fu-req-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
}
.fu-req-row-provided,
.fu-ask-done {
  border-left-color: #2eb85c;
}
.fu-ask-done {
  background: #f6fdf8;
}
.fu-provided-tag {
  margin-left: auto;
  color: #2eb85c;
  font-weight: 600;
}

/* Save sits below the field, right-aligned, while the components stack their
   own sub-fields on narrow screens. */
.fu-ask-row > .btn {
  display: block;
  margin-left: auto;
  margin-top: 0.5rem;
}

/* From md up the field fits on one line, so Save joins onto its end and the
   pair reads as one control: shared hairline, square facing corners. Theme
   buttons are borderless, so the height is set from the input's own formula
   rather than inherited from it. */
@media (min-width: 768px) {
  .fu-ask-row {
    display: flex;
    align-items: flex-start;
  }
  .fu-ask-row > .fu-ask-field {
    flex: 1 1 auto;
    min-width: 0;
  }
  .fu-ask-row > .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: calc(1.5em + 0.75rem + 2px);
    margin: 0 0 0 -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .fu-ask-row > .fu-ask-field ssn-input > input,
  .fu-ask-row > .fu-ask-field date-input .tw\:flex-1:last-child > input,
  .fu-ask-row > .fu-ask-field .form-row > div:last-child > .form-control,
  .fu-ask-row > .fu-ask-field phone-number-input-box .input-group > :last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* The address block runs several rows, so its Save stands apart at the end of
     them rather than joining any one field. */
  .fu-ask-row:has(address-input-box) {
    align-items: flex-end;
  }
  .fu-ask-row:has(address-input-box) > .btn {
    margin-left: 0.5rem;
    border-radius: 0.25rem;
  }
}

/* The item's own label already names the field, so drop the label the input
   components render for themselves. */
.fu-ask phone-number-input-box > label,
.fu-ask date-input label.mb-2:empty {
  display: none;
}

.fu-empty-ok {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f6fdf8;
  border: 1px solid #cdeed9;
  border-radius: 0.25rem;
  color: #2eb85c;
  font-weight: 600;
  padding: 0.7rem 0.8rem;
}

.peoplebox-contact-card .peoplebox-remove-x {
  visibility: hidden;
}
.peoplebox-contact-card:hover .peoplebox-remove-x,
.peoplebox-contact-card:focus-within .peoplebox-remove-x {
  visibility: visible;
}
/* Bootstrap 4 lg breakpoint: always show on screens below 992px (touch/no-hover) */
@media (max-width: 991.98px) {
  .peoplebox-contact-card .peoplebox-remove-x {
    visibility: visible;
  }
}

/* Embedded video / design wrapper. Shared by YouTube, Vimeo, Wistia, Canva, Loom */
.video-container {
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
}

.video-container > iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* Wistia generates its own 16:9 ratio internally via .wistia_responsive_padding */
.video-container.video-container--wistia {
    aspect-ratio: auto;
}

/* Settings → Integrations list */
.integration-logo img {
    max-height: 36px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.integration-list .card-body .card-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #475569;
}

/* Toast entrance: slide in from off the right edge of the screen. */
@keyframes dv-toast-in {
    from {
        opacity: 0;
        transform: translateX(calc(100% + 1rem));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dv-toast-in {
    animation: dv-toast-in 0.3s ease-out;
}

/* Gavel setup - the Financial Items kind badge, from the proposed design */
.badge-purple {
    color: #fff;
    background-color: #6f42c1;
}

/* Gavel setup - the Object Type select width, from the proposed design */
.object-type-select {
    max-width: 200px;
}

/* Gavel setup - the kind badge next to the object name */
.object-type-badge {
    font-size: 100%;
}

/* Matter Progress follow-up status pills — one fixed width so all states align */
.fu-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 186px;
  border-radius: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  font-size: 80%;
  font-weight: 600;
}
.fu-pill-not-started {
  background: #fef3dd;
  border: 1px solid #fbe1a8;
  color: #815c15;
}
.fu-pill-running {
  background: #dbeafe;
  border: 1px solid #b6d5f5;
  color: #1282c4;
}

/* Accent-blue button (the stage arrows' blue), usable anywhere a small CTA needs it */
.btn-dvblue {
  background: #1282c4;
  border-color: #1282c4;
  color: #fff;
}
.btn-dvblue:hover,
.btn-dvblue:focus {
  background: #0f6ea6;
  border-color: #0f6ea6;
  color: #fff;
}
.fu-pill-paused {
  background: #ebedef;
  border: 1px solid #d8dbe0;
  color: #5c6873;
}

/* Add Questionnaire wizard: the two-step indicator beside the heading.
   Hex literals because this file has no CSS variables to hang them on. */
.dv-step-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.dv-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #8a93a2;
}
.dv-step-current { color: #3c4b64; }
.dv-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #c8ced3;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
}
.dv-step-current .dv-step-dot {
  border-color: #3c4b64;
  background: #3c4b64;
  color: #fff;
}
.dv-step-rule {
  width: 2rem;
  height: 1px;
  background: #c8ced3;
}