/* Feature styles: signatures, colors, tag rules, reports, processing, a11y */
/* Signature Editor */
.signature-editor {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    background: white;
    margin-top: 0;
    font-family: "Calibri", "Segoe UI", "Arial", sans-serif;
    font-size: 14px;
    color: #333;
    line-height: normal;
    overflow-y: auto;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.signature-editor:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.signature-editor[placeholder]:empty:before {
    content: attr(placeholder);
    color: #4b5563;
    cursor: text;
}

.editor-toolbar {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    padding: 5px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.toolbar-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
}

.toolbar-btn:hover {
    background: #eee;
}

.toolbar-btn.active {
    background: #e0e0e0;
    border-color: #bbb;
}

.toolbar-select {
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    height: 24px;
    background: white;
    color: #555;
    outline: none;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 5px;
    margin-right: 5px;
    border-right: 1px solid #eee;
}

.lang-multiselect {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    min-height: 40px;
    user-select: none;
}
.lang-multiselect.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #3498db;
}
.lang-selected-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 5px 30px 5px 8px;
    min-height: 38px;
    position: relative;
}
.lang-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.lang-toggle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 30px 0 8px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.lang-pill {
    display: inline-flex;
    align-items: center;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    color: #1d4ed8;
    border-radius: 12px;
    padding: 2px 6px 2px 8px;
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
    white-space: nowrap;
}
.lang-pill-remove {
    cursor: pointer;
    font-size: 15px;
    color: #7dc8e8;
    line-height: 1;
    padding: 0 1px;
}
.lang-pill-remove:hover {
    color: #2980b9;
}
.lang-placeholder {
    color: #4b5563;
    font-size: 13px;
}
.lang-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 14px;
    pointer-events: none;
    transition: transform 0.15s;
}
.lang-multiselect.open .lang-arrow {
    transform: translateY(-50%) rotate(180deg);
}
.lang-dropdown-list {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 1000;
    background: white;
    border: 1px solid #3498db;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Tag Color Picker */
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
    gap: 8px;
    padding: 10px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 5px;
}

.outlook-fixed-grid {
    grid-template-columns: repeat(13, 30px);
    justify-content: center;
}

.color-swatch-circle {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.22);
    transition:
        transform 0.15s,
        border-color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 0;
    font-weight: 500;
    font-family: "Segoe UI", sans-serif;
}

.swatch-glyph {
    display: block;
    transform: translateY(-1px);
    color: #111;
}

.color-swatch-circle:hover {
    transform: scale(1.15);
}

.color-swatch-circle.active {
    border-color: #3498db;
    transform: scale(1.1);
    box-shadow:
        0 0 0 2px rgba(52, 152, 219, 0.2),
        inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.tag-rule-pill {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
}

.add-rule-color-trigger {
    height: 40px;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    border: 1px solid #d8dee5;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
}

.add-rule-color-trigger:hover {
    background: #f8fafc;
    border-color: #cfd7df;
}

.add-rule-color-trigger:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}

.add-rule-color-preview {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    font-family: "Segoe UI", sans-serif;
    line-height: 0;
    flex: 0 0 auto;
}

.add-rule-color-label {
    font-size: 12px;
    color: #333;
}

.ai-condition-field {
    position: relative;
    z-index: 2;
}

.ai-condition-tooltip {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    max-width: 360px;
    padding: 8px 10px;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    background: #f8fafc;
    color: #6b7280;
    font-size: 10px;
    line-height: 1.4;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s ease;
    z-index: 9999;
    pointer-events: none;
}

.ai-condition-tooltip::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 18px;
    width: 10px;
    height: 10px;
    background: #f8fafc;
    border-left: 1px solid #dbe4ee;
    border-top: 1px solid #dbe4ee;
    transform: rotate(45deg);
}

.ai-condition-field:focus-within .ai-condition-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    user-select: none;
}
.lang-dropdown-item:hover {
    background: #f5f7fa;
}
.lang-dropdown-item.selected {
    color: #2980b9;
    font-weight: 500;
}
.lang-checkmark {
    margin-left: auto;
    color: #3498db;
    font-size: 14px;
    visibility: hidden;
    flex-shrink: 0;
    padding-left: 8px;
}
.lang-dropdown-item.selected .lang-checkmark {
    visibility: visible;
}
.lang-dropdown-item.locked {
    opacity: 0.85;
    cursor: default;
}
.lang-dropdown-item.locked:hover {
    background: transparent;
}

