/* ═══════════════════════════════════════════════════════════
   Hearing Decision Application Styles
   Mirrors the docx template layout for the hearing form
   ═══════════════════════════════════════════════════════════ */

:root {
    --pd-primary: #1a365d;
    --pd-primary-light: #2c5282;
    --pd-border: #cbd5e0;
    --pd-header-bg: #e2e8f0;
    --pd-section-bg: #edf2f7;
    --pd-text: #1a202c;
    --pd-text-muted: #718096;
    --pd-danger: #e53e3e;
    --pd-radius: 3px;
    --pd-font: 'Segoe UI', Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--pd-font);
    font-size: 13px;
    color: var(--pd-text);
    margin: 0;
    padding: 0;
    background: #f7fafc;
}

/* ─── App Shell ───────────────────────────────────────────── */

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

/* ─── Menu Bar ────────────────────────────────────────────── */

/* Transparent full-screen layer that closes the open menu when clicked outside */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;   /* above content, below menu-bar (100) and dropdown (101) */
    background: transparent;
}

.menu-bar {
    display: flex;
    gap: 0;
    background: var(--pd-primary);
    color: white;
    padding: 0;
    font-size: 13px;
    user-select: none;
    position: relative;
    z-index: 100;
}

.menu-item {
    position: relative;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

/* Hidden on desktop — File/Settings/Output/Help show icon + text there.
   Swapped for icon-only below the phone breakpoint, see @media block. */
.menu-item-icon {
    display: none;
}

.menu-item:hover,
.menu-item.active {
    background: var(--pd-primary-light);
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    color: var(--pd-text);
    border: 1px solid var(--pd-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 101;
    border-radius: 0 0 4px 4px;
}

.menu-item.active .menu-dropdown {
    display: block;
}

.menu-dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.menu-dropdown-item:hover {
    background: var(--pd-section-bg);
}

.menu-dropdown-separator {
    height: 1px;
    background: var(--pd-border);
    margin: 4px 0;
}

.menu-dropdown-item-muted {
    color: #a0aec0;
    font-style: italic;
    cursor: default;
    font-size: 12px;
}

.menu-dropdown-item-muted:hover {
    background: transparent;
}

.menu-dropdown-item-recent {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}

.recent-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-date {
    flex-shrink: 0;
    font-size: 11px;
    color: #718096;
}

/* ─── Toolbar buttons (Save / Delete) ────────────────────── */

.menu-bar-actions {
    margin-left: auto;
    display: flex;
    align-items: stretch;
    gap: 1px;
}

.toolbar-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    padding: 0 14px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.toolbar-btn-save:hover {
    background: rgba(72, 187, 120, 0.25);
}

.toolbar-btn-delete:hover {
    background: rgba(229, 62, 62, 0.3);
    color: #fed7d7;
}

/* Phone-width menu bar: File/Settings/Output/Help text labels don't fit
   alongside Save/Delete (confirmed: Delete was clipped off-screen at
   ~400px). Swap to icon-only triggers and tighten padding; each menu's
   dropdown behavior is unchanged, just the trigger gets more compact. */
@media (max-width: 600px) {
    .menu-item-icon {
        display: inline-block;
        font-size: 15px;
    }

    .menu-item .menu-item-label {
        display: none;
    }

    .menu-item {
        padding: 8px 11px;
    }

    .toolbar-btn {
        padding: 0 10px;
    }

    .toolbar-btn .menu-item-label {
        display: none;
    }

    /* No overflow-x:auto safety net here on purpose: it forces overflow-y to
       auto too (same CSS rule that bit .table-scroll), which clips the
       taller 15px menu-item-icon glyphs top and bottom instead of letting
       the bar size to fit them. The six icon buttons already fit comfortably
       down to ~375px without needing to scroll. */
}

/* ─── Delete Confirmation Dialog ─────────────────────────── */

.confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-dialog {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 24px;
    width: min(90vw, 400px);
}

.confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.confirm-title i {
    color: #d69e2e;
    font-size: 18px;
}

.confirm-message {
    font-size: 13px;
    color: #4a5568;
    margin: 0 0 20px;
    line-height: 1.5;
}

.confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.confirm-btn {
    padding: 7px 16px;
    border-radius: 5px;
    border: 1px solid #cbd5e0;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    color: #2d3748;
    transition: background 0.12s;
}

.confirm-btn:hover {
    background: #f7fafc;
}

.confirm-btn-danger {
    background: var(--pd-danger);
    border-color: var(--pd-danger);
    color: #fff;
}

.confirm-btn-danger:hover {
    background: #c53030;
    border-color: #c53030;
}

/* ─── Form + picker row ───────────────────────────────────── */

.form-and-picker {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    min-height: 0;
    gap: 8px;
}

/* ─── Decision Form ───────────────────────────────────────── */

.decision-form {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.decision-form-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px;
    position: relative;
}

/* Event Title / Logo header area */
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.form-header h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--pd-primary);
    margin: 0;
}

