/* ============================================================
 * 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-sticky-top (top bar + menu bar) and --pwp-banner-height (the sticky
 * matter banner) are measured and set on <html> by pwp-ux.js; the fallbacks
 * are close enough for the first paint. */
.pwp-section-nav {
    position: sticky;
    top: calc(var(--pwp-sticky-top, 110px) + var(--pwp-banner-height, 0px) + 16px);
    max-height: calc(100vh - var(--pwp-sticky-top, 110px) - var(--pwp-banner-height, 0px) - 32px);
    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 and matter banner */
.pwp-section {
    scroll-margin-top: calc(var(--pwp-sticky-top, 110px) + var(--pwp-banner-height, 0px) + 16px);
}

/* Matter banner (name, reference, Summary View...) stays in view while the
 * page scrolls, and slims down once it is stuck. Desktop only: on small
 * screens it would take up too much of the page. */
@media (min-width: 992px) {
    .pwp-sticky-banner {
        position: sticky;
        top: var(--pwp-sticky-top, 110px);
        /* above the page's cards (so its More menu opens over them), below the top menus */
        z-index: 990;
        transition: box-shadow .15s ease-in-out;
    }
    .pwp-sticky-banner.is-stuck {
        box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .pwp-sticky-banner.is-stuck > .card-body {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .pwp-sticky-banner.is-stuck h3 {
        font-size: 1.125rem;
        margin-bottom: 0 !important;
    }
}
.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%;
}


/* ----------------------------------------------------------
 * DARK MODE (opt-in, html[data-bs-theme=dark]; toggle in the top bar)
 * Inspinia/Bootstrap handle their own components. The rules below
 * cover PWP's own styles and the older plugins that only ship a
 * light look.
 * ---------------------------------------------------------- */
html[data-bs-theme=dark] .pwp-theme-icon-dark,
html:not([data-bs-theme=dark]) .pwp-theme-icon-light {
    display: none;
}

/* Type-ahead search boxes and their suggestion lists */
html[data-bs-theme=dark] .tt-input {
    background-color: var(--theme-body-bg) !important;
    color: var(--theme-body-color);
}
html[data-bs-theme=dark] .tt-hint {
    color: var(--theme-secondary-color);
}
html[data-bs-theme=dark] .tt-menu {
    background-color: var(--theme-secondary-bg);
    border-color: var(--theme-border-color);
    color: var(--theme-body-color);
}

/* Date picker (bootstrap-datepicker) */
html[data-bs-theme=dark] .datepicker.dropdown-menu {
    background-color: var(--theme-secondary-bg);
    border-color: var(--theme-border-color);
    color: var(--theme-body-color);
}
html[data-bs-theme=dark] .datepicker-dropdown:after {
    border-bottom-color: var(--theme-secondary-bg);
}
html[data-bs-theme=dark] .datepicker-dropdown.datepicker-orient-bottom:after {
    border-top-color: var(--theme-secondary-bg);
}
html[data-bs-theme=dark] .datepicker table tr td.day:hover,
html[data-bs-theme=dark] .datepicker table tr td.day.focused,
html[data-bs-theme=dark] .datepicker table tr td span:hover,
html[data-bs-theme=dark] .datepicker table tr td.range,
html[data-bs-theme=dark] .datepicker thead tr:first-child th:hover,
html[data-bs-theme=dark] .datepicker tfoot tr th:hover {
    background: var(--theme-tertiary-bg);
}
html[data-bs-theme=dark] .datepicker table tr td.old,
html[data-bs-theme=dark] .datepicker table tr td.new,
html[data-bs-theme=dark] .datepicker table tr td.disabled,
html[data-bs-theme=dark] .datepicker table tr td span.old,
html[data-bs-theme=dark] .datepicker table tr td span.new {
    color: var(--theme-secondary-color);
}

/* File upload boxes (dropzone) */
html[data-bs-theme=dark] .dropzone {
    background: transparent;
    border-color: var(--theme-border-color);
}
html[data-bs-theme=dark] .dropzone .dz-preview,
html[data-bs-theme=dark] .dropzone-previews .dz-preview {
    background: var(--theme-secondary-bg);
}
html[data-bs-theme=dark] .dropzone a.dz-remove,
html[data-bs-theme=dark] .dropzone-previews a.dz-remove {
    background: var(--theme-tertiary-bg);
    color: var(--theme-body-color);
}

/* Step-by-step wizards (Create Notice / Award / Licence, Add Owner) */
html[data-bs-theme=dark] .wizard > .content {
    background: var(--theme-tertiary-bg);
}
html[data-bs-theme=dark] .wizard > .steps .disabled a,
html[data-bs-theme=dark] .wizard > .actions .disabled a {
    background: var(--theme-tertiary-bg);
    color: var(--theme-secondary-color);
}

/* Older PWP update-page styles still in pwp-ux.css */
html[data-bs-theme=dark] .um-form-panel {
    background: var(--theme-tertiary-bg);
    border-color: var(--theme-border-color);
}
html[data-bs-theme=dark] .um-form-panel-title {
    color: var(--theme-body-color);
}
html[data-bs-theme=dark] .um-nav-link:hover,
html[data-bs-theme=dark] .um-nav-link.active {
    background-color: var(--theme-tertiary-bg);
}

/* Modal backdrop: the theme uses its emphasis colour, which is light grey in
 * dark mode and washes the page out - dim it instead */
html[data-bs-theme=dark] .modal-backdrop {
    --theme-backdrop-bg: #000;
    --theme-backdrop-opacity: 0.6;
}