/*
 * Bishop Vault design system. Colours, type and sizes come from brand.css only.
 *
 * Sections:  1 Bridge  2 Base  3 Shell  4 Page  5 Buttons  6 Forms  7 Select / Date  8 Menus & overlays
 *            9 Toasts  10 Data (table, badges)  11 Screens (credentials, vaults, activity, settings, auth)
 *            12 Pagination & empty states  13 Responsive
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

/* ============================ 1. Bootstrap bridge ============================ */
/* Bootstrap is only the foundation: every stock component reads the Bishop tokens. */
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--bg-page);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-strong);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--bg-surface);
    --bs-tertiary-bg: var(--bg-surface);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--radius-lg);
    --bs-primary: var(--bishop-gold);
    --bs-primary-rgb: var(--bishop-gold-rgb);
    --bs-link-color: var(--text-primary);
    --bs-link-color-rgb: 238, 242, 247;
    --bs-link-hover-color: var(--text-strong);
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);
    --bs-warning: var(--warning);
    --bs-warning-rgb: var(--warning-rgb);
    --bs-info: var(--info);
    --bs-info-rgb: var(--info-rgb);
    --bs-heading-color: var(--text-strong);
    --bs-focus-ring-color: rgba(var(--bishop-gold-rgb), .22);
}

/* ============================ 2. Base ============================ */
html { color-scheme: dark; }
body {
    background: var(--bg-page-gradient) fixed, var(--bg-page);
    min-height: 100vh;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.003em;
}
a { text-decoration: none; transition: color var(--ease); }
a:not([class]):hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
::selection { background: rgba(var(--bishop-gold-rgb), .3); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; font-weight: 650; }
code, pre, .font-monospace { font-family: var(--font-mono) !important; }
hr { border-color: var(--border); opacity: 1; }
small, .small { font-size: var(--fs-small); }
.text-body-secondary { color: var(--text-muted) !important; }
.text-muted-2 { color: var(--text-secondary); }
img, svg { max-width: 100%; }

/* Focus: one consistent, subtle gold ring for every interactive element */
:focus { outline: 0; }
:focus-visible { outline: 2px solid rgba(var(--bishop-gold-rgb), .75); outline-offset: 2px; border-radius: var(--radius-sm); }
.form-control:focus-visible, .form-select:focus-visible, .btn:focus-visible { outline: 0; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); background-clip: content-box; }

/* ============================ 3. Shell ============================ */
.app-shell { min-height: 100vh; }

.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 1030;
    display: flex; flex-direction: column; padding: 20px 14px 14px;
    background: var(--bg-sidebar); border-right: 1px solid var(--border);
}
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 24px var(--page-x) 48px; flex: 1; }

/* Brand lockup: mark | BISHOP over VAULT. One designed unit, not three pieces. */
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--text-strong); }
.brand-lockup__mark { height: 34px; width: auto; flex: none; display: block; }
.brand-lockup__text { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.brand-lockup__name { font-size: 1.1875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brand-lockup__product { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
/* Official logo + small gold product label ("VAULT"). The image is shown exactly as supplied: no recolour, crop or stretch. */
.brand-official { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.bishop-brand-logo { display: block; width: var(--logo-w, 160px); max-width: 100%; height: auto; object-fit: contain; } /* width/height attributes reserve the space; the logo is never stretched or cropped */
.brand-official__product { padding-left: 1px; font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bishop-gold); opacity: .9; line-height: 1; }
.brand-link { display: inline-flex; border-radius: var(--radius-sm); }
.brand-link:hover .brand-lockup__name { color: var(--text-strong); }
.sidebar .brand-link { height: auto; min-height: var(--logo-area-height); align-items: center; padding: 18px 12px 14px; margin-bottom: 14px; }
.sidebar .bishop-brand-logo { --logo-w: 124px; }
.sidebar .brand-official { gap: 6px; }

/* Sidebar navigation */
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link {
    position: relative; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px;
    border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--fs-nav); font-weight: 500;
    transition: background var(--ease), color var(--ease);
}
.side-link i { font-size: 1.25rem; width: 20px; height: 20px; line-height: 20px; text-align: center; flex: none; transition: color var(--ease); }
.side-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.side-link.active { background: var(--bishop-gold-tint); color: var(--text-strong); font-weight: 600; }
.side-link.active i { color: var(--bishop-gold); }

.side-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.user-chip {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; color: var(--text-primary);
    background: transparent; border: 0; border-radius: var(--radius-md); transition: background var(--ease);
}
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--bg-hover); }
.user-chip .who { min-width: 0; line-height: 1.25; }
.user-chip .who b { display: block; font-weight: 600; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .who small { color: var(--text-muted); font-size: var(--fs-tiny); }
.user-chip > .bi { margin-left: auto; font-size: .9rem; color: var(--text-muted); transition: color var(--ease); }
.user-chip:hover > .bi { color: var(--text-secondary); }
.avatar {
    width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--bg-hover); border: 1px solid var(--border-strong); color: var(--text-secondary); font-weight: 700; font-size: var(--fs-tiny);
}
.avatar-sm { width: 28px; height: 28px; font-size: .6875rem; }

/* Top bar: global search is the most important control in a vault */
.topbar {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; min-height: var(--topbar-height);
    padding: 12px var(--page-x); background: rgba(8, 17, 31, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.topbar .brand-link { display: none; }
.topbar__search { flex: 1; max-width: 640px; }
.topbar .topbar__user { display: none; margin-left: auto; }

/* Bottom navigation (phones and tablets) */
.bottom-nav { display: none; }

/* ============================ 4. Page structure ============================ */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header__text { flex: 1 1 260px; min-width: 0; }
.page-header__title { font-size: var(--fs-title); font-weight: 700; line-height: 1.15; margin: 0; color: var(--text-strong); display: flex; align-items: center; gap: 12px; }
.page-header__subtitle { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-body); }
.page-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--text-muted); }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text-strong); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.breadcrumbs [aria-current] { color: var(--text-secondary); }

.section-title { font-size: var(--fs-tiny); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }

/* Panel: a quiet container, not a heavy card */
.panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel--compact { max-width: 640px; }
.panel-pad { padding: 24px; }
.min-w-0 { min-width: 0; }
.meta-list { margin: 0; display: grid; gap: 4px; }
.meta-list dt { font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; }
.meta-list dt:first-child { margin-top: 0; }
.meta-list dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: var(--fs-section); font-weight: 650; margin: 0; }

