/* ============================================================================
   DockVault Vault Service - Component Styles
   Buttons, Cards, Forms, Modals, Navigation, etc.
   ============================================================================ */

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button - Main Actions */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-accent) 100%);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px); /* More pronounced lift */
    box-shadow: var(--shadow-lg); /* Stronger shadow */
}

.btn-primary:hover:not(:disabled)::before {
    opacity: 1;
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Secondary Button - Less Prominent Actions */
.btn-secondary {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--surface-3);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--brand-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Outline Button - Alternative Style */
.btn-outline {
    background: transparent;
    color: var(--brand-secondary);
    border: 2px solid var(--brand-secondary);
}

.btn-outline:hover:not(:disabled) {
    background: var(--brand-secondary);
    color: var(--text-inverse);
}

/* Danger Button - Destructive Actions */
.btn-danger {
    background: var(--error);
    color: var(--text-inverse);
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
}

/* Success Button */
.btn-success {
    background: var(--success);
    color: var(--text-inverse);
}

.btn-success:hover:not(:disabled) {
    background: #059669;
}

/* Ghost Button - Minimal Style */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--hover-overlay);
}

/* Icon Button - Square */
.btn-icon {
    padding: var(--space-sm);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
}

.btn-icon:hover:not(:disabled) {
    background: var(--hover-overlay);
    color: var(--text-primary);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--text-lg);
}

/* Full Width Button */
.btn-block {
    width: 100%;
}

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
    background: var(--surface-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--surface-3);
    overflow: hidden;
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(59, 130, 246, 0.2); /* Subtle brand color hint */
}

.card-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--surface-3);
}

.card-body {
    padding: var(--space-lg);
}

.card-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--surface-3);
    background: var(--surface-1);
}

/* Interactive Card */
.card-interactive {
    cursor: pointer;
    position: relative;
}

.card-interactive::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(6, 182, 212, 0.03) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.card-interactive:hover {
    transform: translateY(-4px); /* More elevation */
    box-shadow: var(--shadow-xl); /* Dramatic shadow */
    border-color: var(--brand-secondary);
}

.card-interactive:hover::after {
    opacity: 1;
}

/* Card with Gradient Header */
.card-gradient {
    border: none;
}

.card-gradient .card-header {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-accent) 100%);
    color: var(--text-inverse);
    border-bottom: none;
}

/* ============================================================================
   FORMS
   ============================================================================ */
.form-group {
    margin-bottom: var(--space-lg);
}

/* Header labels only — exempt checkbox/radio OPTION labels (`.flex` / `.checkbox-label`), whose
   flex `gap` this shared display:block base otherwise makes inert (cramped). This is the base
   rule both skins load; the skin CSS carries the matching exemption + the .checkbox-label rule. */
.form-group label:not(.flex):not(.checkbox-label) {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.form-group label.required::after {
    content: ' *';
    color: var(--error);
}

.form-control,
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface-0);
    border: 2px solid var(--surface-3); /* Thicker border for clarity */
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.form-control:hover,
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
    border-color: var(--surface-4); /* Subtle hover feedback */
}

.form-control:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); /* Soft glow */
    background: var(--surface-0);
}

.form-control::placeholder {
    color: var(--text-tertiary);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Form Validation States */
.form-control.is-invalid,
.form-input.is-invalid,
.input.is-invalid {
    border-color: var(--error);
}

.form-control.is-valid,
.form-input.is-valid {
    border-color: var(--success);
}

.form-help {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.form-error {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--error);
}

/* Input Groups */
.input-group {
    display: flex;
    gap: 0;
}

.input-group .form-control {
    border-radius: 0;
}

.input-group .form-control:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.input-group .form-control:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.input-group .btn {
    border-radius: 0;
}

.input-group .btn:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* ============================================================================
   MODALS
   ============================================================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn var(--transition-base) forwards;
}

.modal.active {
    display: flex;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--surface-0);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Large modal for multi-section surfaces (e.g. the self-service account modal). Higher
   specificity than either skin's .modal-content so the 500px cap is overridden in both. */
.modal-content.modal-lg { max-width: min(1000px, 95vw); width: 95%; }
.us-section { padding: var(--space-md) 0; border-top: 1px solid color-mix(in srgb, var(--text-tertiary) 28%, transparent); }
.us-section:first-of-type { border-top: none; padding-top: 0; }
.us-section-title { margin: 0 0 var(--space-sm) 0; font-size: var(--text-base); font-weight: 600; }
.us-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }

/* Email Studio — sending-profile / template card grid (shared base, both skins). */
.email-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-md); }
.email-profile-card {
    border: 1px solid var(--surface-3); border-radius: var(--radius-lg); padding: var(--space-md);
    display: flex; flex-direction: column; gap: var(--space-xs); background: var(--surface-1); min-height: 120px;
}
.email-profile-card .epc-title { font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.email-profile-card .epc-title > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.email-profile-card .epc-desc { font-size: var(--text-sm); color: var(--text-secondary); flex: 1 1 auto; word-break: break-word; }
.email-profile-card .epc-meta { font-size: var(--text-xs); color: var(--text-tertiary); overflow-wrap: anywhere; }
.email-profile-card .epc-actions { margin-top: var(--space-sm); display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.epc-badge {
    font-size: var(--text-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text-primary) 12%, transparent); color: var(--text-secondary);
}
.email-card-add {
    border: 1px dashed var(--surface-3); border-radius: var(--radius-lg); padding: var(--space-md);
    display: flex; align-items: center; justify-content: center; gap: var(--space-xs); cursor: pointer;
    color: var(--text-secondary); background: transparent; min-height: 120px; font-weight: 500; text-align: center;
}
.email-card-add:hover { border-color: var(--text-secondary); color: var(--text-primary); background: var(--surface-1); }

/* Email templates — wider cards + the inline code/render/split editor. */
#email-templates-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.et-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.et-editor-headbtns { display: flex; gap: var(--space-sm); }
.et-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--surface-3); }
.et-view-toggle { margin-left: auto; display: inline-flex; gap: 2px; }
.et-view.active { background: var(--surface-3); color: var(--text-primary); }
.et-dyn-wrap { position: relative; display: inline-block; }
.et-dyn-menu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 220px; background: var(--surface-0); border: 1px solid var(--surface-3); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-xs); }
/* The dynamic-action menu is a two-level list: a scrollable list of GROUP rows, each opening a
   flyout submenu of tokens (positioned in JS, viewport-aware so it flips up/left near an edge). */