/* Tab-level header: uppercase title + description */
.tab-header {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}
.tab-header h3 {
    font-size: 14px;
    color: #333;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.tab-header p {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

/* Active stand-in / covering indicator in the Members list. */
.member-standin-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.member-standin-chip svg {
    flex: 0 0 auto;
}

/* Repeated absence windows in the member editor. Same row idea as the
   scheduled-report entries: one date pair per row plus a remove button. */
.member-absence-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

.member-absence-row .form-group {
    margin-bottom: 0;
}

.member-absence-row input[type="date"] {
    width: 140px;
    max-width: 100%;
}

.member-absence-row .btn-icon {
    margin-bottom: 2px;
}

.member-absence-empty {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
}

/* Topic rows: the name and the About This Topic text above the three role
   selects that save on change. */
.topic-row-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    margin-right: 12px;
}

.topic-row-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.topic-row-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}

.topic-row-about {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-row-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.topic-role {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 150px;
    flex: 0 1 150px;
}

.topic-role-label {
    font-size: 10px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.topic-role-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d8dee7;
    border-radius: 6px;
    background: #fff;
    font-size: 12.5px;
    color: #1f2937;
    max-width: 100%;
}

/* Reusable form label (matches .form-group label) */
.form-label {
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

/* Custom select wrapper (matches lang-multiselect look) */
.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
.select-wrapper select {
    width: 100%;
    height: 40px;
    padding: 0 32px 0 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.select-wrapper select:focus {
    outline: none;
    border-color: #3498db;
}
.select-wrapper .select-arrow {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280;
    font-size: 12px;
}

/* Tag rule condition → tag pill */
.tag-rule-condition {
    font-size: 12px;
    color: #555;
    flex: 1;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tag-rule-arrow {
    color: #4b5563;
    margin: 0 6px;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}
.tag-rule-pill {
    display: inline-block;
    background: #e8f4fd;
    color: #1a6fa0;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.search-folder-quick-block {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    padding: 12px;
}
.search-folder-quick-block-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}
.search-folder-match-select {
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 13px;
    padding: 0 10px;
    width: 100%;
    max-width: 340px;
}
.search-folder-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.search-folder-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d8e2f0;
    background: #f8fbff;
    color: #3b4d66;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.search-folder-tag-pill.selected {
    background: #e8f2ff;
    border-color: #9cbef0;
    color: #1f4f91;
    font-weight: 600;
}
.search-folder-tag-pill input {
    margin: 0;
}
.search-folder-empty-hint {
    color: #4b5563;
    font-size: 12px;
    font-style: italic;
}
.builder-preview {
    margin-top: 10px;
    border: 1px dashed #d4dce8;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
}
.builder-preview-title {
    font-size: 11px;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 700;
}
.builder-preview-expression {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    word-break: break-word;
}
.builder-preview-list {
    margin: 0;
    padding-left: 18px;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
}
.builder-preview-list li + li {
    margin-top: 4px;
}
.builder-preview-tag-grid {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.builder-preview-tag-grid .search-folder-tag-pill {
    cursor: default;
}
.builder-preview-tag-grid .search-folder-tag-pill.preview-pill {
    border-color: #d4dbe6;
    background: #f4f6fb;
    font-weight: 600;
}

/* Report Preferences: Excluded Tags picker */
.report-exclude-tags-wrap {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.report-exclude-tags-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}
.report-exclude-tags-hint {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 10px 0;
}
.report-exclude-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    background: #fbfcfe;
    max-height: 46vh;
    overflow-y: auto;
}
.report-exclude-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.report-exclude-tag input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.report-exclude-tag .tag-rule-pill {
    cursor: pointer;
    transition:
        opacity 0.15s ease,
        filter 0.15s ease;
}
.report-exclude-tag:hover .tag-rule-pill {
    filter: brightness(0.96);
}
.report-exclude-tag.excluded .tag-rule-pill {
    opacity: 0.45;
    text-decoration: line-through;
}
.report-exclude-mark {
    margin-left: 5px;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    width: 14px;
    text-align: center;
}
.report-exclude-tag.excluded .report-exclude-mark {
    color: #b91c1c;
}
.report-exclude-tag:not(.excluded) .report-exclude-mark {
    color: #cbd5e1;
}
.report-exclude-empty {
    color: #4b5563;
    font-size: 12px;
    font-style: italic;
}
.report-exclude-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.report-exclude-modal-toolbar-actions {
    display: flex;
    gap: 8px;
}
.report-exclude-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.report-exclude-count {
    font-size: 12px;
    color: #666;
}

/* Full Report table. A report can carry many tag columns, and subjects and
   sender addresses can be long. The table therefore shares the panel width
   instead of growing past it, and every cell wraps, so the report never
   scrolls sideways. The tag columns split what the three sized columns leave
   over. */
.report-table-wrap {
    /* A Full Report can hold hundreds of rows. It scrolls inside its own box so
       opening one does not stretch the whole tab, and the sticky header below
       keeps the column labels in view. overflow-x stays clip: the fixed table
       layout cannot overflow sideways, and a horizontal scroller here would
       capture the middle-click autoscroll and leave it with nothing to scroll. */
    max-height: min(70vh, 720px);
    overflow-y: auto;
    overflow-x: clip;
}
.report-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    /* The row has a background, but a sticky cell must paint its own. */
    background: #f7f9fc;
}
.report-table {
    width: 100%;
    /* separate borders: a sticky header does not paint its background above the
       scrolling rows in the collapsed border model (Chrome). */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    table-layout: fixed;
}
.report-table th,
.report-table td {
    /* anywhere also shrinks the min-content width, so a long word in a narrow
       column wraps inside its cell instead of spilling into the next column
       or widening the table. */
    overflow-wrap: anywhere;
    /* A report adds one column per custom tag group. The padding is the floor
       of every column, so it shrinks with the viewport: without that, a table
       with many columns would be wider than the panel again. */
    padding-inline: clamp(5px, 0.8vw, 12px);
}
.report-table th {
    padding-block: 9px;
}
.report-table td {
    padding-block: 10px;
}
/* Column shares of the table width. The tag columns split what these leave
   over. On narrow viewports the Subject and Sender shares shrink so the tag
   columns keep enough room for a short badge and the table still fits. */
.report-table .report-col-check {
    width: 44px;
}
.report-table .report-col-subject {
    width: 28%;
}
.report-table .report-col-sender {
    width: 14%;
}

/* Footer under the report table when a report carries more rows than the
   table renders at once (see REPORT_INITIAL_ROWS in reports.js). */
.report-rows-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    font-size: 12px;
    color: #4b5563;
}
@media (max-width: 1100px) {
    .report-table .report-col-check {
        width: 38px;
    }
    .report-table .report-col-subject {
        width: 22%;
    }
    .report-table .report-col-sender {
        width: 11%;
    }
}
@media (max-width: 560px) {
    .report-table .report-col-check {
        width: 34px;
    }
    .report-table .report-col-subject {
        width: 16%;
    }
    .report-table .report-col-sender {
        width: 8%;
    }
}