/* ============================ 5. Buttons ============================ */
.btn {
    --bs-btn-padding-x: 16px; --bs-btn-padding-y: 0; --bs-btn-font-size: var(--fs-body); --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-md); --bs-btn-border-width: 1px;
    height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn i { font-size: 1rem; line-height: 1; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn-sm { --bs-btn-padding-x: 12px; --bs-btn-font-size: var(--fs-small); --bs-btn-border-radius: var(--radius-sm); height: var(--control-height-sm); gap: 6px; }
.btn-lg { height: 46px; }

/* Primary: gold + dark text */
.btn-primary {
    --bs-btn-color: var(--bishop-on-gold); --bs-btn-bg: var(--bishop-gold); --bs-btn-border-color: var(--bishop-gold);
    --bs-btn-hover-color: var(--bishop-on-gold); --bs-btn-hover-bg: var(--bishop-gold-hover); --bs-btn-hover-border-color: var(--bishop-gold-hover);
    --bs-btn-active-color: var(--bishop-on-gold); --bs-btn-active-bg: var(--bishop-gold-hover); --bs-btn-active-border-color: var(--bishop-gold-hover);
    --bs-btn-disabled-color: var(--bishop-on-gold); --bs-btn-disabled-bg: var(--bishop-gold); --bs-btn-disabled-border-color: var(--bishop-gold);
    --bs-btn-disabled-opacity: .6; font-weight: 650;
}
/* Secondary: dark surface + border (Cancel, Filters, Back). Bootstrap's outline-secondary is mapped to it. */
.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--text-primary); --bs-btn-bg: var(--bg-surface); --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text-strong); --bs-btn-hover-bg: color-mix(in srgb, var(--bg-surface), white 7%); --bs-btn-hover-border-color: rgba(255, 255, 255, .26);
    --bs-btn-active-color: var(--text-strong); --bs-btn-active-bg: color-mix(in srgb, var(--bg-surface), white 11%); --bs-btn-active-border-color: rgba(255, 255, 255, .3);
    --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-bg: var(--bg-surface); --bs-btn-disabled-border-color: var(--border);
}
/* Danger: subtle red */
.btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-bg: rgba(var(--danger-rgb), .08); --bs-btn-border-color: rgba(var(--danger-rgb), .32);
    --bs-btn-hover-color: var(--text-strong); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: var(--text-strong); --bs-btn-active-bg: var(--danger-hover); --bs-btn-active-border-color: var(--danger-hover);
    --bs-btn-disabled-color: var(--danger); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(var(--danger-rgb), .3);
}
/* Ghost: transparent (Back, menu-like actions) */
.btn-ghost, .btn-link {
    --bs-btn-color: var(--text-secondary); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--text-strong); --bs-btn-hover-bg: var(--bg-hover); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--text-strong); --bs-btn-active-bg: rgba(255, 255, 255, .06); --bs-btn-active-border-color: transparent;
    text-decoration: none;
}
/* "+ New …" button: one component everywhere; collapses to a square + on phones */
.btn-new { padding: 0 14px; }
.btn-new i { font-size: 1rem; }
/* Icon button */
.btn-icon {
    width: var(--icon-btn); height: var(--icon-btn); padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 1.0625rem;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn-icon:hover, .btn-icon[aria-expanded="true"] { background: rgba(255, 255, 255, .07); color: var(--text-strong); }
.btn-icon:focus-visible { box-shadow: var(--focus-ring); outline: 0; }
.btn-icon.is-bordered { border-color: var(--border); }
.btn-icon.is-lg { width: 40px; height: 40px; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: .55; transition: opacity var(--ease); }
.btn-close:hover { opacity: .95; }
.btn.is-loading { pointer-events: none; }
.spinner-border-sm { --bs-spinner-width: 14px; --bs-spinner-height: 14px; --bs-spinner-border-width: 2px; }

/* ============================ 6. Forms ============================ */
.form-label { font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-control, .form-select {
    height: var(--control-height); padding: 0 12px; font-size: var(--fs-body); color: var(--text-primary);
    background-color: var(--bg-page); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease);
}
textarea.form-control { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.form-control::placeholder { color: rgba(141, 154, 171, .65); }
.form-control:hover:not(:disabled):not(:focus) { border-color: rgba(255, 255, 255, .24); }
.form-control:focus, .form-select:focus {
    color: var(--text-strong); background-color: var(--bg-page); border-color: rgba(var(--bishop-gold-rgb), .6); box-shadow: var(--focus-ring);
}
.form-control:disabled, .form-control[readonly]:not(.flatpickr-input), .form-select:disabled { background-color: var(--bg-surface); color: var(--text-muted); opacity: 1; }
.form-control-sm, .form-select-sm { height: var(--control-height-sm); padding: 0 10px; font-size: var(--fs-small); border-radius: var(--radius-sm); }
.form-text { color: var(--text-muted); font-size: var(--fs-tiny); margin-top: 6px; }
.field { margin-bottom: 0; }

/* Validation: subtle red border + short message. No tinted backgrounds, no icons. */
.form-control.is-invalid, .form-select.is-invalid { border-color: rgba(var(--danger-rgb), .7); background-image: none; padding-right: 12px; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .18); }
.invalid-feedback { color: var(--danger); font-size: var(--fs-tiny); margin-top: 6px; }
.invalid-feedback.d-block { display: block; }

/* File input: same height and look as every other control */
.form-control[type="file"] { padding: 0 12px 0 0; line-height: calc(var(--control-height) - 2px); cursor: pointer; }
.form-control[type="file"]::file-selector-button {
    height: calc(var(--control-height) - 2px); margin: 0 12px 0 0; padding: 0 16px; font: inherit; font-weight: 600; color: var(--text-primary);
    background: var(--bg-hover); border: 0; border-right: 1px solid var(--border-strong); cursor: pointer; transition: background var(--ease);
}
.form-control[type="file"]:hover::file-selector-button { background: color-mix(in srgb, var(--bg-surface), white 9%); }

/* Checkboxes, radios, switches */
.form-check { min-height: 22px; margin-bottom: 8px; padding-left: 28px; }
.form-check .form-check-input { margin-left: -28px; }
.form-check-input { width: 18px; height: 18px; margin-top: 2px; margin-left: -28px; background-color: var(--bg-page); border: 1px solid var(--border-strong); transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease); }
.form-check-input[type="checkbox"] { border-radius: 5px; }
.form-check-input:hover:not(:disabled) { border-color: rgba(255, 255, 255, .3); }
.form-check-input:focus { border-color: rgba(var(--bishop-gold-rgb), .6); box-shadow: var(--focus-ring); }
.form-check-input:checked { background-color: var(--bishop-gold); border-color: var(--bishop-gold); }
.form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a1400' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231a1400'/%3e%3c/svg%3e"); }
.form-check-input:disabled { opacity: .45; }
.form-check-label { color: var(--text-primary); font-size: var(--fs-body); cursor: pointer; }
.form-switch { padding-left: 48px; }
.form-switch .form-check .form-check-input, .form-switch .form-check-input { width: 36px; height: 20px; margin-left: -48px; border-radius: 20px; background-color: var(--bg-surface); --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238d9aab'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--bishop-gold); --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a1400'/%3e%3c/svg%3e"); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .form-check { margin: 0; }

/* Input groups (password + eye) */
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn { height: var(--control-height); border-color: var(--border-strong); }
.input-group.has-validation > .btn { margin-left: -1px; }

/* Search field: icon inside, clear button when it has a value */
.search-field { position: relative; width: 100%; }
.search-field > i.bi-search { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .95rem; pointer-events: none; }
.search-field > input {
    width: 100%; height: var(--control-height); padding: 0 38px 0 38px; font-size: var(--fs-body); color: var(--text-primary);
    background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: var(--radius-md); appearance: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.search-field > input::placeholder { color: rgba(141, 154, 171, .85); }
.search-field > input::-webkit-search-cancel-button { display: none; }
.search-field > input:hover:not(:focus) { border-color: rgba(255, 255, 255, .24); }
.search-field > input:focus { outline: 0; border-color: rgba(var(--bishop-gold-rgb), .6); box-shadow: var(--focus-ring); }
.search-field__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; }
.search-field.has-value .search-field__clear { display: inline-flex; }
.search-field.is-sm > input { height: var(--control-height-sm); font-size: var(--fs-small); }

/* Read-only "locked" field (vault on the credential form) */
.field-locked { display: flex; align-items: center; gap: 8px; height: var(--control-height); padding: 0 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--bg-surface); }
.field-locked i { color: var(--text-muted); }

