/* ---------- Modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    width: min(92vw, 520px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.modal.modal-wide { width: min(94vw, 720px); }
.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="search"],
.modal-body input[type="date"],
.modal-body select,
.modal-body textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    color: var(--color-text-primary);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}
.modal-body textarea { font: 12px ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; }
.modal-body select[multiple] { padding: 4px; }

/* Sync status header: ``status: error · last: …`` text on the left,
   inline ``Clear errors`` button on the right when an error exists. */
.sync-status-line-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--md);
}
.sync-error-clear {
    flex-shrink: 0;
}

/* Sync error banner under the status line. White-on-red so it reads
   as "stop — fix this" rather than the muted hint colour the rest of
   ``.hint`` text uses. Preserves newlines so multi-API failures from
   the preflight stack legibly. Fixed height + internal scroll so a
   long history (e.g. an hourly auto-sync run that's been failing for
   days) doesn't push the rest of the modal off-screen. */
.sync-error-block {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid #dc2626;
    border-radius: 4px;
    color: #7f1d1d;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 180px;
    overflow-y: auto;
}
.sync-error-block a {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Provider picker on the GD sync OAuth pane: visually distinguish
   "picked from saved providers" from manual entry by tagging the
   following inputs while a provider is selected. The accent left-border
   is a subtle hint that the field's value came from somewhere else. */
.sync-gd-provider-row { margin: 0 0 4px; }
.sync-gd-pane.provider-picked input#sync-gd-client-id,
.sync-gd-pane.provider-picked input#sync-gd-client-secret {
    border-left: 3px solid var(--color-accent);
}
.modal-body .radio-row,
.modal-body .branches-row,
.modal-body .check-row {
    display: flex;
    align-items: center;
    gap: var(--md);
    flex-wrap: wrap;
}

/* NFS directory picker — scoped one-level-at-a-time browser. */
.modal-body input.readonly-input {
    background: var(--color-bg);
    color: var(--color-text-secondary);
}
.nfs-picker-row {
    display: flex;
    align-items: center;
    gap: var(--sm);
}
.nfs-picker-row input[type="text"] { flex: 1; min-width: 0; }
.nfs-picker-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
}
.nfs-picker-list li {
    padding: 6px 10px;
    cursor: pointer;
    font: 13px/1.4 var(--font);
    border-bottom: 1px solid var(--color-border-light);
}
.nfs-picker-list li:last-child { border-bottom: 0; }
.nfs-picker-list li:hover { background: var(--color-bg-hover); }
.nfs-picker-list li.muted { color: var(--color-text-secondary); cursor: default; }
.nfs-picker-list li.muted:hover { background: transparent; }
/* Google Drive tree picker */
.gd-tree-group {
    font-weight: 600;
    margin: 8px 0 2px;
    color: var(--color-text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gd-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    min-height: 26px;
}
.gd-tree-row:hover { background: var(--color-bg-hover); }
.gd-tree-exp {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.gd-tree-exp:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-text); }
.gd-tree-exp:disabled { cursor: default; opacity: .4; }
.gd-tree-cb { flex-shrink: 0; margin: 0; cursor: pointer; }
.gd-tree-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
    cursor: default;
    overflow: hidden;
}
.gd-tree-label > span:first-child { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-tree-sub { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-tree-children { /* indent handled via padding-left on .gd-tree-row */ }

/* A label that IS the row (<label class="check-row">) gets the same
   normal-case treatment as labels nested inside one, and keeps the
   checkbox on the first text line when the caption wraps. */
.modal-body label.check-row {
    text-transform: none;
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--sm);
    cursor: pointer;
}
.modal-body label.check-row input[type="checkbox"] {
    margin: 2px 0 0;
    flex: none;
}

.modal-body .radio-row label,
.modal-body .check-row label,
.modal-body .branches-row label {
    text-transform: none;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--md) var(--lg);
    border-bottom: 1px solid var(--color-border-light);
}
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.modal-body {
    padding: var(--lg);
    display: flex;
    flex-direction: column;
    gap: var(--md);
    overflow-y: auto;
}
.modal-body label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ----- Settings modal: API keys / MCP connection snippets ----- */
.mcp-howto { margin: 4px 0 14px; font-size: 13px; }
.mcp-howto > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary);
    user-select: none;
}
.mcp-howto-body { padding: 8px 0 0 2px; }
/* Caption + copy button on one line above each snippet. */
.snippet-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sm); margin: 10px 0 4px;
    font-size: 13px; font-weight: 600;
}
.mcp-snippet, .reveal-snippet {
    margin: 0;
    padding: 8px;
    border-radius: var(--radius-md);
    font-size: 11px;
    overflow-x: auto;
    white-space: pre;
}
.mcp-snippet {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
}
/* Inside the amber "copy it now" reveal banner — match its palette. */
.reveal-snippet {
    background: #fff;
    border: 1px solid #ffd479;
    color: #5a3a00;
}

.agpl-footer {
    padding: var(--md);
    text-align: center;
    font-size: 12px;
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--lg);
}
.agpl-footer a { color: var(--color-text-secondary); text-decoration: none; }
.agpl-footer a:hover { color: var(--color-accent); }


/* ---------- Inline list pickers ----------
   The "Pick Jira projects / SharePoint sites / Teams user" overlays are built
   in JS but themed here so they track light/dark like the rest of the app
   instead of falling back to white native controls. Markup:
     .modal-body > .picker-filter (search) + .picker-list > li [> label] */
.picker-filter { margin-bottom: var(--sm); }
/* Multi-select pickers use a small textarea (not an <input>) so pasted
   comma- AND newline-separated lists survive — <input> strips newlines. Keep
   the proportional font (these are keys/names, not code) and a compact height
   that the user can drag taller for a long pasted list. */
.modal-body textarea.picker-filter-multi {
    font: inherit;
    min-height: 2.4em;
    resize: vertical;
}
.picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.picker-list li {
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border-light);
}
.picker-list li:last-child { border-bottom: 0; }
.picker-list li:hover { background: var(--color-bg-hover); }
.picker-list label {
    display: flex;
    gap: var(--sm);
    align-items: center;
    cursor: pointer;
    margin: 0;
    /* override the uppercase .modal-body label treatment — these are content */
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-primary);
}
.picker-list .picker-row { cursor: pointer; font-size: 13px; color: var(--color-text-primary); }
.picker-list .picker-name { font-weight: 600; }
.picker-sub { color: var(--color-text-secondary); font-size: 12px; }