.form-header h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 0;
    color: var(--pd-text);
}

.form-header .logo-area {
    max-width: 120px;
    max-height: 80px;
}

.form-header .logo-area img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.header-right {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.regattaweb-logo {
    height: 35px;
    width: auto;
    display: block;
}

.regattaweb-link {
    display: block;
    line-height: 0;
}

/* ─── Field Rows (Hearing Number, Type, etc.) ─────────────── */

.field-grid {
    display: grid;
    /* Two label/input pairs per row: Hearing Number + Heard With Protest #,
       then Hearing Type + Race #. */
    grid-template-columns: 140px 1fr 140px 1fr;
    gap: 4px 10px;
    margin-bottom: 12px;
    align-items: center;
    border: 1px solid var(--pd-border);
    padding: 8px 10px;
    border-radius: var(--pd-radius);
    background: white;
}

@media (max-width: 600px) {
    .field-grid {
        /* Back to one field per row — two 140px label columns plus two
           usable input columns don't fit a phone-width screen. */
        grid-template-columns: 140px 1fr;
    }
}

/* Class / Incident Date / Hearing Date — a third field-grid row with three
   label/input pairs instead of two, so it needs its own column template
   rather than reusing .field-grid's 4 columns. */
.field-row-3 {
    display: grid;
    grid-column: 1 / -1;
    /* Date inputs get a real minimum — MudDatePicker's calendar-icon
       adornment eats into the field, and "M/D/YYYY" plus that icon needs
       more room than an even 1fr split reliably gives it. */
    grid-template-columns: 90px 1fr 110px minmax(140px, 1fr) 110px minmax(140px, 1fr);
    gap: 4px 10px;
    align-items: center;
}

@media (max-width: 600px) {
    .field-row-3 {
        grid-template-columns: 140px 1fr;
    }
}

.field-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--pd-text);
}

.field-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    font-size: 13px;
    font-family: var(--pd-font);
    background: white;
}

.field-input:focus {
    outline: none;
    border-color: var(--pd-primary-light);
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

select.field-input {
    cursor: pointer;
}

/* ─── Compact MudSelect (Hearing Type, Party Role) ───────────
   MudBlazor's dense-outlined variant reserves 10.5px vertical
   padding on the input plus a 4px outer margin on the control,
   making it noticeably taller than the surrounding plain
   .field-input / table inputs. Shrink both to match. ── */

.pd-inline-select.mud-input-control {
    margin: 0 !important;
}

.pd-inline-select .mud-input-slot {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13px !important;
}

/* ─── Custom Picker (dropdown replacement) ──────────────────
   Moved from CustomPopoverInput.razor.css — scoped CSS isolation
   is not supported in this MAUI project configuration (the
   {Assembly}.styles.css bundle is never generated/referenced),
   so these rules must live in this global stylesheet to load. ── */

.custom-picker {
    position: relative;
    display: block;
    width: 100%;
}

.custom-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: var(--pd-text);
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.custom-picker-trigger:hover {
    border-color: var(--pd-primary-light);
}

.custom-picker-trigger:focus-visible {
    outline: none;
    border-color: var(--pd-primary-light);
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

.custom-picker-trigger-open {
    border-color: var(--pd-primary-light);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: transparent;
}

.custom-picker-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    width: 100%;
    min-width: 100%;
    max-width: min(100%, 280px);
    margin-top: -1px;
    padding: 4px 0;
    background: white;
    border: 1px solid var(--pd-primary-light);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--pd-radius);
    border-bottom-right-radius: var(--pd-radius);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.custom-picker-options {
    display: flex;
    flex-direction: column;
}

.custom-picker-option {
    border: none;
    background: white;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    width: 100%;
}

.custom-picker-option.active,
.custom-picker-option:hover {
    background: var(--pd-section-bg);
}

.custom-picker-option.active {
    font-weight: 600;
    color: var(--pd-primary);
}

.custom-picker-input {
    width: 100%;
    min-height: 26px;
    border: 1px solid var(--pd-border);
    border-radius: calc(var(--pd-radius) - 1px);
    padding: 4px 8px;
    font-size: 13px;
    font-family: var(--pd-font);
    color: var(--pd-text);
    box-sizing: border-box;
}

.custom-picker-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* Date/time popovers need more room than a narrow trigger field
   (e.g. a compact {date}/{time} template field) provides. */
.custom-picker-popover:has(.custom-picker-calendar),
.custom-picker-popover:has(.custom-picker-time) {
    width: max(100%, 220px);
    max-width: none;
}

.custom-picker-calendar {
    padding: 2px 2px 4px;
}

.custom-picker-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--pd-text);
    padding: 2px 2px 6px;
}