/* Form layout */
.form-card { max-width: 860px; }
.form-card.is-narrow { max-width: 640px; }
.form-section + .form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.form-section__title { font-size: var(--fs-section); font-weight: 650; margin: 0 0 4px; }
.form-section__hint { color: var(--text-muted); font-size: var(--fs-small); margin: 0 0 16px; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Credential form: one surface, fast to fill, Advanced Options collapsed */
.cred-icon { background: var(--bg-surface); border: 1px solid var(--border-strong); border-right: 0; color: var(--text-secondary); border-radius: var(--radius-md) 0 0 var(--radius-md); min-width: var(--control-height); justify-content: center; }
.cred-icon + .form-control { border-left: 0; }
.cred-warning { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: var(--fs-small); color: var(--text-secondary); }
.cred-warning i { color: var(--warning); margin-top: 2px; }
.cred-warning a, .cred-suggest__btn { color: var(--bishop-gold); }
.cred-suggest { margin-top: 6px; }
.cred-suggest__btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.cred-suggest__btn:hover, .cred-warning a:hover { text-decoration: underline; }
.pw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-row > .input-group { flex: 1 1 260px; width: auto; }
.pw-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.pw-actions .btn { height: var(--control-height); white-space: nowrap; }
.pw-strength { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-tiny); font-weight: 600; }
.pw-strength i { width: 28px; height: 4px; border-radius: 4px; background: var(--border-strong); }
.pw-strength.is-weak { color: var(--danger); } .pw-strength.is-weak i { background: var(--danger); }
.pw-strength.is-good { color: var(--warning); } .pw-strength.is-good i { background: var(--warning); }
.pw-strength.is-strong { color: var(--success); } .pw-strength.is-strong i { background: var(--success); }
.cred-advanced { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.cred-advanced__toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; color: var(--text-primary); font-size: var(--fs-body); font-weight: 600; text-align: left; }
.cred-advanced__toggle i { color: var(--text-muted); transition: transform var(--ease); }
.cred-advanced__toggle:not(.collapsed) i { transform: rotate(90deg); }
.cred-advanced__toggle:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.toast-item a { color: var(--bishop-gold); font-weight: 600; margin-left: auto; white-space: nowrap; }

/* Credentials workspace: vault / folder tree on the left, credentials on the right */
.cred-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.vault-panel { display: none; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
@media (min-width: 1360px) {
    .cred-workspace { grid-template-columns: 270px minmax(0, 1fr); }
    .vault-panel { display: block; }
}

/* Shared modal (create / edit forms) */
.modal-dialog.modal-560 { --bs-modal-width: 560px; }
.modal-content > .modal-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; position: relative; }
.modal-form .modal-body { overflow-y: auto; padding: 20px 24px; }
.modal-form .modal-header { padding: 16px 24px; }
.modal-form .modal-footer { padding: 14px 24px; gap: 8px; }
.modal-dialog-scrollable .modal-content { overflow: hidden; }
.modal-discard { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(4, 9, 17, .78); border-radius: inherit; }
.modal-discard.d-none { display: none; }
.modal-discard__box { width: min(360px, 100%); padding: 20px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal-discard__box h3 { font-size: var(--fs-section); font-weight: 650; margin: 0 0 6px; color: var(--text-strong); }
.modal-discard__box p { color: var(--text-secondary); font-size: var(--fs-body); margin: 0 0 16px; }
.inline-confirm { padding: 10px 12px; font-size: var(--fs-small); color: var(--text-secondary); background: rgba(var(--danger-rgb), .08); border: 1px solid rgba(var(--danger-rgb), .3); border-radius: var(--radius-md); }
.inline-confirm p { margin: 0 0 8px; }
@media (max-width: 767.98px) {
    .modal-form .modal-body { padding: 16px; }
    .modal-form .modal-header, .modal-form .modal-footer { padding: 12px 16px; }
    .modal-form .modal-footer { position: sticky; bottom: 0; background: var(--bg-surface); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .modal-form .modal-footer .btn { flex: 1; }
    .modal-form .form-control, .modal-form .btn, .modal-form .ts-control { min-height: 44px; }
    .modal-form .input-group > .btn, .modal-form .pw-actions .btn { height: 44px; }
    .modal-form .pw-row > .input-group { flex-basis: 100%; }
    .modal-form .pw-actions { flex: 1 1 100%; }
    .modal-form .pw-actions .btn:first-child { flex: 1 1 auto; }
}

.modal-section + .modal-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.modal-section__title { font-size: var(--fs-body); font-weight: 650; margin: 0 0 2px; color: var(--text-strong); }
.modal-section__hint { color: var(--text-muted); font-size: var(--fs-small); margin: 0 0 12px; }

/* Vault / folder tree (Vault -> Folder only) */
.ftree { display: grid; gap: 2px; padding: 10px; }
.ftree__item, .ftree__link { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; color: var(--text-secondary); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--fs-body); font-weight: 550; transition: background var(--ease), color var(--ease); min-width: 0; }
.ftree__item:hover, .ftree__link:hover { background: var(--bg-hover); color: var(--text-strong); }
.ftree__item.is-active, .ftree__link.is-active { background: var(--bishop-gold-tint); border-color: rgba(var(--bishop-gold-rgb), .35); color: var(--text-strong); }
.ftree__item.is-active > i:first-child, .ftree__link.is-active > i:first-child { color: var(--bishop-gold); }
.ftree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftree__count { font-size: var(--fs-tiny); color: var(--text-muted); font-weight: 600; }
.ftree__label { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 4px 0 10px; min-height: 32px; font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ftree__row { display: flex; align-items: center; gap: 2px; }
.ftree__row > .ftree__link { flex: 1; }
.ftree__row.depth-1 { padding-left: 14px; }
.ftree__row.depth-2 { padding-left: 28px; }
.ftree__row.depth-3 { padding-left: 42px; }
.ftree__row.depth-4 { padding-left: 56px; }
.ftree__toggle { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--text-muted); font-size: .7rem; }
.ftree__toggle:hover { color: var(--text-strong); background: var(--bg-hover); }
.ftree__toggle i { transition: transform var(--ease); }
.ftree__vault.is-open > .ftree__row > .ftree__toggle i { transform: rotate(90deg); }
.ftree__children { display: none; margin: 2px 0 6px 20px; padding-left: 8px; border-left: 1px solid var(--border); }
.ftree__vault.is-open > .ftree__children { display: grid; gap: 1px; }
.ftree__link.is-folder { min-height: 34px; font-weight: 500; font-size: var(--fs-small); }
.ftree__link.is-folder > i { color: var(--text-muted); }
.ftree__link.is-muted { color: var(--text-muted); }
.ftree__acts { display: flex; align-items: center; flex: none; opacity: 0; transition: opacity var(--ease); }
.ftree__acts .btn-icon { width: 28px; height: 28px; }
.ftree__row:hover > .ftree__acts, .ftree__acts:focus-within, .ftree__acts:has([aria-expanded="true"]) { opacity: 1; }
@media (hover: none) { .ftree__acts { opacity: 1; } .ftree__quick { display: none; } }
.ftree__add { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; background: none; border: 0; color: var(--text-muted); font-size: var(--fs-small); border-radius: var(--radius-md); text-align: left; }
.ftree__add:hover { color: var(--bishop-gold); background: var(--bg-hover); }
.vault-icon.is-xs { width: 26px; height: 26px; font-size: .8rem; border-radius: 8px; }
.toolbar__browse { display: none; }
.loc-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loc-folder { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; }
.loc-folder i { color: var(--text-muted); }
.cred-table .data-table td, .cred-table .data-table th { padding-left: 10px; padding-right: 10px; }
.cred-table .data-table th:first-child, .cred-table .data-table td:first-child { padding-left: 14px; }
.cred-table .data-table th:last-child, .cred-table .data-table td:last-child { padding-right: 14px; }
/* Column priority: Service and Username keep the room (percent widths + max-width:0 give clean ellipsis, full value in the title),
   then Location, Type, Updated. Less important columns drop out first as space gets tight. */
.cred-table .data-table { width: 100%; }
.cred-table th.col-service, .cred-table td.col-service { width: 34%; max-width: 0; }
.cred-table th.col-user, .cred-table td.col-user { width: 30%; max-width: 0; }
.cred-table .cell-main__text { min-width: 0; }
.cred-table .cell-main__title, .cred-table .cell-main__sub { max-width: 100%; }
.cred-table .copy-inline { display: flex; min-width: 0; }
.cred-table .copy-inline > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-table .loc-folder__name { overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
@media (min-width: 1360px) and (max-width: 1599.98px) { .cred-table .col-type { display: none; } }
@media (max-width: 1199.98px) { .cred-table .col-type, .cred-table .col-updated { display: none; } }
@media (min-width: 1200px) and (max-width: 1799.98px) { body.panel-open .cred-table .col-type, body.panel-open .cred-table .col-updated { display: none; } }
@media (min-width: 1200px) and (max-width: 1499.98px) { body.panel-open .cred-table .col-loc { display: none; } }

.loc-cell { flex-direction: column; align-items: flex-start; gap: 2px; }
.cred-table .data-table td { padding-top: 8px; padding-bottom: 8px; }
.cred-table .badge-tint { height: 22px; }
body.panel-open .toolbar__filters .form-select, body.panel-open .toolbar__filters .ts-wrapper { width: 128px; }
body.panel-open .toolbar__search { flex-basis: 200px; }
.toolbar__browse { order: -1; }
@media (min-width: 1600px) { .kind-chip { padding: 2px 9px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-tiny); font-weight: 600; } }
@media (max-width: 1599.98px) { .kind-chip span { display: none; } .kind-chip { font-size: 1rem; } }
.cred-card__meta { color: var(--text-muted); white-space: nowrap; }
.kind-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; }
.kind-chip i { color: var(--text-muted); }
.cred-card__loc { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tooltip { pointer-events: none; }
.btn-icon.is-loading { opacity: .5; pointer-events: none; cursor: progress; }
.search-field.is-loading > .search-field__clear { display: none; }
.search-field.is-loading::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--border-strong); border-top-color: var(--bishop-gold); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fav-btn { color: var(--text-muted); }
.fav-btn:hover { color: var(--bishop-gold); }
.fav-btn.is-fav, .fav-btn.is-fav i { color: var(--bishop-gold); }
tr[data-panel-url], .cred-card[data-panel-url] { cursor: pointer; }
tr.is-selected > td { background: var(--bishop-gold-tint) !important; }
.cred-card.is-selected { border-color: rgba(var(--bishop-gold-rgb), .45); background: var(--bishop-gold-tint); }