.et-dyn-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: none; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; font-size: var(--text-sm); }
.et-dyn-group:hover, .et-dyn-group.active { background: var(--surface-2); }
.et-dyn-chevron { color: var(--text-tertiary); font-size: var(--text-xs); }
.et-dyn-submenu { position: fixed; z-index: 70; min-width: 230px; max-height: 60vh; overflow-y: auto; background: var(--surface-0); border: 1px solid var(--surface-3); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-xs); }
.et-dyn-submenu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; font-size: var(--text-sm); }
.et-dyn-submenu button:hover { background: var(--surface-2); }
.et-dyn-submenu .et-dyn-token { color: var(--text-tertiary); font-size: var(--text-xs); }
/* Load From dropdown: default templates ── underline ── your templates. ~5 rows then scroll. */
.et-loadfrom-menu { max-height: 236px; overflow-y: auto; min-width: 240px; }
.et-loadfrom-section { font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px 3px; }
.et-loadfrom-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; font-size: var(--text-sm); }
.et-loadfrom-item:hover { background: var(--surface-2); }
.et-loadfrom-sep { border-top: 1px solid var(--surface-3); margin: 4px 0; }
.et-loadfrom-empty { padding: 4px 10px 6px; color: var(--text-tertiary); font-size: var(--text-xs); }

/* Reusable on/off switch: a real focusable checkbox overlaid (opacity 0) on a painted track, so it
   stays keyboard-accessible and hit-testable while the track shows the state. */
.dv-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; cursor: pointer; }
.dv-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.dv-switch input:disabled { cursor: not-allowed; }
.dv-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); pointer-events: none; transition: background var(--transition-base, .15s); }
.dv-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-0); border: 1px solid var(--surface-3); box-shadow: var(--shadow-sm); transition: transform var(--transition-base, .15s); }
.dv-switch input:checked + .dv-switch-track::after { border-color: transparent; }
.dv-switch input:checked + .dv-switch-track { background: var(--success, #16a34a); }
.dv-switch input:checked + .dv-switch-track::after { transform: translateX(16px); }
.dv-switch input:focus-visible + .dv-switch-track { outline: 2px solid var(--primary, #6366f1); outline-offset: 2px; }
.dv-switch input:disabled + .dv-switch-track { opacity: .45; }
.ear-notify { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ear-notify-state { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }

/* Send-test modal: the user-search results dropdown + the picked-recipient banner. */
.et-test-results:not(:empty) { border: 1px solid var(--surface-3); border-radius: var(--radius-md); margin-top: 4px; max-height: 200px; overflow-y: auto; padding: var(--space-xs); }
.et-test-selected { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); }
.et-panes { display: grid; gap: var(--space-md); }
.et-panes.et-view-code { grid-template-columns: 1fr; }
.et-panes.et-view-render { grid-template-columns: 1fr; }
.et-panes.et-view-split { grid-template-columns: 1fr 1fr; }
.et-panes.et-view-code .et-render { display: none; }
.et-panes.et-view-render .et-code { display: none; }
.et-code { min-height: 60vh; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; white-space: pre; }
.et-render { min-height: 60vh; width: 100%; border: 1px solid var(--surface-3); border-radius: var(--radius-md); background: #ffffff; }
.et-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); max-height: 50vh; overflow-y: auto; }
.et-image-item { border: 1px solid var(--surface-3); border-radius: var(--radius-md); padding: 4px; cursor: pointer; background: var(--surface-1); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.et-image-item:hover { border-color: var(--text-secondary); }
.et-image-item img { width: 100%; height: 72px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); }
.et-image-item .et-image-name { font-size: var(--text-xs); color: var(--text-tertiary); overflow-wrap: anywhere; text-align: center; max-width: 100%; }
.et-image-size-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.et-image-size-row label { font-size: var(--text-sm); color: var(--text-secondary); }
.et-image-size-row select { width: auto; min-width: 150px; }
.et-image-size-row input[type="number"] { width: auto; min-width: 110px; }

/* An info/help box that flows as normal text. Deliberately NOT `.alert`, whose flex layout scatters
   inline <strong>/<em> into separate flex items. */
.email-hint {
    font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary);
    background: color-mix(in srgb, var(--info) 8%, var(--surface-1));
    border: 1px solid color-mix(in srgb, var(--info) 22%, transparent);
    border-left: 3px solid var(--info);
    border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}
.email-hint strong { color: var(--text-primary); font-weight: 600; }
.email-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--surface-3); padding: 0 4px; border-radius: var(--radius-sm); }