.custom-picker-nav {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px 6px;
    color: var(--pd-primary);
    font-size: 12px;
}

.custom-picker-nav:hover {
    color: var(--pd-primary-light);
}

.custom-picker-calendar-weekdays,
.custom-picker-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.custom-picker-calendar-weekdays span {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--pd-text-muted);
    padding: 2px 0;
}

.custom-picker-day {
    border: none;
    background: transparent;
    padding: 4px 0;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    color: var(--pd-text);
}

.custom-picker-day.muted {
    color: var(--pd-text-muted);
    opacity: 0.5;
}

.custom-picker-day:hover {
    background: var(--pd-section-bg);
}

.custom-picker-day.today {
    font-weight: 700;
    color: var(--pd-primary);
}

.custom-picker-day.active {
    background: var(--pd-primary);
    color: white;
}

.custom-picker-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    font-size: 14px;
    font-weight: 600;
}

.custom-picker-time-input {
    width: 44px;
    text-align: center;
    border: 1px solid var(--pd-border);
    border-radius: calc(var(--pd-radius) - 1px);
    padding: 4px 2px;
    font-size: 14px;
    font-family: var(--pd-font);
}

/* Compact date/time fields inside a template sentence (Procedural
   Matters {date}/{time} fill-ins) — match the sizing of plain
   .template-field inputs instead of stretching to the row width. */
.template-row .custom-picker {
    display: inline-flex;
    width: auto;
    vertical-align: middle;
}

.template-row .custom-picker-trigger {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 4px;
    min-width: 90px;
    max-width: 140px;
    padding: 2px 4px;
    margin: 0;
    font-weight: 600;
    color: var(--pd-primary);
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 3px;
    font-size: 13px;
    font-family: var(--pd-font);
}

/* ─── Section Headers ─────────────────────────────────────── */

.section-header {
    background: var(--pd-header-bg);
    border: 1px solid var(--pd-border);
    border-bottom: none;
    padding: 5px 10px;
    font-weight: 700;
    font-size: 12px;
    color: var(--pd-primary);
    border-radius: var(--pd-radius) var(--pd-radius) 0 0;
}

/* ─── Data Tables (Party, Witness) ────────────────────────── */
/* No horizontal-scroll wrapper here on purpose: an overflow-x:auto container
   forces overflow-y to auto too (a hard CSS rule, not fixable with an
   overflow-y:visible override), which clips the row-menu dropdown outright
   whenever it opens on the table's last row — every row, for a one-row
   Witnesses table. The columns fit acceptably at phone widths as plain
   shrinking flex/percentage columns; see .row-dropdown for the real fix. */

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    background: white;
}

.data-table th {
    background: var(--pd-header-bg);
    border: 1px solid var(--pd-border);
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    color: var(--pd-primary);
}

