/* Page-specific styles: dashboard, vaults, settings, search palette, loading overlay. */

/* ── Loading overlay ───────────────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
    backdrop-filter: blur(2px);
    z-index: var(--z-loading);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}
.loading-overlay p { color: var(--color-text-muted); }
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-surface-3);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 0ms; border-top-color: transparent; } }

/* Inline skeleton placeholders */
.skeleton {
    background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-surface-3) 50%, var(--color-surface-2) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation-duration: 0ms; } }
.skeleton-row { height: 16px; }
.skeleton-row--tile  { height: 140px; border-radius: var(--radius-card); }
.skeleton-row--md    { height: 56px; }
.skeleton-row--md + .skeleton-row--md { margin-top: 8px; }

/* ── Command palette / global search ───────────── */
.palette-scrim {
    position: fixed;
    inset: 0;
    background: var(--color-scrim);
    z-index: var(--z-dialog);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12vh;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    opacity: 0;
    animation: scrim-fade-in var(--motion-fast) var(--ease-standard) forwards;
}
.palette {
    width: 100%;
    max-width: 560px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--elev-4);
    overflow: hidden;
    transform: translateY(-12px);
    opacity: 0;
    animation: palette-pop-in var(--motion-normal) var(--ease-decelerate) forwards;
}
.palette__input-wrap {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-2);
}
.palette__input-wrap .icon { color: var(--color-text-muted); }
.palette__input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-headline);
    outline: none;
    padding: var(--space-1) 0;
}
.palette__results {
    max-height: min(60vh, 480px);
    overflow-y: auto;
}
.palette__result {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-body);
}
.palette__result:hover,
.palette__result.is-active {
    background: var(--color-surface-tint);
}
.palette__result__title { flex: 1; min-width: 0; }
.palette__result__meta  { color: var(--color-text-muted); font-size: var(--text-caption); }
.palette__hint {
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}
.palette__hint kbd {
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
@media (max-width: 860px) {
    .palette__hint { display: none; }
}
@keyframes palette-pop-in { to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .palette, .palette-scrim { animation-duration: 0ms; transform: none; opacity: 1; }
}

/* ── Dashboard ─────────────────────────────────── */
.dash-hero {
    background: linear-gradient(135deg, var(--color-primary-container), transparent 70%), var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}
.dash-hero h1 { font-size: var(--text-display); margin-bottom: var(--space-2); }
.dash-hero p  { color: var(--color-text-muted); max-width: 520px; }
.dash-hero__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }

.dash-section { margin-top: var(--space-6); }
.dash-section h2 { margin-bottom: var(--space-3); font-size: var(--text-title); }

/* Security overview tiles use .tile + .tile-grid (defined in card.css) */
.tile--good .tile__icon  { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }
.tile--warn .tile__icon  { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.tile--risk .tile__icon  { background: color-mix(in srgb, var(--color-danger) 16%, transparent);  color: var(--color-danger); }
.tile--info .tile__icon  { background: color-mix(in srgb, var(--color-info) 16%, transparent);    color: var(--color-info); }

/* ── Settings ──────────────────────────────────── */
.settings-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
.settings-section { margin-top: var(--space-3); }
.settings-section h2 {
    font-size: var(--text-headline);
    margin-bottom: var(--space-1);
}
.settings-section__hint {
    color: var(--color-text-muted);
    font-size: var(--text-body);
    margin-bottom: var(--space-4);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row__label {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
}
.settings-row__hint {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
}

.accent-swatch-group {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.accent-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
    background: transparent;
}
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.is-active { border-color: var(--color-text); transform: scale(1.06); }
.accent-swatch--emerald { background: #00a86b; }
.accent-swatch--blue    { background: #2978f0; }
.accent-swatch--purple  { background: #7b5cff; }
.accent-swatch--orange  { background: #f3801e; }

/* ── Vault detail / entry composer ─────────────── */
.composer {
    background: var(--color-surface-tint);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.composer h3 { margin-bottom: var(--space-3); font-size: var(--text-headline); }

.generator-panel {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-3);
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.generator-panel__output {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-input);
    font-family: var(--font-mono);
    word-break: break-all;
    min-height: 38px;
}
.generator-panel__output-text { flex: 1; }

.generator-panel__row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}
.generator-panel__length {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    flex: 1;
}
.generator-panel__length input { flex: 1; }
.generator-panel__options {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Organisations ─────────────────────────────── */
.org-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}
.org-card + .org-card { margin-top: var(--space-3); }
.org-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.org-card__title { font-size: var(--text-headline); font-weight: var(--weight-semibold); }
.org-card__description { color: var(--color-text-muted); font-size: var(--text-body); margin: var(--space-2) 0 var(--space-3); }
.org-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.org-card__panel {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.org-member-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.org-member-row:last-child { border-bottom: 0; }
.org-member-row__email { flex: 1; min-width: 180px; font-size: var(--text-body); }
.org-member-row__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.org-member-row__actions select {
    width: auto;
    height: 36px;
    padding: 0 var(--space-2);
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font: inherit;
    font-size: var(--text-caption);
}

/* ── Footer ────────────────────────────────────── */
.app-footer {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-caption);
    text-align: center;
}