/* Live processing status cards: a plain-language view of where mails are.
   Only cards for work that is in flight; there is no finished-mail card.
   A flex row instead of a grid so three cards can sit centred while each card
   keeps one quarter of the row, i.e. exactly the size of the four-column stat
   cards below (.overview-grid in base.css). Keep the two in sync. The negative
   inline margin cancels the .panel side padding, which would otherwise make
   these cards 12px narrower than the ones outside the panel. */
.status-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-inline: -25px;
}
.status-card {
    flex: 0 0 calc((100% - 42px) / 4);
    background: white;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.status-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.status-card-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.status-icon-wait {
    background: #f1f5f9;
    color: #475569;
}
.status-icon-read {
    background: #e0f2fe;
    color: #0369a1;
}
.status-icon-retry {
    background: #fef9c3;
    color: #854d0e;
}
.status-card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}
.status-card-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
}
.status-card-desc {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    /* Reserve two lines. Both card families do this (see the shared rule
       below), so a longer wrapping text cannot make one row taller. */
    min-height: 2.8em;
}
.status-card-note {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.4;
}
/* Both card families reserve two description lines so the processing row and
   the stat-card rows below it keep the same height at every viewport, even
   when their texts wrap differently. */
.stat-card-desc {
    min-height: 2.8em;
}
@media (max-width: 1100px) {
    .status-card {
        flex-basis: calc((100% - 14px) / 2);
    }
}
@media (max-width: 420px) {
    .status-card {
        flex-basis: 100%;
    }
}