/* Automated-email (action) rows + the "bound to an action" badge on a template card. */
.email-action-row { border: 1px solid var(--surface-3); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-sm); background: var(--surface-1); }
.ear-head { display: flex; align-items: center; gap: var(--space-sm); }
.ear-name { font-weight: 600; color: var(--text-primary); }
.ear-badge { font-size: var(--text-xs); padding: 1px 8px; border-radius: 999px; }
.ear-badge-system { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.ear-badge-optional { background: var(--surface-3); color: var(--text-secondary); }
.ear-desc { font-size: var(--text-sm); color: var(--text-secondary); margin: 4px 0 8px; }
.ear-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-md); }
.ear-field { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.ear-template { min-width: 220px; width: auto; }
.ear-msg { min-width: 60px; }
.epc-badge { font-size: var(--text-xs); padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.epc-badge-system { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.epc-badge-inuse { background: var(--surface-3); color: var(--text-secondary); }
.epc-badge-default { background: color-mix(in srgb, var(--success, #16a34a) 18%, transparent); color: var(--success, #16a34a); }

/* The editor card must let the dynamic-action dropdown escape (it otherwise clips against the card's
   `overflow:hidden`); the ID beats `.card`. */
#email-template-editor { overflow: visible; }
/* Group list scrolls after ~4 rows (5 groups today), so the top-level menu stays compact. */
.et-dyn-menu { z-index: 60; max-height: 168px; overflow-y: auto; min-width: 200px; }

/* Give the code textarea and render iframe an adequate, EQUAL min-height so switching Code/Render
   doesn't jump. The ID+2-class selector beats `#settings-section .form-control`, which otherwise caps
   the textarea at 32px. */
#email-template-editor .et-panes .et-code,
#email-template-editor .et-panes .et-render { min-height: 480px; }

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: var(--space-xl);
    border-bottom: 1px solid var(--surface-3);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--text-2xl);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-xl);
}

.modal-footer {
    padding: var(--space-xl);
    border-top: 1px solid var(--surface-3);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}

/* Vault-list ordering controls — sort key, direction, favourites placement.
 *
 * Styled here in the shared base, not per skin, so both skins get the same cluster: the two skins
 * each define .seg-filter/.seg-btn separately and duplicating a third group in both would drift.
 * The direction toggle reuses .seg-btn (defined by whichever skin is active) so it matches the
 * neighbouring segmented controls without restating their colours here.
 */
.vault-sort-group {
    display: inline-flex;
    align-items: stretch;
    gap: var(--space-xs, .25rem);
}
.vault-sort-select {
    padding: .4rem .55rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    max-width: 12rem;
}
.vault-sort-select:hover { color: var(--text-primary); }
/* The direction arrow is a glyph, not an icon sprite, so give it a predictable square footprint
   instead of inheriting the text-width of an arrow character.
   Selector is `button.vault-sort-dir` (0,1,1) on purpose: this file loads BEFORE both skin sheets,
   and .seg-btn there declares `border: 0; background: transparent` at the same (0,1,0) specificity,
   so a bare .vault-sort-dir loses the tie and the button renders borderless next to two bordered
   selects — the opposite of the grouping intended here. */
button.vault-sort-dir {
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    min-width: 2rem;
    justify-content: center;
}

/* Create-vault modal: keep Cancel / Create Vault reachable without scrolling.
 *
 * By default a .modal-content caps at 90vh and scrolls as ONE block, so header, body and footer
 * scroll together and a tall form pushes the buttons out of view. That is what happens here once
 * the vault-type chooser is shown (zero-knowledge available): measured at 1280px wide with the
 * chooser present, the dialog needs 817px on the Classic skin and 689px on Console, against 90vh
 * of usable space — so Classic overflowed at every height tested (900/800/700) and Console
 * overflowed at 700.
 *
 * Shortening the description field alone does not fix that (it is worth ~45px of the ~99px
 * Classic overflow at 800px), so the layout is what changes: the dialog becomes a flex column
 * whose BODY scrolls while the header and footer stay put. The buttons are then visible at any
 * viewport height, including states this form does not have yet.
 *
 * Deliberately scoped to this one dialog by id. The same pattern would suit every modal, but
 * changing the shared .modal-content layout would touch ~20 dialogs at once — several with their
 * own structure — and that deserves its own change with its own sweep, not a side effect of this
 * one. The id selector (1,1,0) also outranks the .modal-content rule both skins define (0,1,0),
 * so this holds regardless of stylesheet order.
 *
 * The footer sits INSIDE the <form>, so the form is the flex child that must be allowed to shrink
 * (min-height: 0); without that, a flex item's automatic minimum size keeps it at content height
 * and the body never scrolls.
 *
 * overflow-y stays `auto`, NOT `hidden`. In normal use the body absorbs everything and the dialog
 * never scrolls, so this is invisible — but the header and footer are `flex: 0 0 auto` and their
 * automatic minimum size floors them at content height, so when even header + footer alone exceed
 * 90vh (roughly a 220px-tall viewport on Classic — reachable at 400% zoom, a WCAG reflow case)
 * something has to give. `auto` degrades to a scrollbar, the way the whole dialog used to;
 * `hidden` would clip the buttons off with no way to reach them, which is worse than the bug this
 * block fixes. ui-v2.css records the same lesson from a previous incident: a bare `overflow:
 * hidden` on .modal-content clipped a tall dialog with no scrollbar at all.
 */
#create-vault-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;             /* the body absorbs overflow; this is the last-resort scroller */
}
#create-vault-modal #create-vault-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#create-vault-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
#create-vault-modal .modal-header,
#create-vault-modal .modal-footer {
    flex: 0 0 auto;
}

/* The description defaults to one line (rows="1" in the markup) and stays a real textarea:
 * newlines are still accepted, and it can be dragged taller. Classic computes `resize: both`,
 * which lets a horizontal drag push the field outside the dialog, so both skins are pinned to
 * vertical here.
 */
#create-vault-modal #vault-desc {
    resize: vertical;
}

/* Close Button */
.modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--hover-overlay);
    color: var(--text-primary);
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */
.navbar {
    height: var(--navbar-height);
    background: var(--surface-0);
    border-bottom: 1px solid var(--surface-3);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-xl);
}

.navbar-container {
    max-width: var(--content-max-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.navbar-brand-icon {
    font-size: var(--text-2xl);
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.navbar-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.navbar-item:hover {
    color: var(--text-primary);
    background: var(--hover-overlay);
}

.navbar-item.active {
    color: var(--brand-secondary);
    background: rgba(59, 130, 246, 0.1);
}

/* User Menu */
.navbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.navbar-user:hover {
    background: var(--surface-3);
}

.navbar-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-weight: 600;
}

/* Profile Menu */
.profile-menu {
    position: relative;
}

.profile-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: all var(--transition-base);
}

.profile-btn:hover {
    transform: scale(1.05);
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-weight: 600;
    font-size: var(--text-sm);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.profile-btn:hover .profile-avatar {
    box-shadow: var(--shadow-md);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    min-width: 240px;
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-base);
    z-index: 1000;
    border: 1px solid var(--border-color);
}

.profile-menu.active .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Notifications bell + dropdown (mirrors the profile-menu show/hide pattern; self-contained so it
   renders in all three skins via the shared design tokens) */
.notif-menu { position: relative; display: flex; align-items: center; margin-right: var(--space-md); }
.notif-btn {
    position: relative; background: none; border: none; cursor: pointer; padding: var(--space-xs);
    display: flex; align-items: center; color: var(--text-secondary);
    border-radius: var(--radius-full); transition: all var(--transition-base);
}
.notif-btn:hover { color: var(--text-primary); background: var(--surface-2); }
.notif-badge {
    position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--radius-full); background: var(--error); color: #fff; font-size: 11px;
    font-weight: 700; line-height: 18px; text-align: center;
}
.notif-dropdown {
    position: absolute; top: calc(100% + var(--space-xs)); right: 0; width: 340px; max-width: 90vw;
    background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all var(--transition-base); z-index: 1000; overflow: hidden;
}
.notif-menu.active .notif-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-dropdown-header {
    padding: var(--space-sm) var(--space-md); display: flex; align-items: center;
    justify-content: space-between; border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
}
.notif-dropdown-title { font-weight: 600; color: var(--text-primary); font-size: var(--text-base); }
.notif-mark-all {
    background: none; border: none; cursor: pointer; color: var(--brand-accent);
    font-size: var(--text-sm); padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
    display: flex; gap: var(--space-sm); padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color); cursor: pointer;
    transition: background var(--transition-base);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: color-mix(in srgb, var(--brand-accent) 8%, transparent); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.notif-item-text { color: var(--text-secondary); font-size: var(--text-sm); word-break: break-word; }
