/* ════════════════════════════════════════════════════════════════════════════ */
/* ── vault.css — Encrypted Vault destination (Sulata Note v1.2.4) ─────────── */
/* ════════════════════════════════════════════════════════════════════════════ */
/* Vault styling is isolated in its own stylesheet so the existing token,      */
/* base, layout, component and modal files take only surgical edits. Every     */
/* value references an existing design token: no raw colours are introduced.   */

/* ── Panel structure — bounded, pinned header and search, scrolling list ──── */
#panel-vault {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.vault-screen {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 16px 20px;
	gap: 4px;
}

.vault-screen.hidden { display: none !important; }

#vault-unlocked {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

#vault-unlocked.hidden { display: none !important; }

#vault-notes-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 10px 12px;
}

/* ── Header controls ─────────────────────────────────────────────────────────*/
.vault-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

#vault-menu-btn {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	min-width: 36px;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	flex-shrink: 0;
}
#vault-menu-btn:hover { background: var(--accent-soft); color: var(--text-primary); border-color: var(--accent); }
#vault-menu-btn.hidden { display: none !important; }

/* ── Read-only banner — text and icon, never colour alone ─────────────────── */
.vault-readonly-banner {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 14px 10px;
	padding: 11px 13px;
	border: 1.5px solid var(--warning);
	border-radius: var(--radius-sm);
	background: var(--warning-soft);
	color: var(--text-primary);
	font-size: 0.8rem;
	line-height: 1.55;
	flex-shrink: 0;
}
.vault-readonly-banner.hidden { display: none !important; }
.vault-readonly-icon { flex-shrink: 0; font-weight: 800; }

/* ── Setup and locked screens ─────────────────────────────────────────────── */
.vault-intro-title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.2px;
	margin: 10px 0 6px;
}

.vault-intro-body {
	font-size: 0.84rem;
	color: var(--text-secondary);
	line-height: 1.7;
	margin-bottom: 12px;
}

.vault-note-text {
	font-size: 0.78rem;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 10px 0;
}

.vault-field-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 10px 0 5px;
}

.vault-password-input {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 0.95rem;
	font-family: var(--font);
	background: var(--bg);
	color: var(--text-primary);
	outline: none;
	transition: var(--transition);
}
.vault-password-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.vault-ack-row {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 12px 0 4px;
	font-size: 0.8rem;
	color: var(--text-primary);
	line-height: 1.55;
}
.vault-ack-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--accent);
}

.vault-secondary-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

.vault-link-btn {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: var(--font);
	font-size: 0.84rem;
	font-weight: 600;
	padding: 10px 12px;
	cursor: pointer;
	transition: var(--transition);
	min-height: 44px;
	text-align: left;
}
.vault-link-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ── Vault list rows ─────────────────────────────────────────────────────── */
.vault-note-item .note-item-folder {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.6rem;
	opacity: 0.75;
}

.vault-pin-dot {
	color: var(--accent-hover);
	font-size: 1.1rem;
	line-height: 1;
	flex-shrink: 0;
}
html.night-mode .vault-pin-dot { color: var(--accent); }

/* ── Vault transfer modal ────────────────────────────────────────────────── */
#vault-qr-modal .modal-body { max-height: 75vh; overflow-y: auto; }

#vault-copy-link-status { text-align: center; }
#vault-copy-link-status:empty { display: none; }

/* ── Mobile refinements ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.vault-screen { padding: 4px 12px 24px; }
	.vault-readonly-banner { margin: 0 10px 10px; }
	.vault-link-btn { min-height: 46px; }
}

/* ── Landscape phones ───────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
	.vault-screen { padding-top: 2px; }
	.vault-intro-title { margin-top: 4px; }
}