.mail-filter-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 16px;
}
.mail-filter-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #e8ecf0;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}
.mail-filter-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.mail-filter-table tr:last-child td {
    border-bottom: none;
}
.mail-filter-table small {
    font-size: 11px;
    color: #64748b;
}

/* Notification close button: opacity hover (previously an inline handler) */
.notification-close {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 10px;
    font: inherit;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

.notification-close:hover {
    opacity: 1;
}

/* Accessibility: visible keyboard focus and reduced motion */
:focus-visible {
    outline: 2px solid #1a56db;
    outline-offset: 2px;
}
.noscript-warning {
    padding: 16px;
    background: #fff3cd;
    color: #664d03;
    font-family: sans-serif;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Native button reset for the sidebar backdrop (keeps .sidebar-backdrop visuals) */
button.sidebar-backdrop {
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* Utility classes extracted from repeated inline styles */
.u-color-64748b {
    color: #64748b;
}
.u-color-aaa-font-size-11px {
    color: #4b5563;
    font-size: 11px;
}
.u-display-flex-align-items-center {
    display: flex;
    align-items: center;
}
.u-display-flex-align-items-center-gap-6px {
    display: flex;
    align-items: center;
    gap: 6px;
}
.u-display-inline-flex-align-items-center-gap-5px {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.u-font-size-11px-display-flex-align-items-center-gap-4px {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.u-margin-bottom-0 {
    margin-bottom: 0;
}
.u-margin-bottom-15px {
    margin-bottom: 15px;
}
.u-margin-bottom-20px {
    margin-bottom: 20px;
}
.u-margin-bottom-8px {
    margin-bottom: 8px;
}
.u-margin-right-4px {
    margin-right: 4px;
}
.u-margin-right-6px {
    margin-right: 6px;
}
.u-margin-right-8px {
    margin-right: 8px;
}
.u-margin-top-20px {
    margin-top: 20px;
}
.u-margin-top-8px {
    margin-top: 8px;
}
.u-margin-0 {
    margin: 0;
}
.u-text-align-center {
    text-align: center;
}

/* Member editor — UX A / Design 1 (identity rail + writing workspace) */
/* Design 1 - "Identity rail + writing workspace"
   Wide two-zone workspace: identity rail on the left, writing surface on the
   right, availability/reporting in a full-width band, sticky action footer. */

/* ---- shell --------------------------------------------------------------- */
#memberEditModal .modal {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: 1180px !important;
    padding: 0 !important;
    max-height: calc(100vh - 40px) !important;
    overflow: hidden !important;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
    color: #1f2937;
}

/* ---- header -------------------------------------------------------------- */
#memberEditModal .ux-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 28px;
    background: #fff;
    border-bottom: 1px solid #e6e9ee;
    flex: 0 0 auto;
}
#memberEditModal .ux-head-main {
    min-width: 0;
}
#memberEditModal .ux-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: -0.01em;
}
#memberEditModal .ux-head h3 svg {
    flex: 0 0 auto;
}
#memberEditModal .ux-sub {
    font-size: 11.5px !important;
    color: #6b7280 !important;
    margin: 2px 0 0 !important;
    line-height: 1.45;
}
#memberEditModal .ux-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    background: #f8fafc;
    flex: 0 0 auto;
    max-width: 320px;
}
#memberEditModal .ux-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e8effc;
    color: #1a56db;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