.notif-item-time { color: var(--text-tertiary); font-size: var(--text-xs); margin-top: 2px; }
.notif-item-dismiss {
    background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 2px;
    flex: 0 0 auto; align-self: flex-start; border-radius: var(--radius-sm);
}
.notif-item-dismiss:hover { color: var(--error); }
.notif-empty {
    padding: var(--space-lg) var(--space-md); text-align: center;
    color: var(--text-tertiary); font-size: var(--text-sm);
}

/* Dashboard personal lanes (What's waiting / Favourites / Most recent). Shared by both skins. */
.dashboard-lane .card-body.dashboard-lane-body { padding: var(--space-xs) 0; }
.dashboard-lane-list { display: flex; flex-direction: column; }
.dashboard-lane-item {
    display: flex; align-items: center; gap: var(--space-sm); width: 100%; text-align: left;
    padding: var(--space-sm) var(--space-md); background: none; border: none; cursor: pointer;
    color: inherit; font: inherit; border-radius: 0;
    transition: background var(--transition-base);
}
.dashboard-lane-item:hover { background: var(--surface-2); }
.dashboard-lane-item.unread { background: color-mix(in srgb, var(--brand-accent) 8%, transparent); }
.dashboard-lane-icon { flex: 0 0 auto; display: inline-flex; color: var(--text-tertiary); }
.dashboard-lane-main { flex: 1; min-width: 0; }
.dashboard-lane-title {
    font-weight: 600; color: var(--text-primary); font-size: var(--text-sm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard-lane-sub {
    font-size: var(--text-xs); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dashboard-lane-empty {
    padding: var(--space-lg) var(--space-md); text-align: center; font-size: var(--text-sm);
}

/* Note read modal: a left rail of notes beside the rendered note body. Shared by both skins. */
.note-view-body { display: flex; gap: var(--space-md); align-items: stretch; }
.note-view-rail {
    flex: 0 0 220px; max-height: 60vh; overflow-y: auto;
    border-right: 1px solid var(--border-color); padding-right: var(--space-sm);
}
.note-view-main { flex: 1; min-width: 0; max-height: 60vh; overflow-y: auto; }
.note-view-text {
    white-space: pre-wrap; word-break: break-word; font-size: var(--text-sm);
    color: var(--text-primary); line-height: 1.6;
}
.note-view-rail-item {
    display: block; width: 100%; text-align: left; padding: var(--space-sm);
    background: none; border: none; cursor: pointer; color: var(--text-primary);
    font: inherit; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; transition: background var(--transition-base);
}
.note-view-rail-item:hover { background: var(--surface-2); }
.note-view-rail-item.active { background: color-mix(in srgb, var(--brand-accent) 12%, transparent); font-weight: 600; }
@media (max-width: 640px) {
    .note-view-body { flex-direction: column; }
    .note-view-rail { flex-basis: auto; max-height: 30vh; border-right: none; border-bottom: 1px solid var(--border-color); padding-right: 0; }
}

/* Notes list cards: the whole tile opens the note; the body wraps + clamps (no horizontal overflow);
   the action row sits at the bottom so a short note doesn't leave the buttons floating up top. */
.note-card { cursor: pointer; display: flex; flex-direction: column; }
.note-card .card-body { display: flex; flex-direction: column; flex: 1; gap: var(--space-xs); }
.note-card .note-title { min-width: 0; margin: 0; }
.note-open-title {
    background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
    text-align: left; cursor: pointer; width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-open-title:hover { text-decoration: underline; }
.note-open-title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.note-card .note-body {
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; min-width: 0;
    color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.note-card .note-actions { margin-top: auto; flex-wrap: wrap; }

/* Note-link tag admin: a colour dot + icon beside each tag in the list, and an icon-choice grid in
   the editor (mirrors the .accent-swatch colour picker pattern). */
.nl-tag-idlead { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.nl-color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--surface-3); }
.icon-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.icon-choice {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--surface-1); border: 1px solid var(--surface-3); color: var(--text-primary);
    transition: background var(--transition-fast, .15s);
}
.icon-choice:hover { background: var(--surface-2); }
.icon-choice.selected { box-shadow: 0 0 0 1px var(--surface-0), 0 0 0 3px var(--text-primary); }
.icon-choice:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Share chooser: two big tiles (Send to a member / Public link). */
.share-tiles { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.share-tile {
    flex: 1 1 200px; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
    text-align: left; cursor: pointer;
    padding: var(--space-md); border-radius: var(--radius-lg);
    background: var(--surface-1); border: 1px solid var(--surface-3); color: var(--text-primary);
    transition: border-color var(--transition-fast, .15s), background var(--transition-fast, .15s);
}
.share-tile:hover:not(:disabled) { background: var(--surface-2); border-color: var(--brand-accent, var(--text-tertiary)); }
.share-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.share-tile:disabled { opacity: .5; cursor: not-allowed; }
.share-tile .icon { color: var(--text-secondary); }
.share-tile-title { font-weight: 600; font-size: var(--text-base); }
.share-tile-sub { font-size: var(--text-sm); color: var(--text-secondary); white-space: normal; }

/* "Shared (by me)" link cards: a subtle per-tag colour spine + a wrapping title. */
.note-link-card .note-link-title { margin: 0; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

.profile-dropdown-header {
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-1) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.profile-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-weight: 700;
    font-size: var(--text-lg);
    box-shadow: var(--shadow-sm);
}

.profile-username {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-base);
}

.profile-role {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.profile-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-xs) 0;
}

.profile-dropdown-item {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: all var(--transition-base);
}

.profile-dropdown-item:hover {
    background: var(--surface-2);
}

.profile-dropdown-item:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.profile-dropdown-item span:first-child {
    width: 20px;
    text-align: center;
}

/* ============================================================================
   APP LAYOUT & SIDEBAR
   ============================================================================ */
.app-layout {
    display: flex;
    height: calc(100vh - var(--navbar-height));
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: 240px;
    background: var(--surface-1);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
    position: relative;
    z-index: 100;
}

.sidebar.collapsed {
    width: 64px;
}

.sidebar-toggle {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    z-index: 101;
}

.sidebar-toggle:hover {
    background: var(--surface-3);
    transform: scale(1.05);
}

.sidebar-toggle-icon {
    font-size: 18px;
    transition: transform var(--transition-base);
}

.sidebar.collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.sidebar-nav {
    padding: var(--space-lg) var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: calc(var(--space-lg) + 32px); /* Space for toggle button */
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    transition: all var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.sidebar-item:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

.sidebar-item.active {
    background: linear-gradient(135deg, var(--brand-secondary), var(--brand-accent));
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.sidebar-icon {
    font-size: 20px;
    min-width: 20px;
    text-align: center;
}

.sidebar-text {
    flex: 1;
    font-weight: 500;
    transition: opacity var(--transition-base);
}

.sidebar.collapsed .sidebar-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Main Content */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    /* Deliberately unpainted so the PAGE surface (body, --surface-1) shows
       through. This used to be --surface-0, which is the CARD surface: every
       card then sat on a backdrop of exactly its own colour, so the only thing
       separating a card from the region around it was its 1px border, and no
       amount of retuning the surface ramp could register. Leaving it
       transparent also means the region can never drift from the page colour
       when a [data-bg] palette retints the ramp.
       tests/test_ui_theme_palette.py pins this. */
    background: transparent;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: var(--navbar-height);
        height: calc(100vh - var(--navbar-height));
        transform: translateX(-100%);
        box-shadow: var(--shadow-xl);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .sidebar.collapsed {
        width: 240px;
        transform: translateX(-100%);
    }
    
    .main-content {
        width: 100%;
    }
}

/* ============================================================================
   BADGES & STATUS INDICATORS
   ============================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.375rem 0.75rem; /* More balanced padding */
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-xs);
}

.badge-success {
    background: rgba(16, 185, 129, 0.1); /* Softer backgrounds */
    color: #059669; /* Darker text for contrast */
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-error,
.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-secondary {
    background: var(--surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--surface-3);
}

/* ============================================================================
   EVENTS FEED & ACTIVITY
   ============================================================================ */
.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.event-item {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    border-left: 3px solid var(--border-color);
    transition: all var(--transition-base);
}

.event-item:hover {
    background: var(--surface-2);
    border-left-color: var(--brand-secondary);
}

.event-item.event-success {
    border-left-color: var(--success);
}

.event-item.event-error {
    border-left-color: var(--error);
}

.event-item.event-warning {
    border-left-color: var(--warning);
}

.event-item.event-info {
    border-left-color: var(--info);
}

.event-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.event-icon {
    font-size: 1.2rem;
}

.event-user {
    font-weight: 600;
    color: var(--brand-secondary);
}

.event-action {
    color: var(--text-primary);
}

.event-time {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-left: auto;
}

.event-details {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

/* ============================================================================
   STATUS LIST
   ============================================================================ */
.status-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--surface-1);
}

/* ============================================================================
   VAULT TABS
   ============================================================================ */
.vault-tab-content {
    display: none;
}

.vault-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

/* ============================================================================
   DATA TABLES
   ============================================================================ */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: var(--surface-2);
}

