/* ============================================================
 * pwp-ux.css — Party Wall PRO UX enhancements
 * Loaded globally via fragments/common-css.html
 * ============================================================ */

/* ----------------------------------------------------------
 * 1. REQUIRED FIELD INDICATORS
 * Add class="required" to any .form-group to display a red *
 * after the label text automatically.
 * ---------------------------------------------------------- */
.form-group.required .control-label::after {
    content: " *";
    color: #d9534f;
    font-weight: normal;
}

/* ----------------------------------------------------------
 * 2. STANDARDISED INLINE FIELD ERRORS
 * Server-side Thymeleaf renders errors as <p style="color:red">.
 * Normalise these to match Bootstrap's has-error text style,
 * with a warning icon prefix.
 * ---------------------------------------------------------- */
.form-group p[style*="color: red"],
.form-group p[style*="color:red"] {
    color: #a94442 !important;
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 0;
}

.form-group p[style*="color: red"]::before,
.form-group p[style*="color:red"]::before {
    font-family: FontAwesome;
    content: "\f071\00a0";   /* fa-warning + non-breaking space */
}

/* ----------------------------------------------------------
 * 3. BUTTON LOADING / DISABLED STATE
 * Applied via JS when a form submits to prevent double-submit.
 * ---------------------------------------------------------- */
button:disabled {
    cursor: not-allowed;
}

button:disabled .fa-spinner {
    margin-right: 4px;
}

/* ----------------------------------------------------------
 * 4. BREADCRUMB NAV
 * Thin, unobtrusive breadcrumb above the page heading.
 * Uses Bootstrap's .breadcrumb class; these rules remove
 * the default background so it sits flush on any bg colour.
 * ---------------------------------------------------------- */
.pwp-breadcrumb {
    background: none;
    padding: 4px 0 2px;
    margin-bottom: 6px;
    border-radius: 0;
    font-size: 13px;
}

.pwp-breadcrumb > li + li::before {
    content: "/\00a0";
    color: #aaa;
    padding: 0 4px;
}

/* ----------------------------------------------------------
 * 5. COPY-TO-CLIPBOARD BUTTON
 * Small inline button that appears alongside reference fields.
 * ---------------------------------------------------------- */
.btn-copy {
    font-size: 11px;
    padding: 1px 7px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1.6;
}

/* ============================================================
 * UPDATE MATTER — two-column sticky-sidebar layout
 * ============================================================ */

/* Sticky sidebar.
 * CSS position:sticky is normally broken by Inspinia's #wrapper { overflow-x: hidden }
 * because any overflow value other than visible forces overflow-y to 'auto', creating
 * a scroll container and preventing sticky from anchoring to the window.
 * We override that with overflow-x: clip (visually identical to hidden but does NOT
 * create a scroll container), restoring sticky behaviour. */
#wrapper {
    overflow-x: clip;
}

#um-sidebar {
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

/* Buttons in matter header — allow natural wrapping, right-aligned */
.um-matter-actions .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.um-matter-actions .btn-group > .btn {
    border-radius: 3px !important;
    flex: 0 0 auto;
}

/* Sidebar nav group headings */
.um-nav-group {
    display: block;
    padding: 10px 15px 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #aaa;
    margin-top: 4px;
}

/* Sidebar nav links */
.um-nav-link {
    display: block;
    padding: 7px 14px;
    color: #676a6c;
    font-size: 13px;
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.um-nav-link:hover,
.um-nav-link.active {
    color: #1ab394;
    border-left-color: #1ab394;
    background-color: #f8faf9;
    text-decoration: none;
}

.um-nav-link i {
    margin-right: 5px;
    width: 14px;
    text-align: center;
    color: #aaa;
}

.um-nav-link:hover i,
.um-nav-link.active i {
    color: #1ab394;
}

/* Section icon in ibox-title */
.um-section-icon {
    margin-right: 6px;
    color: #1ab394;
}

/* Update form panel within a section — subtle visual separation from the read-only table */
.um-form-panel {
    background: #f8f8f8;
    border: 1px solid #e4e8ea;
    border-radius: 3px;
    padding: 16px 18px 18px;
    margin-top: 18px;
}

.um-form-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e8ea;
}

.um-form-panel-title i {
    margin-right: 5px;
    color: #1ab394;
}

/* Matter header card inside ibox-content */
.um-matter-title {
    margin: 0 0 4px;
    font-size: 22px;
}

.um-matter-meta {
    color: #999;
    font-size: 13px;
    margin: 0;
    line-height: 1.8;
}

.um-matter-actions {
    padding-top: 4px;
}

/* Stack buttons on mobile */
@media (max-width: 767px) {
    #um-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 16px;
    }

    .um-matter-actions {
        text-align: left !important;
        margin-top: 10px;
    }
}