#memberEditModal .ux-chip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#memberEditModal .ux-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#memberEditModal .ux-tagpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 11px;
    color: #4b5563;
    line-height: 1.2;
}
#memberEditModal .ux-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a56db;
    box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.14);
    flex: 0 0 auto;
}
#memberEditModal .ux-tagpill-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- body grid ----------------------------------------------------------- */
#memberEditModal .ux-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 20px;
    align-content: start;
    padding: 22px 28px 26px;
    background: #f7f9fc;
}
#memberEditModal .ux-card {
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
#memberEditModal .ux-rail,
#memberEditModal .ux-write {
    display: flex;
    flex-direction: column;
}
/* The color swatches keep their natural place; the report toggle anchors the
   bottom of the rail so the rail height matches the writing surface. */
#memberEditModal .ux-field-color {
    padding-top: 4px;
}
#memberEditModal .ux-field-color > label:first-child {
    margin-bottom: 8px;
}
#memberEditModal .ux-rail .ux-field-report {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #eef1f5;
}
#memberEditModal .ux-write {
    padding: 20px 24px;
}

/* ---- fields -------------------------------------------------------------- */
#memberEditModal .form-group {
    margin-bottom: 18px;
}
#memberEditModal .form-group:last-child {
    margin-bottom: 0;
}
#memberEditModal .form-group > label:not(.personalization-switch) {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
#memberEditModal .form-group > label.personalization-switch {
    display: flex;
    width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0;
}
#memberEditModal .form-group input,
#memberEditModal .form-group select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d8dee7;
    border-radius: 8px;
    font-size: 13.5px;
    color: #111827;
    background: #fff;
    box-shadow: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
#memberEditModal .form-group input:focus,
#memberEditModal .form-group select:focus {
    border-color: #1a56db;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
    outline: none;
}
#memberEditModal .form-group textarea {
    padding: 11px 12px;
    border: 1px solid #d8dee7;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #111827;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
#memberEditModal .form-group textarea:focus {
    border-color: #1a56db;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
    outline: none;
}
#memberEditModal .ux-help {
    font-size: 11px !important;
    color: #6b7280 !important;
    line-height: 1.5;
    margin: 6px 0 0 !important;
    max-width: 68ch;
}
#memberEditModal .ux-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px !important;
    letter-spacing: 0.08em;
    color: #6b7280 !important;
    font-weight: 700 !important;
    margin: 0 0 16px !important;
}

#memberEditModal .ux-section-icon {
    color: #3498db;
    flex: 0 0 auto;
}

#memberEditModal .ux-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#memberEditModal .ux-label-inline svg {
    flex: 0 0 auto;
}

/* about + signature get the vertical room in the writing surface */
#memberEditModal .ux-field-about textarea {
    min-height: 150px;
}
#memberEditModal .ux-field-sig {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
#memberEditModal .ux-field-sig > label {
    margin-bottom: 8px;
}
#memberEditModal #memberEditSignatureToolbar .editor-toolbar {
    margin: 0;
    padding: 6px;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #d8dee7;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}
#memberEditModal #memberEditSignature {
    min-height: 232px;
    /* Fill the remaining height of the writing column. Without this the
       editor keeps its minimum and leaves a dead block under it whenever the
       About field is hidden (topic mode). */
    flex: 1 1 auto;
    margin-top: 0;
    padding: 14px;
    border: 1px solid #d8dee7;
    border-radius: 0 0 8px 8px;
    font-size: 13.5px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
#memberEditModal #memberEditSignature:focus {
    border-color: #1a56db;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

/* tag color grid */
#memberEditModal .color-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    gap: 6px !important;
    padding: 10px !important;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    margin-top: 2px;
}
#memberEditModal .color-swatch-circle {
    width: 24px;
    height: 24px;
    outline-offset: 2px;
}
#memberEditModal .color-swatch-circle.active {
    border-color: #1a56db;
    box-shadow: 0 0 0 2px rgba(26, 86, 219, 0.28);
}

/* ---- bottom band --------------------------------------------------------- */
#memberEditModal .ux-band {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
    gap: 32px;
    /* Top-aligned: the fields column (stand-in plus the absence list) can grow
       taller than the note column. */
    align-items: start;
    padding: 20px 24px;
}
#memberEditModal .ux-standin-row {
    display: flex !important;
    align-items: flex-start;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}