.data-table th {
    padding: var(--space-md);
    text-align: left;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.data-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.data-table tbody tr:hover {
    background: var(--surface-1);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* File/folder icons in tables */
.file-icon {
    font-size: 1.2rem;
    margin-right: var(--space-xs);
}

.file-name {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.file-name:hover {
    color: var(--brand-secondary);
}

.folder-name {
    color: var(--brand-secondary);
    font-weight: 500;
}

/* ============================================================================
   BREADCRUMB NAVIGATION
   ============================================================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--surface-1);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.breadcrumb-item:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.breadcrumb-item:not(:last-child)::after {
    content: '›';
    margin-left: var(--space-xs);
    color: var(--text-secondary);
}

/* ============================================================================
   DROP ZONE (Drag & Drop Upload)
   ============================================================================ */
.drop-zone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone-content {
    text-align: center;
    color: white;
    pointer-events: none;
}

.drop-zone.drag-over {
    background: rgba(59, 130, 246, 0.9);
}

/* Drag-and-drop feedback for files tab */
#files-tab.drag-over {
    background: rgba(59, 130, 246, 0.05);
    border: 2px dashed var(--primary);
    border-radius: var(--radius-lg);
    position: relative;
}

#files-tab.drag-over::after {
    content: '📤 Drop files here to upload';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--spacing-xl);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1000;
}

/* ============================================================================
   PROGRESS BARS
   ============================================================================ */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-secondary), var(--brand-accent));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.storage-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--surface-2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.storage-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--info));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* ============================================================================
   ACTION BUTTONS IN TABLES
   ============================================================================ */
.action-btn {
    padding: var(--space-xs) var(--space-sm);
    border: none;
    background: var(--surface-2);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: all var(--transition-base);
}

.action-btn:hover {
    background: var(--surface-3);
    transform: translateY(-1px);
}

.action-btn-danger {
    color: var(--error);
}

.action-btn-danger:hover {
    background: var(--error);
    color: white;
}

/* ============================================
   ROLES/GROUPS MANAGEMENT
   ============================================ */

