/* ============================================================
 * pwp-v5.css — Party Wall PRO tweaks for Inspinia v5 (Bootstrap 5) pages
 * Loaded via the v5Css fragment in templates/fragments/layout.html
 * ============================================================ */

/* ----------------------------------------------------------
 * 0. TABLER ICONS: keep icons in document order
 * Tabler's *-filled icons use code points in a right-to-left Unicode block
 * (Hebrew presentation forms), so the browser's bidi algorithm moves them
 * after neighbouring text ("4 ▲" instead of "▲ 4"). Isolate each icon.
 * ---------------------------------------------------------- */
.ti {
    unicode-bidi: isolate;
}

/* ----------------------------------------------------------
 * 1. BRAND (text logo in the top bar)
 * ---------------------------------------------------------- */
.pwp-brand {
    display: inline-block;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--theme-body-color);
    white-space: nowrap;
    text-decoration: none;
}

.pwp-brand span {
    color: var(--theme-primary);
}

.pwp-brand:hover {
    color: var(--theme-body-color);
}

.logo-topbar .pwp-brand {
    line-height: var(--theme-topbar-height, 70px);
    padding-right: 0.75rem;
}

[data-topbar-color="dark"] .pwp-brand,
[data-topbar-color="gray"] .pwp-brand {
    color: #fff;
}

/* ----------------------------------------------------------
 * 2. USER AVATAR (initial in a circle, no photo upload in PWP)
 * ---------------------------------------------------------- */
.pwp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--theme-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ----------------------------------------------------------
 * 3. GLOBAL MATTER SEARCH (twitter typeahead inside .app-search)
 * typeahead.js wraps the input in span.twitter-typeahead, which breaks
 * v5's absolutely-positioned search icon and input width.
 * ---------------------------------------------------------- */
.pwp-matter-search .twitter-typeahead {
    width: 100%;
}

/* typeahead.css (shared with Bootstrap 3 pages) styles .tt-input/.tt-hint/.tt-menu with a large
 * 24px font and fixed widths; bring them back in line with v5's .topbar-search. */
.pwp-matter-search .tt-input,
.pwp-matter-search .tt-hint {
    width: 280px;
    height: auto;
    padding: .4532rem .77rem;
    padding-inline-start: 40px;
    font-size: var(--theme-body-font-size, .875rem);
    line-height: 1.5;
    border-width: 1px;
    border-radius: var(--theme-border-radius);
    box-shadow: none;
}

.pwp-matter-search .tt-input {
    background-color: var(--theme-topbar-search-bg) !important;
}

.pwp-matter-search .tt-hint {
    color: var(--theme-secondary-color);
}

.pwp-matter-search .app-search-icon {
    pointer-events: none;
}

.pwp-matter-search .tt-menu,
.pwp-typeahead .tt-menu {
    width: 100%;
    min-width: 320px;
    margin-top: 4px;
    padding: 4px 0;
    background-color: var(--theme-secondary-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow);
    z-index: 1050 !important;
}

.pwp-matter-search .tt-suggestion,
.pwp-typeahead .tt-suggestion {
    padding: 6px 14px;
    font-size: var(--theme-body-font-size, .875rem);
    line-height: 1.4;
    cursor: pointer;
}

.pwp-matter-search .tt-suggestion.tt-cursor,
.pwp-matter-search .tt-suggestion:hover,
.pwp-typeahead .tt-suggestion.tt-cursor,
.pwp-typeahead .tt-suggestion:hover {
    color: var(--theme-primary) !important;
    background-color: var(--theme-tertiary-bg) !important;
}

/* Typeahead inside a form field: wrap the input in <div class="pwp-typeahead"> */
.pwp-typeahead .twitter-typeahead { display: block !important; width: 100%; }
.pwp-typeahead .tt-input,
.pwp-typeahead .tt-hint {
    width: 100%;
    height: auto;
    padding: .375rem .75rem;
    font-size: var(--theme-body-font-size, .875rem);
    line-height: 1.5;
    border-width: 1px;
    border-radius: var(--theme-border-radius);
    box-shadow: none;
}
.pwp-typeahead .tt-hint { color: var(--theme-secondary-color); }

/* ----------------------------------------------------------
 * 4. AUTH PAGES (login, register, ...)
 * ---------------------------------------------------------- */
.auth-box .pwp-brand {
    font-size: 1.6rem;
}

.auth-box .pwp-partner-logos .pwp-partner-logo {
    height: 96px;   /* the Murus artwork has generous built-in padding */
    width: auto;
}

/* ----------------------------------------------------------
 * 4a. REQUIRED FIELDS
 * v5 equivalent of pwp-ux.css's ".form-group.required .control-label":
 * add class="pwp-required" to a label to get a red asterisk.
 * ---------------------------------------------------------- */
.pwp-required::after {
    content: " *";
    color: var(--theme-danger);
    font-weight: normal;
}

/* ----------------------------------------------------------
 * 4b. STAT TILES (matter summary, dashboard)
 * Whole-card links showing one number.
 * ---------------------------------------------------------- */