/* Detail side panel: right drawer on desktop, full screen on phones */
.detail-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1045; width: min(460px, 100vw); display: flex; flex-direction: column; background: var(--bg-sidebar); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); animation: panel-in 180ms ease-out; }
.detail-panel[hidden] { display: none; }
.detail-panel.is-loading { opacity: .6; }
@keyframes panel-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); background: var(--bg-sidebar); }
.detail-head__text { min-width: 0; flex: 1; }
.detail-head__text h2 { margin: 0; font-size: 1.125rem; font-weight: 650; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-head__sub { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); min-width: 0; white-space: nowrap; }
.detail-head__sub > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.detail-back { display: none; }
.detail-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.detail-actions .dropdown { display: inline-block; }
.detail-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-6); }
.detail-section { padding: var(--space-3) 0 var(--space-2); }
.detail-section + .detail-section { border-top: 1px solid var(--border); }
.detail-section__title { margin: 0; padding: var(--space-1) var(--space-5) 0; font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.detail-panel .kv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-2) var(--space-5); min-height: 0; align-items: center; border-bottom: 0; }
.detail-panel .kv-label { grid-column: 1 / -1; width: auto; padding: 0; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.detail-panel .kv-value { padding: 0; font-size: var(--fs-body); color: var(--text-strong); }
.detail-panel .kv-actions { grid-column: 2; grid-row: 2; }
.detail-panel .note { margin: var(--space-4) var(--space-5) 0; }
.loc-value { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.detail-foot { padding: var(--space-3) var(--space-5) 0; font-size: var(--fs-small); color: var(--text-muted); border-top: 1px solid var(--border); }
.detail-page .detail-foot { padding: var(--space-4) var(--space-5); }
.detail-page .detail-section__title { padding-top: var(--space-3); }
.detail-history { margin-top: 12px; border-top: 1px solid var(--border); }
.detail-history__title { margin: 0; padding: 14px 20px 4px; font-size: var(--fs-body); font-weight: 650; color: var(--text-strong); }
.detail-page .kv-row { padding: 14px 20px; }
.detail-page .kv-actions { align-items: center; }
.kv-actions .btn-icon { width: 34px; height: 34px; }
@media (min-width: 1200px) {
    body.panel-open .app-main { padding-right: min(460px, 100vw); transition: padding var(--ease); }
}
@media (min-width: 1200px) and (max-width: 1799.98px) {
    body.panel-open .vault-panel { display: none; }
    body.panel-open .toolbar__browse { display: inline-flex; }
    body.panel-open .cred-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1359.98px) {
    .toolbar__browse { display: inline-flex; }
}
@media (max-width: 767.98px) {
    .detail-panel { width: 100vw; animation: none; }
    .detail-head { flex-wrap: wrap; padding: var(--space-3) var(--space-4); row-gap: var(--space-3); }
    .detail-back { display: inline-grid; }
    .detail-close { display: none; }
    .detail-actions { flex: 1 1 100%; gap: var(--space-2); }
    .detail-actions .btn-icon { width: 44px; height: 44px; }
    .detail-section__title { padding-left: var(--space-4); padding-right: var(--space-4); }
    .detail-panel .kv-row { padding: var(--space-3) var(--space-4); }
    .detail-foot, .detail-panel .note { padding-left: var(--space-4); padding-right: var(--space-4); margin-left: 0; margin-right: 0; }
    .kv-actions .btn-icon { width: 44px; height: 44px; }
}

/* In-page navigation (pjax.js): thin progress bar + a soft fade of the content */
.nav-progress { position: fixed; top: 0; left: 0; z-index: 3000; height: 2px; width: 0; background: var(--bishop-gold); opacity: 0; pointer-events: none; }
.nav-progress.is-active { opacity: 1; }
.nav-progress.is-running { width: 78%; transition: width 6s cubic-bezier(.1, .7, .2, 1); }
.nav-progress.is-done { width: 100%; opacity: 0; transition: width 120ms ease-out, opacity 220ms ease .12s; }
.app-main.is-navigating { opacity: .72; transition: opacity 120ms ease; pointer-events: none; }
.app-main.is-entering { animation: page-in 180ms ease-out; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Mobile touch comfort: 16px inputs (iOS does not zoom into them) and ~44px touch targets */
.detail-panel:focus { outline: 0; }
@media (max-width: 991.98px) {
    .form-control, .form-select, textarea.form-control, .ts-control, .ts-control > input, .ts-wrapper .ts-control input, .search-field > input, .flatpickr-input { font-size: 16px; }
    .btn-icon { min-width: 44px; min-height: 44px; }
    .ftree__item, .ftree__link, .ftree__add { min-height: 44px; }
    .ftree__toggle { width: 36px; height: 36px; }
    .ftree__acts .btn-icon { width: 44px; height: 44px; }
    .dropdown-item { min-height: 44px; display: flex; align-items: center; gap: 8px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
}

/* ============================ 7. Select (Tom Select) & Date (Flatpickr) ============================ */
.ts-wrapper { width: 100%; }
.ts-wrapper.form-select, .ts-wrapper.form-control { height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.ts-control, .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
    min-height: var(--control-height); padding: 0 12px; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--text-primary);
    background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ts-wrapper.multi .ts-control { padding: 5px 8px; min-height: var(--control-height); }
.ts-wrapper:not(.focus):not(.disabled) .ts-control:hover { border-color: rgba(255, 255, 255, .24); }
.ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control, .ts-wrapper.input-active .ts-control,
.ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.dropdown-active .ts-control, .ts-wrapper.full .ts-control, .ts-wrapper.single.full .ts-control {
    background: var(--bg-page); background-color: var(--bg-page); color: var(--text-primary);
}
.ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control, .ts-wrapper.input-active .ts-control { border-color: rgba(var(--bishop-gold-rgb), .6); box-shadow: var(--focus-ring); }
.ts-wrapper .ts-control > input, .ts-wrapper.single.input-active .ts-control > input { color: var(--text-primary) !important; }
.ts-wrapper.single .ts-control { padding-right: 34px; flex-wrap: nowrap; position: relative; }
/* Single selects: the typing input must never take a line of its own (it pushed the selected text up when focused). Keyboard type-ahead still works. */
.ts-wrapper.single:not(.plugin-dropdown_input) .ts-control > input { position: absolute !important; left: 12px; width: 1px !important; min-width: 0 !important; opacity: 0; pointer-events: none; }
.ts-wrapper.single .ts-control > .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ts-wrapper.single .ts-control .item { color: var(--text-primary); }
.ts-control input, .ts-control > input { color: var(--text-primary); font-size: var(--fs-body); }
.ts-control input::placeholder { color: rgba(141, 154, 171, .85); }
.ts-wrapper.single .ts-control::after {
    content: ""; position: absolute; right: 13px; top: 50%; margin: -3px 0 0; width: 8px; height: 8px; border: 0;
    border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: translateY(-65%) rotate(45deg); transition: transform var(--ease);
}
.ts-wrapper.single.dropdown-active .ts-control::after { transform: translateY(-25%) rotate(225deg); border-color: var(--bishop-gold); }
.ts-wrapper.disabled .ts-control { background: var(--bg-surface); opacity: .65; }
.ts-wrapper.is-invalid .ts-control, select.is-invalid + .ts-wrapper .ts-control { border-color: rgba(var(--danger-rgb), .7); }
.ts-wrapper.multi .ts-control > div.item {
    display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 4px 2px 9px; font-size: var(--fs-small); font-weight: 500;
    color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 6px;
}
.ts-wrapper.multi .ts-control > div.item.active { background: var(--bishop-gold-tint-strong); border-color: rgba(var(--bishop-gold-rgb), .45); color: var(--text-strong); }
.ts-wrapper.plugin-remove_button .item .remove { margin: 0; padding: 0 6px; border: 0; color: var(--text-muted); border-radius: 4px; font-size: 1rem; line-height: 1.2; transition: color var(--ease), background var(--ease); }
.ts-wrapper.plugin-remove_button .item .remove:hover { color: var(--text-strong); background: rgba(255, 255, 255, .1); }
.ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
    margin-top: 6px; padding: 4px; height: auto; font-size: var(--fs-body); color: var(--text-primary);
    background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); z-index: 1080;
}
.ts-dropdown .ts-dropdown-content { max-height: 260px; padding: 0; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create { padding: 8px 10px; border-radius: 6px; color: var(--text-primary); }
.ts-dropdown .no-results { color: var(--text-muted); }
.ts-dropdown .active, .ts-dropdown .option:hover { background: rgba(255, 255, 255, .07); color: var(--text-strong); }
.ts-dropdown .option.selected { background: var(--bishop-gold-tint); color: var(--text-strong); font-weight: 600; position: relative; padding-right: 30px; }
.ts-dropdown .option.selected::after { content: "\2713"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--bishop-gold); font-weight: 700; }
.ts-dropdown .option.selected.active { background: var(--bishop-gold-tint-strong); }
.ts-dropdown .dropdown-input { margin: 2px 2px 6px; padding: 7px 10px; color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: 6px; }
.ts-dropdown .dropdown-input:focus { outline: 0; border-color: rgba(var(--bishop-gold-rgb), .6); }
.ts-wrapper.is-sm .ts-control { min-height: var(--control-height-sm); font-size: var(--fs-small); border-radius: var(--radius-sm); }
.ts-hidden-accessible { position: absolute !important; }

/* Date fields */
.date-field { position: relative; }
.date-field > i { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.date-field > .form-control { padding-right: 38px; cursor: pointer; }
.flatpickr-calendar {
    padding: 6px; font-family: var(--font-sans); color: var(--text-primary);
    background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
}
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-calendar.open { z-index: 1090; animation: pop var(--ease); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: var(--text-strong); fill: var(--text-strong); font-weight: 600; font-size: var(--fs-body); }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--bg-surface); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text-muted); fill: var(--text-muted); border-radius: 6px; transition: background var(--ease), color var(--ease); }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(255, 255, 255, .07); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--bishop-gold); }
span.flatpickr-weekday { color: var(--text-muted); font-size: var(--fs-tiny); font-weight: 600; }
.flatpickr-day { color: var(--text-primary); border-radius: 8px; border: 1px solid transparent; font-size: var(--fs-small); transition: background var(--ease), color var(--ease); }
.flatpickr-day:hover, .flatpickr-day:focus { background: rgba(255, 255, 255, .08); border-color: transparent; color: var(--text-strong); }
.flatpickr-day.today { border-color: rgba(var(--bishop-gold-rgb), .55); }
.flatpickr-day.today:hover { background: var(--bishop-gold-tint); color: var(--text-strong); border-color: rgba(var(--bishop-gold-rgb), .55); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--bishop-gold); border-color: var(--bishop-gold); color: var(--bishop-on-gold); font-weight: 700; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: rgba(141, 154, 171, .45); }
.flatpickr-time { border-top: 1px solid var(--border) !important; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--text-primary); font-weight: 600; }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: rgba(255, 255, 255, .06); }
.numInputWrapper:hover { background: rgba(255, 255, 255, .06); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-muted); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--text-muted); }
.flatpickr-clear { display: block; margin-top: 4px; padding: 7px; text-align: center; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); border-radius: 6px; cursor: pointer; transition: background var(--ease), color var(--ease); }
.flatpickr-clear:hover { background: rgba(255, 255, 255, .06); color: var(--text-strong); }