.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.role-filter-btn {
    transition: all var(--transition-base);
}

.role-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.role-filter-btn:not(.active):hover {
    background: var(--surface-2);
}

/* Role badge colors */
.badge-admin {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: white;
}

.badge-user {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
}

.badge-external {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: white;
}

/* Loading spinner */
.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--surface-3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   LIVE MONITOR
   ============================================ */

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.monitor-events-container {
    background: var(--surface-0);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.monitor-event-item {
    transition: all var(--transition-base);
}

.monitor-event-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.event-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ============================================
   SETTINGS
   ============================================ */

.tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 2px solid var(--surface-2);
    margin-bottom: var(--spacing-lg);
    /* Keep the tab strip on ONE row and scroll horizontally when it overflows, instead of wrapping
       to several rows (which grew the strip's height and showed a vertical scrollbar). */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.tab-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-base);
    position: relative;
    bottom: -2px;
    flex-shrink: 0;        /* never squeeze a tab; the strip scrolls instead */
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--surface-1);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

details summary {
    cursor: pointer;
    user-select: none;
}

details summary:hover {
    text-decoration: underline;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 400px;
}

.toast {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid;
    min-width: 300px;
}

.toast.toast-success {
    border-left-color: var(--success);
}

.toast.toast-error {
    border-left-color: var(--error);
}

.toast.toast-warning {
    border-left-color: var(--warning);
}

.toast.toast-info {
    border-left-color: var(--info);
}

.toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.toast-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.toast-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--transition-base);
}

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

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.toast-exit {
    animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* ============================================
   IMPROVED MODALS
   ============================================ */

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--surface-2);
}

/* ============================================================================
   File preview modal + image zoom (shared by BOTH skins)
   Lives here, not in a skin file: the v2 "Console" skin defined NO .preview-*
   rule, so images rendered at intrinsic pixel size and overflowed with a
   scrollbar. The id selector (#file-preview-body) outranks either skin's
   .modal-body, so the padding/height here wins in both skins.
   ============================================================================ */
/* The preview dialog uses most of the screen (with visible padding around it) so images, PDFs and
   rendered content have room; the base .modal-content 90vh cap is lifted here to 94vh. */
.modal-content.modal-preview { max-width: min(1500px, 80vw); width: 80vw; max-height: 94vh; }

#file-preview-body {
    min-height: 220px;
    max-height: 84vh;
    overflow: hidden;                 /* fit-to-view: never a scrollbar around a preview */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    position: relative;
}
/* Images get a definite viewport height so the zoom container + object-fit can
   resolve against it; other previews (audio, "no preview") stay content-sized. */
#file-preview-body.preview-has-image { height: 84vh; }

.preview-media { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); display: block; }
.preview-frame { width: 100%; height: 80vh; border: none; border-radius: var(--radius-md); background: #fff; }
.preview-text  { width: 100%; max-height: 80vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: var(--text-sm); background: var(--surface-1); padding: var(--space-md); border-radius: var(--radius-md); color: var(--text-primary); margin: 0; }
.preview-none  { width: 100%; }

/* Render toggle: a small toolbar above the raw <pre>; the sandboxed render iframe replaces it. */
.preview-render-container { width: 100%; display: flex; flex-direction: column; gap: var(--space-sm); }
.preview-render-toolbar { display: flex; justify-content: flex-end; }
.preview-render-frame { width: 100%; height: 80vh; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.preview-render-container [hidden] { display: none; }
.preview-window-note { font-size: var(--text-xs); color: var(--text-secondary); font-style: italic; padding: 4px 2px; }

/* Live download progress tray: a small fixed panel (bottom-left, opposite the upload tray) with one
   row per active download showing the file name + a byte progress bar. */
#download-tray { position: fixed; left: 1.25rem; bottom: 1.25rem; width: 340px; max-width: calc(100vw - 2rem);
    background: var(--surface-1); border: 1px solid var(--surface-3); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); z-index: 1200; overflow: hidden; display: none; padding: 6px; }
#download-tray.show { display: block; }
.dl-row { padding: 8px 10px; }
.dl-row + .dl-row { border-top: 1px solid var(--surface-3); }
.dl-head { display: flex; align-items: center; gap: 8px; }
.dl-name { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-cancel { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 13px; line-height: 1; cursor: pointer; }
.dl-cancel:hover { background: var(--surface-3); color: var(--text-primary); }
.dl-sub { font-size: var(--text-xs); color: var(--text-secondary); margin: 2px 0 6px 0; }
.dl-bar { height: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.dl-bar-fill { height: 100%; width: 0; background: var(--accent-ok-fg, #16a34a); border-radius: 999px; transition: width 0.15s linear; }

/* Image zoom: the transform lives on the <img> inside an overflow:hidden
   container, so zooming/panning only ever affects the preview, never the page. */
.preview-zoom {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    touch-action: none;               /* pinch/drag drive zoom+pan, not page scroll */
}
.preview-zoom .preview-media {
    max-height: 100%;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
.preview-zoom.zoomed  { cursor: grab; }
.preview-zoom.panning { cursor: grabbing; }
.preview-zoom-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    padding: 2px;
    z-index: 2;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.3));
}
.preview-zoom-controls button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 16px;
    line-height: 1;
}
.preview-zoom-controls button:hover:not(:disabled) { background: var(--surface-3); }
.preview-zoom-controls button:disabled { opacity: .4; cursor: default; }
.preview-zoom-level {
    min-width: 46px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ============================================================================
   Sortable table headers + File info modal (shared by both skins)
   ============================================================================ */
.data-table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table thead th.sortable:hover { color: var(--text-primary); }
.data-table thead th.sortable:focus-visible { outline: 2px solid var(--surface-4); outline-offset: -2px; }
.sort-ind { font-size: .8em; color: var(--text-secondary); }

.file-info-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 var(--space-md) 0; }
.file-info-dl dt { color: var(--text-secondary); font-size: var(--text-sm); }
.file-info-dl dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.file-info-hash { border-top: 1px solid var(--surface-3); padding-top: var(--space-md); }
.file-info-hash-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: 6px; }
.file-info-hash-label { font-size: var(--text-sm); color: var(--text-secondary); }
.file-info-hash-value { display: block; font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all; background: var(--surface-1); padding: var(--space-sm); border-radius: var(--radius-sm); color: var(--text-primary); }