.data-table td {
    border: 1px solid var(--pd-border);
    padding: 2px 4px;
}

.data-table td input {
    width: 100%;
    border: none;
    padding: 4px 6px;
    font-size: 13px;
    font-family: var(--pd-font);
    background: transparent;
}

.data-table td input:focus {
    outline: none;
    background: #fffff0;
}

.data-table td select {
    width: 100%;
    border: 1px solid var(--pd-border);
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 13px;
    font-family: var(--pd-font);
    background: #fff;
}

/* Action column — centre the hamburger button, no padding waste */
.row-actions-td {
    text-align: center;
    vertical-align: middle;
    padding: 0 2px !important;
    white-space: nowrap;
}

/* Move-mode highlight for table rows */
.data-table tr.in-move-mode td {
    background: #ebf8ff;
}

/* ─── Numbered Section (Procedural Matters, Facts, etc.) ──── */

.numbered-section {
    border: 1px solid var(--pd-border);
    border-top: none;
    background: white;
    margin-bottom: 12px;
    border-radius: 0 0 var(--pd-radius) var(--pd-radius);
}

.numbered-row {
    display: flex;
    border-bottom: 1px solid #edf2f7;
    transition: background 0.1s;
}

.numbered-row:last-child {
    border-bottom: none;
}

.numbered-row:hover {
    background: #fafbfc;
}

.numbered-row .row-number {
    width: 32px;
    min-width: 32px;
    padding: 6px 4px 6px 8px;
    font-weight: 600;
    font-size: 12px;
    color: var(--pd-text-muted);
    text-align: right;
    user-select: none;
}

.numbered-row .row-content {
    flex: 1;
    padding: 2px 4px;
}

.numbered-row .row-content textarea {
    width: 100%;
    border: none;
    padding: 4px 6px;
    font-size: 13px;
    font-family: var(--pd-font);
    resize: vertical;
    min-height: 28px;
    background: transparent;
    line-height: 1.4;
}

.numbered-row .row-content textarea:focus {
    outline: none;
    background: #fffff0;
}

/* Template fields within procedural matters */
.template-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1.6;
}

.template-row > span {
    display: inline-flex;
    align-items: center;
    white-space: pre-wrap;
}

.template-row .template-field {
    display: inline-flex;
    align-items: center;
    min-width: 90px;
    max-width: 140px;
    padding: 2px 4px;
    margin: 0;
    font-weight: 600;
    color: var(--pd-primary);
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 3px;
    font-size: 13px;
    font-family: var(--pd-font);
}

.template-row .template-field:focus {
    outline: none;
    background: #fffff0;
    border-color: var(--pd-primary);
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.15);
}

/* {date} fields in a template sentence use the same MudDatePicker as the
   Hearing Date field above — shrink it to fit inline instead of the
   full-width layout used in the header field grid. */
.template-row .template-date-field.mud-input-control {
    display: inline-flex;
    width: auto;
    min-width: 110px;
    max-width: 160px;
    margin: 0 !important;
    vertical-align: middle;
}

.template-row .template-date-field .mud-input-slot {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13px !important;
}

/* ─── Validity Checkboxes ─────────────────────────────────── */

.validity-row {
    display: flex;
    gap: 20px;
    margin: 8px 0;
    font-weight: 600;
}

.validity-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--pd-radius);
    transition: background 0.1s;
}

.validity-option:hover {
    background: var(--pd-section-bg);
}

.validity-option input[type="radio"] {
    cursor: pointer;
}

/* ─── Validity Collapsible Section ────────────────────────── */

.validity-section {
    margin-bottom: 12px;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    overflow: visible;
}

.validity-section-summary {
    background: var(--pd-header-bg);
    padding: 5px 10px;
    font-weight: 700;
    font-size: 12px;
    color: var(--pd-primary);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--pd-radius);
}

.validity-section[open] .validity-section-summary {
    border-radius: var(--pd-radius) var(--pd-radius) 0 0;
    border-bottom: 1px solid var(--pd-border);
}

.validity-section-summary::-webkit-details-marker { display: none; }

.validity-section-summary::before {
    content: "▶";
    font-size: 9px;
    transition: transform 0.15s;
    display: inline-block;
}