/* ============================ 8. Menus & overlays ============================ */
.dropdown-menu {
    --bs-dropdown-bg: var(--bg-surface); --bs-dropdown-border-color: var(--border-strong); --bs-dropdown-color: var(--text-primary);
    --bs-dropdown-link-color: var(--text-primary); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .07); --bs-dropdown-link-hover-color: var(--text-strong);
    --bs-dropdown-link-active-bg: var(--bishop-gold-tint); --bs-dropdown-link-active-color: var(--text-strong); --bs-dropdown-divider-bg: var(--border);
    --bs-dropdown-border-radius: var(--radius-sm); --bs-dropdown-font-size: var(--fs-body); --bs-dropdown-item-padding-y: 8px; --bs-dropdown-item-padding-x: 10px;
    --bs-dropdown-padding-y: 4px; --bs-dropdown-padding-x: 4px; --bs-dropdown-min-width: 200px;
    box-shadow: var(--shadow-pop); animation: menu-in var(--ease); /* opacity only: Popper positions the menu with transform, an animated transform made it jump */
}
.dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 6px; font-weight: 500; transition: background var(--ease), color var(--ease); }
.dropdown-item i { width: 16px; font-size: 1rem; color: var(--text-muted); transition: color var(--ease); }
.dropdown-item:hover i { color: var(--text-strong); }
.dropdown-item.is-danger, .dropdown-item.is-danger i { color: var(--danger); }
.dropdown-item.is-danger:hover { background: rgba(var(--danger-rgb), .12); }
.dropdown-divider { margin: 4px 0; }
.dropdown-item-text { padding: 8px 10px; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }

/* Modals: header (title + close), body, footer (Cancel / action) */
.modal { --bs-modal-bg: var(--bg-surface); --bs-modal-border-color: var(--border-strong); --bs-modal-border-radius: var(--radius-lg); --bs-modal-color: var(--text-primary); --bs-modal-box-shadow: var(--shadow-pop); --bs-modal-header-padding: 18px 20px 6px; --bs-modal-padding: 12px 20px 8px; --bs-modal-footer-gap: 8px; }
.modal-content { background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal-header { align-items: flex-start; border: 0; }
.modal-title { font-size: var(--fs-section); font-weight: 650; color: var(--text-strong); }
.modal-body { color: var(--text-secondary); }
.modal-footer { border: 0; padding: 14px 20px 20px; justify-content: flex-end; gap: 8px; }
.modal-footer .btn-danger { --bs-btn-color: var(--text-strong); --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger-hover); --bs-btn-hover-border-color: var(--danger-hover); }
.modal-footer > * { margin: 0; }
.modal.fade .modal-dialog { transform: translateY(8px) scale(.985); transition: transform 180ms ease-out; }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop { --bs-backdrop-bg: var(--bg-overlay); --bs-backdrop-opacity: .72; }
.modal-dialog.modal-420 { --bs-modal-width: 420px; }
.modal-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--bishop-gold-tint); color: var(--bishop-gold); font-size: 1.15rem; }
.modal-icon.is-danger { background: rgba(var(--danger-rgb), .12); color: var(--danger); }

.offcanvas { --bs-offcanvas-bg: var(--bg-surface); --bs-offcanvas-color: var(--text-primary); --bs-offcanvas-border-color: var(--border-strong); --bs-offcanvas-box-shadow: var(--shadow-pop); --bs-offcanvas-padding-x: 20px; --bs-offcanvas-padding-y: 16px; --bs-offcanvas-width: 380px; --bs-offcanvas-transition: transform 200ms ease-in-out; }
.offcanvas-header { border-bottom: 1px solid var(--border); }
.offcanvas-title { font-size: var(--fs-section); font-weight: 650; }
.filters-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.offcanvas-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

.tooltip { --bs-tooltip-bg: color-mix(in srgb, var(--bg-surface), white 12%); --bs-tooltip-color: var(--text-strong); --bs-tooltip-font-size: var(--fs-tiny); --bs-tooltip-border-radius: 6px; --bs-tooltip-padding-x: 9px; --bs-tooltip-padding-y: 5px; --bs-tooltip-opacity: 1; }
.tooltip-inner { border: 1px solid var(--border-strong); font-weight: 500; }

/* Tabs / pills */
.nav-tabs, .nav-pills { --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--text-strong); --bs-nav-link-padding-x: 14px; --bs-nav-link-padding-y: 9px; --bs-nav-link-font-size: var(--fs-body); --bs-nav-link-font-weight: 550; gap: 4px; }
.nav-pills .nav-link { border-radius: var(--radius-md); display: flex; align-items: center; gap: 10px; transition: background var(--ease), color var(--ease); }
.nav-pills .nav-link:hover { background: var(--bg-hover); }
.nav-pills .nav-link.active { background: var(--bishop-gold-tint); color: var(--text-strong); }
.nav-pills .nav-link.active i { color: var(--bishop-gold); }

/* ============================ 9. Toasts ============================ */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 2100; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: var(--fs-body); font-weight: 550; color: var(--text-strong);
    background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
    pointer-events: auto; animation: toast-in 180ms ease-out;
}
.toast-item i { font-size: 1.1rem; flex: none; }
.toast-item.is-ok i { color: var(--success); }
.toast-item.is-err i { color: var(--danger); }
.toast-item.is-err { border-color: rgba(var(--danger-rgb), .4); }
.toast-item.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 180ms, transform 180ms; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============================ 10. Data: tables, badges, status ============================ */
.table-wrap { overflow-x: auto; position: relative; } /* row menus use popper's fixed strategy, so they are never clipped */
.table, .data-table {
    --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--bg-hover); --bs-table-hover-color: var(--text-primary); margin: 0; width: 100%;
}
.data-table > :not(caption) > * > * { padding: 10px 16px; vertical-align: middle; border-bottom-width: 1px; }
.data-table tbody > tr { height: var(--row-height); transition: background var(--ease); }
.data-table tbody > tr:last-child > * { border-bottom: 0; }
.data-table thead th {
    height: 44px; font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
    background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.data-table thead th:last-child { border-top-right-radius: var(--radius-lg); }
.data-table .col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* Service cell */
.svc { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-strong); font-size: 1.1rem; }
.svc { position: relative; overflow: hidden; }
.svc__img { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; object-fit: contain; opacity: 0; transition: opacity var(--ease); }
.svc.is-lg .svc__img { width: 26px; height: 26px; }
/* once the favicon has loaded it replaces the glyph on a light tile (favicons are drawn for light backgrounds) */
.svc.has-favicon { background: rgba(255, 255, 255, .92); border-color: transparent; }
.svc.has-favicon > .bi { opacity: 0; }
.svc.has-favicon > .svc__img { opacity: 1; }
.svc.is-lg { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; }
.cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-main__text { min-width: 0; line-height: 1.3; }
.kind-tag { margin-left: 4px; padding: 1px 7px; font-size: var(--fs-tiny); font-weight: 600; color: var(--text-secondary); background: var(--bg-hover); border: 1px solid var(--border); border-radius: 999px; vertical-align: 1px; white-space: nowrap; }
.cell-main__title { display: block; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
a.cell-main__title:hover { color: var(--bishop-gold); }
.cell-main__sub { display: block; font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.copy-inline { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.copy-inline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; color: var(--text-secondary); }
.copy-inline .btn-icon { width: 28px; height: 28px; font-size: .9rem; }
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
@media (hover: hover) {
    .data-row .quick { opacity: 0; transition: opacity var(--ease), background var(--ease), color var(--ease); }
    .data-row:hover .quick, .data-row:focus-within .quick, .quick:focus-visible, .quick[aria-expanded="true"] { opacity: 1; }
}

/* Badges: subtle tints, never neon. Gold is reserved for brand/active, so vaults rotate through cool tints. */
.badge-tint {
    --tint: var(--tint-blue); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; font-size: var(--fs-tiny); font-weight: 600;
    color: rgb(var(--tint)); background: rgba(var(--tint), .1); border: 1px solid rgba(var(--tint), .2); border-radius: 999px; white-space: nowrap; max-width: 100%;
}
.badge-tint i { font-size: .8rem; }
.badge-tint.is-link:hover { background: rgba(var(--tint), .16); border-color: rgba(var(--tint), .35); }
.tint-n { --tint: 182, 192, 205; } /* neutral: every vault looks the same */
.tint-0 { --tint: var(--tint-blue); }
.tint-1 { --tint: var(--tint-purple); }
.tint-2 { --tint: var(--tint-teal); }
.tint-3 { --tint: var(--tint-rose); }
.tint-4 { --tint: var(--tint-gold); }
.badge-neutral { --tint: 182, 192, 205; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-secondary); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.status.is-active::before { background: var(--success); box-shadow: 0 0 0 3px rgba(var(--success-rgb), .15); }
.status.is-suspended::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .15); }
.vault-icon { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: var(--radius-md); background: rgba(var(--tint, var(--tint-gold)), .1); color: rgb(var(--tint, var(--tint-gold))); font-size: 1.15rem; }