/* ============================================================================
   Rename (edit filename) modal — separate name + extension fields
   ============================================================================ */
.rename-ext-row { display: flex; align-items: center; gap: 4px; }
.rename-dot { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-base); }
/* The extension is read-only until double-clicked, so dim it to signal that. */
#rename-ext-input[readonly] { opacity: .6; cursor: default; }
.rename-ext-row .form-control { flex: 1 1 auto; min-width: 0; }
/* .alert sets display:flex, which beats the UA [hidden]{display:none}; restore hiding so the
   error bar and the extension-change warning stay gated behind their `hidden` toggles. */
#rename-error[hidden], #rename-warning[hidden] { display: none; }

/* ============================================================================
   File-row action hover cluster + right-click context menu (shared by both skins)
   Resting state shows [more][share][download]; hovering "more" slides the
   edit/copy/move/delete cluster out to the LEFT. This keeps a grid tile from
   overflowing with five-plus action icons.
   ============================================================================ */
.action-more-wrap { position: relative; display: inline-flex; align-items: center; padding: 3px; }
.action-cluster {
    position: absolute;
    right: 100%;                                   /* to the LEFT of the "more" button */
    top: 50%;
    transform: translateY(-50%) translateX(8px);   /* start nudged right -> slides left into place */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    background: var(--surface-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    z-index: 5;
    white-space: nowrap;
}
/* Bridge the gap between the cluster and the "more" button. Without it, moving the cursor from the
   button toward the revealed options crosses a strip belonging to neither element, :hover is lost,
   and the cluster hides before the cursor reaches it. The bridge is a child of the cluster (so a
   descendant of .action-more-wrap), so hovering it keeps the wrap :hover -- it inherits the cluster's
   visibility/pointer-events, so it is inert until the cluster is shown. */
.action-cluster::after {
    content: '';
    position: absolute;
    left: 100%;
    top: -4px;
    bottom: -4px;
    width: 12px;
}
.action-more-wrap:hover .action-cluster,
.action-more-wrap:focus-within .action-cluster {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}
/* Left-column tiles: open the cluster to the RIGHT of the "more" button so it is not clipped at the
   file-area's left edge (the .cluster-right class is toggled on hover from JS). */
.action-more-wrap.cluster-right .action-cluster {
    right: auto;
    left: 100%;
    transform: translateY(-50%) translateX(-8px);
}
.action-more-wrap.cluster-right .action-cluster::after {
    left: auto;
    right: 100%;
}
.action-more-wrap.cluster-right:hover .action-cluster,
.action-more-wrap.cluster-right:focus-within .action-cluster {
    transform: translateY(-50%) translateX(0);
}

.context-menu {
    position: fixed;
    min-width: 190px;
    max-width: 260px;
    max-height: calc(100vh - 12px);
    overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 2000;
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}
.context-menu-item:hover, .context-menu-item:focus-visible { background: var(--surface-2); outline: none; }
.context-menu-item.danger { color: var(--error); }
.context-menu-item .icon { flex: 0 0 auto; }

/* ============================================================================
   Copied Items staging panel (Move/Copy) — shared by both skins
   ============================================================================ */
.ci-badge-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
    border-radius: 9px; background: var(--surface-3); color: var(--text-primary);
    font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.ci-panel {
    position: fixed;
    top: 72px;
    right: 8px;
    width: min(420px, 92vw);
    max-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1500;
    overflow: hidden;
}
/* `display:flex` above ties with the UA `[hidden]{display:none}` on specificity and wins by source
   order, so a hidden panel would stay rendered -- a fixed, top-right, z-index:1500 box that intercepts
   clicks on the toolbar beneath it. This higher-specificity rule restores the hidden attribute. */
.ci-panel[hidden] { display: none; }
/* Same trap for the toolbar button: `.btn { display:inline-flex }` beats the UA `[hidden]` rule, so
   `btn.hidden = true` (set when the clip empties) would not hide it -- the button stayed visible with
   nothing staged. Restore the hidden attribute for this button. */
#copied-items-btn[hidden] { display: none; }
.ci-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--surface-3); }
.ci-title { margin: 0; font-size: var(--text-base); }
.ci-close { background: transparent; border: none; color: var(--text-secondary); font-size: 22px; line-height: 1; cursor: pointer; }
.ci-close:hover { color: var(--text-primary); }
.ci-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--surface-3); }
.ci-filter { background: transparent; border: 1px solid var(--surface-3); border-radius: var(--radius-full, 999px); padding: 2px 10px; color: var(--text-secondary); font-size: var(--text-xs); cursor: pointer; }
.ci-filter.active { background: var(--surface-3); color: var(--text-primary); }
.ci-selall { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-secondary); }
.ci-list { overflow-y: auto; flex: 1 1 auto; min-height: 40px; padding: var(--space-sm); }
.ci-empty { padding: var(--space-lg) var(--space-md); color: var(--text-secondary); font-size: var(--text-sm); text-align: center; }
.ci-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--surface-3);
    border-left: 3px solid var(--surface-3);
    border-radius: var(--radius-sm);
    background: var(--surface-0, var(--surface-1));
}
.ci-item.ci-keep   { border-left-color: var(--success, #2ea043); }   /* stays after pasting */
.ci-item.ci-remove { border-left-color: var(--warning, #d29922); }   /* leaves after pasting */
.ci-item.ci-sel { background: var(--surface-2); }
.ci-check { margin-top: 3px; }
.ci-badge { align-self: start; margin-top: 1px; padding: 1px 7px; border-radius: var(--radius-full, 999px); font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.ci-badge-copy { background: rgba(46,160,67,.18); color: var(--success, #2ea043); }
.ci-badge-move { background: rgba(210,153,34,.18); color: var(--warning, #d29922); }
.ci-item-main { min-width: 0; }
.ci-item-name { font-size: var(--text-sm); color: var(--text-primary); word-break: break-word; }
.ci-item-loc, .ci-item-meta { font-size: var(--text-xs); color: var(--text-secondary); word-break: break-word; }
.ci-actions { border-top: 1px solid var(--surface-3); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 8px; }
/* Every Copied-Items control below sets `display:flex`/`inline-flex` on its class, which beats the
   UA `[hidden]{display:none}` on specificity+source-order. Each is toggled via the `hidden` attribute
   (actions when nothing is selected, the settings row / keep button per selection), so without these
   the control would stay visible when told to hide. Restore the hidden attribute for each. */
.ci-actions[hidden], .ci-settings-row[hidden], #ci-keep[hidden] { display: none; }
.ci-action-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-settings-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ci-settings-label { font-size: var(--text-xs); color: var(--text-secondary); }
.ci-mixed-h { font-size: var(--text-sm); font-weight: 600; margin: var(--space-sm) 0 4px 0; color: var(--text-primary); }
.ci-mixed-list { margin: 0 0 var(--space-sm) 0; padding-left: 20px; max-height: 30vh; overflow-y: auto; }
.ci-mixed-list li { font-size: var(--text-sm); color: var(--text-secondary); word-break: break-word; }

/* Vault type badge (Standard vs Zero-knowledge) — shown on vault cards and the vault Info panel so
   the encryption model is visible at a glance. Shared across skins; colours ride the theme tokens. */
.vault-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: .01em;
    padding: 2px 8px; border-radius: 999px; line-height: 1.35;
    border: 1px solid transparent; width: fit-content; margin: 2px 0 4px;
}
.vault-badge .icon { width: 12px; height: 12px; flex-shrink: 0; }
.vault-badge-zk  { background: color-mix(in srgb, var(--info) 14%, transparent);          color: var(--info);            border-color: color-mix(in srgb, var(--info) 34%, transparent); }
.vault-badge-std { background: color-mix(in srgb, var(--text-tertiary) 14%, transparent); color: var(--text-secondary);  border-color: color-mix(in srgb, var(--text-tertiary) 26%, transparent); }

/* Compact Live-Monitor metric tiles — the default cards were oversized for three small counters. */
.monitor-metrics .card { padding: var(--space-md) var(--space-lg); }
.monitor-metrics .monitor-metric-icon { width: 36px; height: 36px; }
.monitor-metrics .monitor-metric-icon .icon { width: 18px; height: 18px; }
.monitor-metrics .text-2xl { font-size: 1.5rem; line-height: 1.15; }

/* Settings description/hint paragraphs fill their card width. The global p{max-width:70ch} reading
   cap otherwise renders them as a narrow left column inside a wide settings card (e.g. the link-tag
   explainer), wasting the right half of the row. */
.settings-tab-content .p-lg > p { max-width: none; }

/* Type/tag cell in the public-link and upload-link admin tables. It previously reused
   .nl-tag-idlead (display:inline-flex) directly on the <td>, which stops it being a table cell —
   the column stopped aligning and the row grew taller than its siblings. Keep the <td> a real cell
   and lay out the colour dot + icon + name inline instead. */
.nl-tag-cell { white-space: nowrap; }
.nl-tag-cell .nl-color-dot { margin-right: 6px; vertical-align: middle; }
.nl-tag-cell .icon { vertical-align: middle; margin-right: 4px; }
.nl-tag-cell > span { vertical-align: middle; }

/* Settings tag lists are capped to a few rows and scroll, so a long list doesn't push the tag editor
   that sits below it out of view. Covers share tags, note-link tags, and upload-link (receiver) tags. */
#share-tags-list, #nl-tags-list, #rt-tags-list { max-height: 260px; overflow-y: auto; }

/* Link-styled Members count in the vault Permissions department table (opens the members modal). */
.vga-members { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
.vga-members:hover { color: var(--text-primary); }

/* Upload Links -> Drop vaults tab: each link's dedicated vault as a card with a storage ring. */
.rc-vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.rc-vault-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; padding: var(--space-lg); background: var(--surface-1); }
.rc-vault-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rc-vault-name { overflow-wrap: anywhere; }
.rc-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rc-ring { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rc-ring-hole { width: 62px; height: 62px; border-radius: 50%; background: var(--surface-1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.rc-vault-actions { margin-top: auto; }

/* Disabled "hint" item in the file context menu (e.g. Public link when no Link tag permits files). */
.context-menu-item:disabled, .context-menu-item.is-hint { opacity: .5; cursor: default; }

/* Audit event modal: an 80vw dialog with a scrollable table-of-contents of the page's events on the
   left and the selected event's full detail on the right, plus the audit pagination strip. */
.audit-event-content { width: 80vw; max-width: 80vw; }
.audit-event-body { display: flex; gap: var(--space-lg); align-items: stretch; }
.audit-event-toc { flex: 0 0 300px; width: 300px; max-height: 65vh; overflow-y: auto; padding-right: var(--space-md); border-right: 1px solid var(--border-color); }
.audit-event-detail { flex: 1; min-width: 0; max-height: 65vh; overflow-y: auto; }
.audit-toc-head { padding: 2px 2px 8px; }
.audit-toc-item { display: block; width: 100%; text-align: left; background: transparent; border: none; border-left: 3px solid transparent; border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 2px; cursor: pointer; color: var(--text-secondary); }
.audit-toc-item:hover { background: var(--surface-2); }
.audit-toc-item.active { background: var(--surface-2); border-left-color: var(--brand-accent, var(--info)); color: var(--text-primary); }
.audit-toc-action { font-weight: 600; font-size: var(--text-sm); }
.audit-detail-fields { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin-bottom: var(--space-md); }
.audit-detail-key { color: var(--text-tertiary); font-size: var(--text-sm); }
.audit-detail-val { color: var(--text-primary); word-break: break-word; }
.audit-detail-json { background: var(--surface-1); padding: var(--space-md); border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-xs); white-space: pre-wrap; word-break: break-word; }
.audit-pagination { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
@media (max-width: 768px) {
    .audit-event-content { width: 96vw; max-width: 96vw; }
    .audit-event-body { flex-direction: column; }
    .audit-event-toc { flex: none; width: auto; max-height: 30vh; border-right: none; border-bottom: 1px solid var(--border-color); padding-right: 0; }
}

/* ============================================================================
   CONTINUED IN NEXT FILE...
   ============================================================================ */