.validity-section[open] .validity-section-summary::before {
    transform: rotate(90deg);
}

.validity-section-body {
    padding: 10px;
}

.validity-sub-header {
    border-radius: var(--pd-radius) var(--pd-radius) 0 0;
    margin-top: 10px;
}

.validity-section[open] > .validity-sub-header:first-of-type {
    margin-top: 10px;
}

/* Make nested section-headers inside validity-section fit flush */
.validity-section > .section-header,
.validity-section > .numbered-section {
    margin-left: 0;
    margin-right: 0;
}

.validity-section > .section-header {
    border-radius: 0;
    border-top: none;
}

.validity-section > .section-header:first-of-type {
    border-top: none;
    margin-top: 10px;
}

.validity-section > .numbered-section {
    border-radius: 0;
    margin-bottom: 0;
}

.validity-section > .numbered-section:last-child {
    border-radius: 0 0 var(--pd-radius) var(--pd-radius);
    margin-bottom: 0;
    padding-bottom: 4px;
}

/* ─── Case Introduction Textarea ──────────────────────────── */

.case-intro-area {
    border: 1px solid var(--pd-border);
    border-top: none;
    background: white;
    margin-bottom: 12px;
    border-radius: 0 0 var(--pd-radius) var(--pd-radius);
}

.case-intro-area textarea {
    width: 100%;
    min-height: 80px;
    border: none;
    padding: 8px 10px;
    font-size: 13px;
    font-family: var(--pd-font);
    resize: vertical;
    line-height: 1.5;
}

.case-intro-area textarea:focus {
    outline: none;
    background: #fffff0;
}

/* ─── Committee Members ───────────────────────────────────── */

.committee-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid var(--pd-border);
    background: white;
    margin-bottom: 4px;
}

.committee-grid .committee-cell {
    border-right: 1px solid var(--pd-border);
    padding: 2px 4px;
}

.committee-grid .committee-cell:last-child {
    border-right: none;
}

.committee-grid .committee-cell label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pd-primary);
    padding: 3px 6px;
    background: var(--pd-header-bg);
    margin: -2px -4px 2px -4px;
}

.committee-grid .committee-cell input {
    width: 100%;
    border: none;
    padding: 4px 6px;
    font-size: 13px;
    font-family: var(--pd-font);
}

.committee-grid .committee-cell input:focus {
    outline: none;
    background: #fffff0;
}

/* Panel row */
.panel-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    border: 1px solid var(--pd-border);
    border-top: none;
    background: white;
    margin-bottom: 12px;
}

.panel-row label {
    font-size: 11px;
    font-weight: 700;
    color: var(--pd-primary);
    padding: 5px 8px;
    background: var(--pd-header-bg);
    display: flex;
    align-items: center;
}

.panel-row input {
    width: 100%;
    border: none;
    padding: 5px 8px;
    font-size: 13px;
    font-family: var(--pd-font);
}

.panel-row input:focus {
    outline: none;
    background: #fffff0;
}

/* ─── Dialog / Modal ──────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.modal-dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    padding: 24px;
    /* Same 400-600px shrink-to-fit range as before on anything wide enough to
       hold it; below ~425px viewports (min-width was a hard floor and would
       overflow past the screen edge on a phone) it shrinks with the viewport. */
    min-width: min(400px, 94vw);
    max-width: min(600px, 94vw);
    max-height: 80vh;
    overflow-y: auto;
}

.modal-dialog h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--pd-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* ─── About Dialog ──────────────────────────────────────────── */

.about-dialog {
    text-align: center;
    min-width: min(300px, 94vw);
    max-width: min(380px, 94vw);
}

.about-logo-row {
    margin-bottom: 16px;
}

.about-logo {
    height: 60px;
    width: auto;
}

.about-company {
    font-size: 18px;
    font-weight: 700;
    color: var(--pd-primary);
    margin-bottom: 8px;
}

.about-app-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-text);
}

.about-version {
    font-size: 12px;
    color: var(--pd-text-muted);
    margin-top: 2px;
}

.about-divider {
    height: 1px;
    background: var(--pd-border);
    margin: 16px 0;
}

.about-contact {
    margin-bottom: 4px;
}

.about-email {
    font-size: 13px;
    color: var(--pd-primary-light);
    text-decoration: none;
}

.about-email:hover {
    text-decoration: underline;
}

/* ─── Directory picker row ──────────────────────────────────── */

.dir-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f7fafc;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    padding: 6px 8px;
}

.dir-picker-path {
    flex: 1;
    font-size: 12px;
    font-family: monospace;
    color: #2d3748;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.dir-picker-btn {
    flex-shrink: 0;
    background: #1a365d;
    color: #bee3f8;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.dir-picker-btn:hover {
    background: #2c5282;
    color: #fff;
}

.dir-picker-btn-clear {
    background: #e53e3e;
    color: #fff;
    padding: 4px 8px;
}

.dir-picker-btn-clear:hover {
    background: #c53030;
}

/* ─── Buttons ─────────────────────────────────────────────── */

.btn {
    padding: 6px 16px;
    border: 1px solid var(--pd-border);
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--pd-font);
    cursor: pointer;
    transition: all 0.15s;
    background: white;
}

.btn:hover {
    background: var(--pd-section-bg);
}

.btn-primary {
    background: var(--pd-primary);
    color: white;
    border-color: var(--pd-primary);
}

.btn-primary:hover {
    background: var(--pd-primary-light);
}

/* ─── Open Previous Decision List ─────────────────────────── */

.decision-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.decision-list li {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pd-border);
    cursor: pointer;
    transition: background 0.1s;
}

.decision-list li:hover {
    background: var(--pd-section-bg);
}

.decision-list li .protest-num {
    font-weight: 700;
    color: var(--pd-primary);
}

.decision-list li .meta {
    font-size: 11px;
    color: var(--pd-text-muted);
    margin-top: 2px;
}

/* ─── Signature Row ───────────────────────────────────────── */

.signature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 12px;
    padding: 8px 0;
}