.pwp-stat-tile {
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.pwp-stat-tile:hover {
    color: inherit;
    box-shadow: var(--theme-box-shadow);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------
 * 4c. MATTER PROGRESS (matter summary, fragments/awardProgress.html)
 * One row per adjoining owner + a collapsible vertical list of steps.
 * ---------------------------------------------------------- */
.pwp-progress-row + .pwp-progress-row {
    border-top: 1px dashed var(--theme-border-color);
}

.pwp-progress-toggle .ti {
    display: inline-block;
    transition: transform .15s ease-in-out;
    transform: rotate(180deg);
}
.pwp-progress-toggle.collapsed .ti {
    transform: none;
}

.pwp-steps {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 0 .25rem;
}

.pwp-step {
    position: relative;
    padding: 0 0 1rem 2.25rem;
}

/* connector line down to the next step */
.pwp-step::before {
    content: "";
    position: absolute;
    left: calc(.75rem - 1px);
    top: 1.6rem;
    bottom: .1rem;
    border-left: 2px solid var(--theme-border-color);
}
.pwp-step:last-child {
    padding-bottom: 0;
}
.pwp-step:last-child::before {
    display: none;
}
.pwp-step--done::before {
    border-left-color: var(--theme-primary);
}

.pwp-step-marker {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--theme-border-color);
    background-color: var(--theme-secondary-bg);
    color: #fff;
    font-size: .85rem;
}
.pwp-step--done .pwp-step-marker {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}
.pwp-step--current .pwp-step-marker {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), .15);
}

.pwp-step-label {
    font-weight: 600;
    line-height: 1.5rem;
}
.pwp-step--upcoming .pwp-step-label {
    color: var(--theme-secondary-color);
    font-weight: normal;
}

/* ----------------------------------------------------------
 * 4d. UPDATE MATTER PAGES (updateMatter, updateMatterActingForAO)
 * Sticky section nav on the left, one card per section, and the
 * "Update ..." form of each section in a tinted panel under its table.
 * ---------------------------------------------------------- */
.pwp-section-nav {
    position: sticky;
    top: calc(var(--theme-topbar-height, 65px) + 60px);
    max-height: calc(100vh - var(--theme-topbar-height, 65px) - 80px);
    overflow-y: auto;
}

.pwp-section-nav-group {
    display: block;
    padding: .75rem .75rem .25rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--theme-secondary-color);
}
.pwp-section-nav-group:first-child {
    padding-top: .25rem;
}

.pwp-section-link {
    display: block;
    padding: .4rem .75rem;
    color: var(--theme-body-color);
    border-left: 3px solid transparent;
    border-radius: 0 var(--theme-border-radius) var(--theme-border-radius) 0;
    text-decoration: none;
    transition: border-color .15s, color .15s, background-color .15s;
}
.pwp-section-link .ti {
    width: 1.1rem;
    margin-right: .35rem;
    color: var(--theme-secondary-color);
}
.pwp-section-link:hover,
.pwp-section-link.active {
    color: var(--theme-primary);
    border-left-color: var(--theme-primary);
    background-color: var(--theme-tertiary-bg);
}
.pwp-section-link:hover .ti,
.pwp-section-link.active .ti {
    color: var(--theme-primary);
}

/* jumps to a section land below the sticky top bar + menu */
.pwp-section {
    scroll-margin-top: calc(var(--theme-topbar-height, 65px) + 70px);
}
.pwp-section-icon {
    color: var(--theme-primary);
    margin-right: .25rem;
}

.pwp-update-panel {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem .25rem;
    background-color: var(--theme-tertiary-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
}
.pwp-update-panel-title {
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--theme-border-color);
    font-size: .9375rem;
}

@media (max-width: 991.98px) {
    .pwp-section-nav {
        position: static;
        max-height: none;
    }
}


/* jquery.steps wizards in modals (Create Award, Create Notice, Add Owner, Create Licence): let each step size to its content
 * and keep jquery.steps.css's generic input/label rules off the Bootstrap 5 form controls. */
.modal .wizard > .content {
    /* jquery.steps writes a fixed inline height, measured while the modal is still hidden */
    height: auto !important;
    min-height: 0;
    overflow: visible;
    background: var(--theme-tertiary-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
}
.modal .wizard > .content > .body {
    /* the pages' scripts also set fixed heights (35em/55em) on the step bodies */
    height: auto !important;
    position: relative;
    float: none;
    width: 100%;
    padding: 1rem 1.25rem;
}
.modal .wizard > .content > .body input.form-control {
    border: var(--theme-border-width, 1px) solid var(--theme-border-color);
}
.modal .wizard > .content > .body input.form-check-input {
    display: inline-block;
    border: var(--theme-border-width, 1px) solid var(--theme-border-color);
}
.modal .wizard > .content > .body input.form-check-input:checked {
    border-color: var(--theme-primary);
}
.modal .wizard > .content > .body label {
    display: inline-block;
    margin-bottom: 0;
}
.modal .wizard > .content > .body label.form-label {
    display: block;
    margin-bottom: .5rem;
}
.modal .wizard > .steps > ul > li {
    width: auto;
    flex: 1 1 0;
}
.modal .wizard > .steps > ul {
    display: flex;
    flex-wrap: wrap;
}

/* a checkbox with its own follow-up options (e.g. "Underpin?" -> Is / Is Not) */
.pwp-check-group > :not(:first-child) {
    margin-left: 1.5rem;
}
.pwp-check-group .form-check {
    margin-top: .35rem;
}
.modal .wizard > .content > .body h2 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.modal .wizard > .content > .body h3 {
    font-size: 1rem;
}
/* checkboxes in a wizard's centred Finish step: keep box and text together */
.modal .wizard .text-center .form-check {
    display: inline-block;
    text-align: left;
    max-width: 100%;
}