/* ============================ 11. Screens ============================ */
/* Toolbar above lists */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar__search { flex: 1 1 320px; max-width: 460px; }
.toolbar__filters { display: flex; align-items: center; gap: 8px; }
.toolbar__filters .ts-wrapper, .toolbar__filters .form-select { width: 168px; }
.toolbar__sheet-btn { display: none; }
@media (max-width: 991.98px) { .toolbar { gap: var(--space-2); } .toolbar__browse, .toolbar__sheet-btn { flex: 1 1 0; justify-content: center; min-height: 44px; } }
.toolbar__reset { font-size: var(--fs-small); color: var(--text-muted); padding: 0 6px; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 14px; }
.chip-x { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; font-size: var(--fs-tiny); font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 999px; }
.chip-x a { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--text-muted); }
.chip-x a:hover { background: rgba(255, 255, 255, .1); color: var(--text-strong); }
.count-pill { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bishop-gold); color: var(--bishop-on-gold); font-size: 11px; font-weight: 700; }

/* Credentials: mobile cards */
.cred-cards { display: none; flex-direction: column; gap: 8px; padding: 8px; }
.cred-card { position: relative; display: flex; gap: 12px; padding: 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: background var(--ease), border-color var(--ease); }
.cred-card:hover { background: var(--bg-hover); border-color: var(--border); }
.cred-card__body { flex: 1; min-width: 0; line-height: 1.35; }
.cred-card__title { display: block; font-weight: 650; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-card__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); } /* whole card is the link */
.cred-card__sub { color: var(--text-muted); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: var(--fs-tiny); color: var(--text-muted); }
.cred-card .dropdown { position: relative; z-index: 2; align-self: flex-start; margin: -4px -4px 0 0; }

/* Credential details */
.kv-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); min-height: 56px; }
.kv-row:last-child { border-bottom: 0; }
.kv-label { width: 168px; flex: none; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; padding-top: 6px; }
.kv-value { flex: 1; min-width: 0; word-break: break-word; padding-top: 5px; }
.kv-actions { display: flex; gap: 6px; flex: none; }
.secret-mask { letter-spacing: .14em; color: var(--text-muted); }
.secret-value { margin: 0; padding: 7px 11px; font-size: var(--fs-small); color: var(--text-strong); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all; animation: pop var(--ease); }
.pre-wrap { white-space: pre-wrap; }
.note { display: flex; gap: 8px; align-items: center; color: var(--text-muted); font-size: var(--fs-small); margin-top: 14px; }
.note i { color: var(--bishop-gold); }

/* Vaults */
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.vault-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: background var(--ease), border-color var(--ease); }
.vault-card:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.vault-card__head { display: flex; align-items: flex-start; gap: 12px; }
.vault-card__chev { display: none; color: var(--text-muted); align-self: center; font-size: .9rem; }
.vault-card__title { display: block; font-size: var(--fs-section); font-weight: 650; color: var(--text-strong); line-height: 1.25; }
.vault-card__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.vault-card__desc { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.vault-card__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 10px; color: var(--text-muted); font-size: var(--fs-small); }
.vault-card__meta b { color: var(--text-primary); font-weight: 600; }
.vault-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vault-card .dropdown, .vault-card .btn { position: relative; z-index: 2; }
.vault-card .dropdown { margin: -6px -6px 0 auto; }

/* Dashboard */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-strip > * { display: block; padding: 18px 24px; color: inherit; border-right: 1px solid var(--border); transition: background var(--ease); }
.stat-strip > *:last-child { border-right: 0; }
.stat-strip > a:hover { background: var(--bg-hover); }
.stat { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--text-strong); }
.stat-label { font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mini-list { list-style: none; margin: 0; padding: 6px; }
.mini-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-md); color: inherit; transition: background var(--ease); }
.mini-item:hover { background: var(--bg-hover); }

/* Activity feed */
.feed { list-style: none; margin: 0; padding: 6px 8px; }
.feed-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--radius-md); position: relative; transition: background var(--ease); }
.feed-item:hover { background: var(--bg-hover); }
.feed-item__icon { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 1rem; }
.feed-item__icon.is-secret { color: var(--bishop-gold); background: var(--bishop-gold-tint); border-color: rgba(var(--bishop-gold-rgb), .25); }
.feed-item__icon.is-danger { color: var(--danger); background: rgba(var(--danger-rgb), .1); border-color: rgba(var(--danger-rgb), .25); }
.feed-item__body { flex: 1; min-width: 0; line-height: 1.4; }
.feed-item__text { color: var(--text-primary); }
.feed-item__text b { color: var(--text-strong); font-weight: 600; }
.feed-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: var(--fs-small); color: var(--text-muted); }
.feed-item details { margin-top: 6px; font-size: var(--fs-small); color: var(--text-muted); }
.feed-item details summary { cursor: pointer; }
.props { max-width: 36rem; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-tiny); }
.feed-day { padding: 14px 20px 4px; font-size: var(--fs-tiny); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* Settings: section nav on the left, content on the right */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1000px; }
.settings-nav { position: sticky; top: calc(var(--topbar-height) + 16px); }
.settings-section { padding: 22px 24px; }
.settings-section__title { font-size: var(--fs-section); font-weight: 650; margin: 0 0 4px; }
.settings-section__hint { color: var(--text-muted); font-size: var(--fs-small); margin: 0 0 18px; }
.settings-pane + .settings-pane { margin-top: 16px; }
.tab-content > .form-actions { display: flex; }

/* Account: callouts, QR, recovery codes, sessions */
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 20px; font-size: var(--fs-body); color: var(--text-primary); background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.callout.is-warning { background: var(--bishop-gold-tint); border-color: rgba(var(--bishop-gold-rgb), .25); }
.callout > i { color: var(--text-secondary); font-size: 1.15rem; margin-top: 1px; }
.callout.is-warning > i { color: var(--bishop-gold); }
.settings-section .callout { margin-bottom: 0; }
.qr-box { width: 164px; height: 164px; flex: none; padding: 10px; background: var(--qr-bg); border-radius: var(--radius-md); }
.qr-box svg { display: block; width: 100%; height: 100%; }
.setup-key { padding: 8px 12px; font-size: var(--fs-small); letter-spacing: .08em; word-break: break-all; color: var(--text-strong); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.steps { margin: 0 0 16px; padding-left: 20px; color: var(--text-secondary); }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.recovery-codes code { padding: 7px 10px; text-align: center; font-size: var(--fs-small); color: var(--text-strong); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-sm); user-select: all; }
.session-list { list-style: none; margin: 0; padding: 0; }
.session-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.session-row:last-child { border-bottom: 0; }