.signature-row .sig-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.signature-row .sig-group label {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.signature-row .sig-group input {
    flex: 1;
    border: none;
    border-bottom: 1px solid var(--pd-border);
    padding: 4px 6px;
    font-size: 13px;
    font-family: var(--pd-font);
}

.signature-row .sig-group input:focus {
    outline: none;
    border-bottom-color: var(--pd-primary);
}

/* ─── Status Bar ──────────────────────────────────────────── */

.status-bar {
    background: var(--pd-header-bg);
    border-top: 1px solid var(--pd-border);
    padding: 3px 12px;
    font-size: 11px;
    color: var(--pd-text-muted);
    display: flex;
    justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════
   Row action menus (DecisionForm)
   ═══════════════════════════════════════════════════════════ */

.numbered-row.in-move-mode {
    background: #f0f6ff;
    border-radius: 4px;
    outline: 2px solid #4a90d9;
    outline-offset: 1px;
}

.row-grip-icon {
    flex: 0 0 16px;
    padding-top: 8px;
    color: #888;
    cursor: grab;
    font-size: 14px;
}

.row-actions-area {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

.row-menu-wrap {
    position: relative;
}

.row-menu-btn {
    background: #1a365d;
    border: 1px solid #1a365d;
    cursor: pointer;
    padding: 3px 7px;
    color: #bee3f8;
    font-size: 14px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.row-menu-btn:hover {
    background: #2c5282;
    border-color: #2c5282;
    color: #fff;
}

/* A row's z-index:1000 dropdown only wins against elements *within that
   row's own stacking context* — a later sibling row (or table row) paints
   over it regardless, since the comparison that matters is between the ROWS
   themselves, not their descendants. Lifting the open row's own stacking
   position above its siblings is what lets the dropdown clear the row below. */
tr.menu-open,
.numbered-row.menu-open {
    position: relative;
    z-index: 10;
}

.row-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 170px;
    padding: 4px 0;
    white-space: nowrap;
}
.row-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    text-align: left;
    transition: background 0.12s;
}
.row-dropdown button:hover { background: #f5f5f5; }
.row-dropdown button i {
    width: 16px;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.move-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.move-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 3px 6px;
    color: #444;
    font-size: 13px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.move-btn:hover:not(:disabled) {
    background: #e8f0fe;
    border-color: #4a90d9;
    color: #1a5fb4;
}
.move-btn:disabled { opacity: 0.35; cursor: default; }

.move-done-btn {
    background: #4a90d9;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
    transition: background 0.12s;
}
.move-done-btn:hover { background: #1a5fb4; }

/* ═══════════════════════════════════════════════════════════
   Standard Wording Picker panel
   ═══════════════════════════════════════════════════════════ */

.wp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.wp-panel {
    width: 640px;
    max-width: 90vw;
    height: 82vh;
    max-height: 760px;
    display: flex;
    flex-direction: column;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    font-size: 13px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.wp-header {
    background: #e2e8f0;
    border-bottom: 1px solid #cbd5e0;
    padding: 5px 10px;
    flex-shrink: 0;
}
.wp-header-top {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wp-title {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    color: #1a365d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wp-close-btn {
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 1px 5px;
    font-size: 13px;
    border-radius: 2px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.wp-close-btn:hover { color: #e53e3e; background: #fee2e2; }
.wp-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: #1a365d;
    margin-top: 1px;
}
.wp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    background: #fff;
    border: 1px solid #cbd5e0;
    border-radius: 3px;
    color: #1a365d;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.wp-back-btn:hover { background: #edf2f7; }

.wp-top-box {
    flex: 1 1 0;
    overflow-y: auto;
    border-bottom: 1px solid #cbd5e0;
    background: #fff;
    min-height: 0;
}

.wp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    text-align: center;
    color: #718096;
    gap: 6px;
    font-size: 12px;
}
.wp-empty i { font-size: 18px; }

.wp-section-label {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a365d;
    background: #e2e8f0;
    border-top: 1px solid #cbd5e0;
    border-bottom: 1px solid #cbd5e0;
}
.wp-section-label:first-child { border-top: none; }

.wp-category-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    color: #2b6cb0;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid #edf2f7;
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.wp-category-link:hover {
    background: #edf2f7;
    border-left-color: #1a365d;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wp-category-code {
    font-size: 10px;
    color: #718096;
    font-family: 'Consolas', monospace;
    flex-shrink: 0;
}

.wp-matter-heading {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #1a365d;
    background: #e2e8f0;
    border-bottom: 1px solid #cbd5e0;
    position: sticky;
    top: 0;
}

.wp-wording-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    border-bottom: 1px solid #edf2f7;
    border-left: 3px solid transparent;
    color: #2b6cb0;
    transition: background 0.1s, border-color 0.1s;
}
.wp-wording-link:last-child { border-bottom: none; }
.wp-wording-link:hover,
.wp-wording-link.active {
    background: #edf2f7;
    border-left-color: #1a365d;
}
.wp-wording-num {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #718096;
    min-width: 18px;
    padding-top: 1px;
}
.wp-wording-snippet {
    font-size: 12px;
    line-height: 1.45;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wp-bottom-box {
    flex: 0 0 auto;
    max-height: 45%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #edf2f7;
}
.wp-preview-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #718096;
    font-size: 12px;
    font-style: italic;
    padding: 12px;
    text-align: center;
}
.wp-preview-empty i { font-size: 14px; flex-shrink: 0; }

.wp-preview-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.wp-preview-text {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.65;
    color: #1a202c;
    background: #fff;
    border-top: 1px solid #cbd5e0;
    border-bottom: 1px solid #cbd5e0;
}

.wp-token-mark {
    background: #fefcbf;
    color: #744210;
    border: 1px solid #f6e05e;
    border-radius: 2px;
    padding: 0 3px;
    font-size: 0.88em;
    font-style: italic;
    white-space: nowrap;
}

.wp-token-panel {
    border-top: 1px solid #fbd38d;
    background: #fffbeb;
    padding: 6px 10px;
    flex-shrink: 0;
}
.wp-token-header {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #744210;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 5px;
}
.wp-token-header i { color: #d69e2e; }
.wp-token-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.wp-token-label {
    font-size: 11px;
    font-weight: 600;
    color: #1a202c;
    min-width: 60px;
    white-space: nowrap;
}
.wp-token-input {
    flex: 1;
    padding: 2px 6px;
    border: 1px solid #cbd5e0;
    border-radius: 3px;
    font-size: 12px;
    color: #1a202c;
    background: #fff;
}
.wp-token-input:focus { outline: none; border-color: #2c5282; }

.wp-insert-row {
    padding: 6px 10px;
    display: flex;
    justify-content: flex-end;
    background: #e2e8f0;
    border-top: 1px solid #cbd5e0;
    flex-shrink: 0;
}
.wp-insert-btn {
    background: #1a365d;
    border: none;
    border-radius: 3px;
    color: #fff;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s;
}
.wp-insert-btn:hover { background: #2c5282; }

/* ═══════════════════════════════════════════════════════════
   Standard Wording Editor (Settings > Manage Standard Wording)
   Moved from StandardWordingEditor.razor.css — scoped CSS isolation
   doesn't load in this MAUI project (see note near .custom-picker
   above). Layout classes only; interactive controls are MudBlazor
   components and carry their own styling.
   ═══════════════════════════════════════════════════════════ */

.swe-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.swe-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.swe-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}

.swe-subtitle {
    font-size: 12px;
    color: var(--pd-text-muted);
    margin: 0;
    max-width: 520px;
}

/* ── Filter bar ──────────────────────────────────────────────── */
.swe-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    background: var(--pd-section-bg);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
}

/* ── Empty state ─────────────────────────────────────────────── */
.swe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px;
    color: var(--pd-text-muted);
    text-align: center;
    font-size: 12px;
}
.swe-empty p { margin: 0; }

/* ── Subsection group ────────────────────────────────────────── */
.swe-group {
    border: 1px solid var(--pd-border);
    border-radius: 6px;
    overflow: hidden;
}

.swe-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--pd-header-bg);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pd-text-muted);
}
.swe-group-count {
    margin-left: auto;
    background: var(--pd-border);
    border-radius: 10px;
    padding: 0 7px;
    font-size: 11px;
    color: var(--pd-text-muted);
}

/* ── Matter card ─────────────────────────────────────────────── */
.swe-matter {
    border-top: 1px solid var(--pd-border);
    padding: 8px 12px;
}
.swe-matter.user-defined {
    background: #fffbeb;
}

.swe-matter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.swe-matter-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 200px;
}
.swe-matter-title strong {
    font-size: 12px;
}
.swe-codes {
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: var(--pd-text-muted);
}
.swe-matter-ht {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.swe-matter-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* ── Wording rows ────────────────────────────────────────────── */
.swe-wordings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 8px;
}

.swe-wording-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 3px;
}
.swe-wording-row.user-wording {
    background: #fef3c7;
}
.swe-wording-num {
    font-size: 11px;
    color: var(--pd-text-muted);
    min-width: 16px;
    text-align: right;
    margin-top: 2px;
    flex-shrink: 0;
}
.swe-wording-text {
    font-size: 12px;
    color: var(--pd-text);
    flex: 1;
    line-height: 1.5;
}
.swe-wording-actions {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.swe-wording-row:hover .swe-wording-actions { opacity: 1; }

/* ── Dialog form content ───────────────────────────────────────── */
.swe-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}
.swe-ht-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pd-text);
}
.swe-ht-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.swe-wording-editor-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pd-text);
}
.swe-draft-wording-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.swe-draft-wording-row .swe-wording-num {
    margin-top: 10px;
}

.swe-dialog-context {
    font-size: 12px;
    color: var(--pd-text-muted);
    margin: 0;
}

.swe-token-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: var(--pd-text-muted);
    background: var(--pd-section-bg);
    border: 1px solid var(--pd-border);
    border-radius: 3px;
    padding: 6px 8px;
    margin: 0;
    line-height: 1.5;
}
.swe-token-hint code {
    background: var(--pd-border);
    border-radius: 3px;
    padding: 0 3px;
    font-size: .9em;
}

.swe-hint {
    font-size: 12px;
    color: var(--pd-text-muted);
    font-style: italic;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 580px) {
    .swe-header { flex-direction: column; }
    .swe-filters { flex-direction: column; }
    .swe-filters .mud-select,
    .swe-filters .mud-input-control {
        width: 100% !important;
    }
}