#memberEditModal .ux-standin-row > .form-group {
    margin-bottom: 0;
}
#memberEditModal .ux-standin-row > .form-group:first-child {
    flex: 1 1 auto;
    min-width: 0;
}
#memberEditModal .ux-dates {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}
#memberEditModal .ux-dates > .form-group {
    width: 148px !important;
    min-width: 0;
    margin-bottom: 0;
}
#memberEditModal .ux-help-wide {
    max-width: 82ch;
    margin: 0 !important;
}
#memberEditModal .ux-band-note .ux-help + .ux-help {
    margin-top: 10px !important;
}
#memberEditModal .ux-band-note {
    border-left: 1px solid #eef1f5;
    padding-left: 32px;
    min-width: 0;
}
#memberEditModal .ux-band-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
#memberEditModal .ux-field-absences {
    margin-top: 0;
}
#memberEditModal .ux-field-report > label:first-child {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}
#memberEditModal .ux-field-report .personalization-switch {
    padding: 9px 12px;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    background: #f8fafc;
    box-sizing: border-box;
}
#memberEditModal .personalization-switch-text {
    font-size: 12.5px;
    color: #374151;
}

/* ---- sticky footer ------------------------------------------------------- */
#memberEditModal .ux-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 28px;
    background: #fff;
    border-top: 1px solid #e6e9ee;
}
#memberEditModal .ux-actions {
    margin-top: 0 !important;
    align-items: center;
}
#memberEditModal .ux-foot .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-width: 100px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
}
#memberEditModal .ux-foot .btn-primary {
    min-width: 148px;
    background: #1a56db;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}
#memberEditModal .ux-foot .btn-primary:hover {
    background: #1747b5;
}
#memberEditModal .ux-foot .btn:not(.btn-primary) {
    background: #fff;
    border: 1px solid #d8dee7;
    color: #374151;
}
#memberEditModal .ux-foot .btn:not(.btn-primary):hover {
    background: #f8fafc;
}

/* ---- tablet / mobile ----------------------------------------------------- */
@media (max-width: 960px) {
    #memberEditModal .ux-body {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px 20px 22px;
        gap: 16px;
    }
    #memberEditModal .ux-band {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    #memberEditModal .ux-band-note {
        border-left: 0;
        border-top: 1px solid #eef1f5;
        padding-left: 0;
        padding-top: 16px;
    }
    #memberEditModal .ux-head {
        padding: 16px 20px;
    }
    #memberEditModal .ux-foot {
        padding: 12px 20px;
    }
    #memberEditModal #memberEditSignature {
        min-height: 200px;
    }
    #memberEditModal .ux-field-about textarea {
        min-height: 172px;
    }
}

@media (max-width: 640px) {
    #memberEditModal .modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }
    #memberEditModal .ux-head {
        padding: 14px 16px;
        gap: 12px;
    }
    #memberEditModal .ux-chip {
        display: none;
    }
    #memberEditModal .ux-head h3 {
        font-size: 16px;
    }
    #memberEditModal .ux-body {
        padding: 14px 16px 18px;
        gap: 14px;
    }
    #memberEditModal .ux-card {
        padding: 16px;
    }
    #memberEditModal .ux-write {
        padding: 16px;
    }
    #memberEditModal .ux-standin-row {
        flex-direction: column;
        gap: 14px !important;
    }
    #memberEditModal .ux-dates {
        width: 100%;
    }
    #memberEditModal .ux-dates > .form-group {
        flex: 1 1 0;
        width: auto !important;
    }
    #memberEditModal .ux-foot {
        padding: 12px 16px;
    }
    #memberEditModal .ux-actions {
        width: 100%;
    }
    #memberEditModal .ux-foot .btn {
        flex: 1 1 0;
        min-width: 0;
    }
    #memberEditModal .ux-foot .btn-primary {
        min-width: 0;
    }
}

/* The form is the flex child between the header and the footer: let it fill
   the modal, keep the footer pinned and scroll only the body. */
#memberEditModal form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}