/* Error pages */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.error-card { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-8) var(--space-6); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.error-card .brand-link { margin-bottom: var(--space-4); }
.error-card__icon { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.5rem; color: var(--bishop-gold); background: var(--bishop-gold-tint); border-radius: var(--radius-lg); }
.error-card__code { margin: var(--space-2) 0 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: .14em; color: var(--text-muted); }
.error-card__title { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--text-strong); }
.error-card__text { margin: 0 0 var(--space-4); max-width: 34ch; color: var(--text-secondary); }

/* Auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-aside {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 56px;
    background: radial-gradient(900px 480px at 12% 0%, rgba(var(--bishop-gold-rgb), .09), transparent 60%), var(--bg-sidebar); border-right: 1px solid var(--border);
}
.auth-aside .bishop-brand-logo { --logo-w: 200px; }
.auth-aside .brand-lockup__mark { height: 40px; }
.auth-aside .brand-lockup__name { font-size: 1.3rem; }
.auth-aside h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.15; max-width: 16ch; margin: 0 0 12px; }
.auth-aside h2 span { color: var(--bishop-gold); }
.auth-aside p { color: var(--text-muted); max-width: 40ch; margin: 0; }
.auth-aside .foot { color: var(--text-muted); font-size: var(--fs-tiny); }
.auth-aside .ghost { position: absolute; right: 48px; bottom: 48px; width: 150px; opacity: .06; pointer-events: none; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box .brand-link { display: none; }
.auth-box .bishop-brand-logo { --logo-w: 180px; }
.auth-box h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 4px; }
.auth-box .btn-primary { height: 44px; width: 100%; }

/* ============================ 12. Pagination & empty states ============================ */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pager__info { color: var(--text-muted); font-size: var(--fs-small); }
.pager__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pager__link {
    min-width: var(--control-height-sm); height: var(--control-height-sm); padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-small); font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
a.pager__link:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--border-strong); }
.pager__link.is-active { background: var(--bishop-gold-tint); border-color: rgba(var(--bishop-gold-rgb), .45); color: var(--text-strong); }
.pager__link.is-disabled { opacity: .4; }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 36px 20px; max-width: 460px; margin: 0 auto; }
.empty-state__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 8px; border-radius: var(--radius-lg); font-size: 1.5rem; color: var(--text-secondary); background: var(--bg-hover); border: 1px solid var(--border); }
.empty-state__title { font-size: var(--fs-section); font-weight: 650; color: var(--text-strong); margin: 0; }
.empty-state__text { color: var(--text-muted); margin: 0 0 12px; max-width: 38ch; font-size: var(--fs-body); }

/* ============================ 13. Responsive ============================ */
@media (max-width: 1199.98px) {
    .dash-grid { grid-template-columns: 1fr; }

}


/* Narrow desktops: keep every column, tighten the grid */
@media (max-width: 1279.98px) {
    .data-table > :not(caption) > * > * { padding-left: 10px; padding-right: 10px; }
    .cell-main__title, .cell-main__sub { max-width: 22ch; }
    .copy-inline > span { max-width: 18ch; }
    .row-actions .quick { display: none; }
}

/* Phones and tablets: sidebar -> bottom navigation, tables -> cards */
@media (max-width: 991.98px) {
    .sidebar { display: none; }
    .app-main { margin-left: 0; padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom)); }
    .content { padding-top: 20px; padding-bottom: 28px; }
    .topbar { flex-wrap: wrap; gap: 10px 12px; padding: 12px var(--page-x); }
    .topbar .brand-link { display: inline-flex; flex: 1; }
    .topbar .brand-lockup__mark { height: 28px; }
    .topbar .brand-official { flex-direction: row; align-items: center; gap: 8px; }
    .topbar .bishop-brand-logo { --logo-w: 112px; }
    .topbar .brand-lockup__name { font-size: 1rem; }
    .topbar .topbar__user { display: inline-flex; }
    .topbar__search { order: 3; flex: 0 0 100%; max-width: none; }
    .page-header { margin-bottom: 16px; flex-wrap: nowrap; align-items: flex-start; }
    .page-header__text { flex: 1 1 auto; }
    .page-header__title { font-size: 1.5rem; }
    .page-header__actions { flex-wrap: wrap; justify-content: flex-end; }

    .bottom-nav {
        display: flex; position: fixed; inset: auto 0 0 0; z-index: 1040; height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: rgba(10, 20, 36, .95); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
    }
    .bottom-nav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted);
        font-size: 11px; font-weight: 600; transition: color var(--ease);
    }
    .bottom-nav i { font-size: 1.3rem; line-height: 1; }
    .bottom-nav a.active { color: var(--bishop-gold); }

    .cred-table { display: none; }
    .cred-cards { display: flex; }
    .panel:not(:has(> .panel-head)):has(> .cred-cards) { border: 0; background: none; box-shadow: none; }
    .panel:not(:has(> .panel-head)) > .cred-cards { padding: 0; }
    .kv-row { flex-wrap: wrap; padding: 12px 16px; }
    .kv-label { width: 100%; padding-top: 0; }
    .kv-value { flex: 1 1 0; padding-top: 0; }
    .kv-actions { align-self: center; }
    .panel-pad { padding: 18px 16px; }
    .settings-layout { grid-template-columns: 1fr; gap: 12px; }
    .settings-nav { display: none; }
    .settings-pane { display: block !important; opacity: 1 !important; }
    .vault-grid { grid-template-columns: 1fr; gap: 8px; }
    .toolbar__filters, .toolbar__search.is-desktop-only { display: none; } /* phones: the header search is the search; filters open as a sheet */
    .toolbar__sheet-btn { display: inline-flex; }
    /* Vaults on phones are plain rows: name, "12 credentials", chevron */
    .vault-card { flex-direction: row; align-items: center; padding: 12px 14px; gap: 12px; }
    .vault-card__head { flex: 1; min-width: 0; align-items: center; }
    .vault-card__desc, .vault-card__foot, .vault-card .dropdown, .vault-card__meta .is-extra { display: none; }
    .vault-card__meta { margin-top: 2px; }
    .vault-card__chev { display: block; }
    .feed-item { padding: 10px 6px; }

    .auth { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-box .brand-link { display: flex; justify-content: center; margin-bottom: 28px; }
    .auth-box .brand-official, .auth-box .brand-lockup { align-items: center; }
    .auth-box .brand-official__product { padding-left: .22em; }
    .auth-box.is-login h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* kept for screen readers */
    .auth-box.is-login h1 + p { display: none; }
    .auth-main { align-items: flex-start; padding-top: 12vh; }

    .toast-stack { top: auto; right: 16px; left: 16px; width: auto; bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom) + 12px); flex-direction: column-reverse; }
    .toast-item { animation-name: toast-in-up; }
    @keyframes toast-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* Filters become a bottom sheet */
    #filtersCanvas { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 88vh; height: auto; border-radius: 18px 18px 0 0; border-left: 0; border-top: 1px solid var(--border-strong); transform: translateY(100%); }
    #filtersCanvas.show:not(.hiding), #filtersCanvas.showing { transform: none; }
}
@media (max-width: 575.98px) {
    .stat-strip > * { padding: 14px 12px; }
    .stat { font-size: 1.5rem; }
    .stat-label { font-size: var(--fs-tiny); }
    .toolbar__search { flex-basis: 100%; max-width: none; }
    .modal-footer .btn { flex: 1; }
    /* Phones: title + subtitle first, then the actions on their own full-width row (the primary action never shrinks to an icon) */
    .page-header { flex-wrap: wrap; }
    .page-header__text { flex-basis: 100%; }
    .page-header__actions { width: 100%; justify-content: flex-start; }
    .page-header__actions > .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) { .content, .topbar { padding-left: 14px; padding-right: 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }