/*
 * Custom branding CSS for Password Vault.
 * Hides Vaultwarden/Bitwarden logos and replaces with branded text.
 * Loaded via <link> in index.html after vaultwarden.css.
 */

/* ===== HEADER LOGO (bit-svg with inline Vaultwarden SVG) ===== */

/* Hide the inline SVG logo rendered by Angular's <bit-svg> component */
header bit-svg,
header bit-svg svg,
header a[href="#/"] bit-svg {
    display: none !important;
}

/* Replace with branded text */
header a[href="#/"] {
    display: flex !important;
    align-items: center;
    font-size: 22px;
    font-weight: 700;ƒ
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: -0.3px;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
header a[href="#/"]::before {
    content: "Password Vault";
}

/* ===== STATIC LOADING LOGO (shown before Angular boots) ===== */

img.new-logo-themed,
img[alt="Vaultwarden"],
img[alt="Bitwarden"],
.new-logo-themed {
    display: none !important;
}

/* Loading screen replacement */
.tw-pt-5.tw-px-5.tw-fixed {
    display: flex !important;
    align-items: center;
    padding: 20px 24px !important;
}
.tw-pt-5.tw-px-5.tw-fixed::after {
    content: "Password Vault";
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ===== Hide decorative illustrations (bottom corners) ===== */
.tw-opacity-\[\.11\] {
    display: none !important;
}

/* ===== KILL ALL onboarding / extension promo pages — PERMANENTLY ===== */
vault-browser-extension-prompt-install,
vault-manually-open-extension,
vault-browser-extension-prompt,
vault-add-extension-later-dialog,
vault-add-extension-videos,
vault-setup-extension,
app-onboarding-task,
app-onboarding,
app-vault-onboarding {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}
/* Force redirect away from setup-extension route if user lands on it */
vault-setup-extension::before {
    content: "Redirecting...";
    display: block !important;
    visibility: visible !important;
}

/* ===== Hide Card, Identity, SSH key from UI ===== */

/* Sidebar filters — hide by icon class */
*:has(> .bwi-credit-card),
*:has(> .bwi-id-card),
*:has(> .bwi-key),
*:has(> i.bwi-credit-card),
*:has(> i.bwi-id-card),
*:has(> i.bwi-key) {
    display: none !important;
}

/* "+ New" dropdown menu — hide Card, Identity, SSH key buttons */
button[bitmenuitem]:has(.bwi-credit-card),
button[bitmenuitem]:has(.bwi-id-card),
button[bitmenuitem]:has(.bwi-key) {
    display: none !important;
}

/* ===== SIDEBAR LOGO (after login, left nav) ===== */
bit-nav-logo {
    display: none !important;
}

/* ===== AUTH PAGE ILLUSTRATION (login / lock / register "safe") ===== */
/* Replace Bitwarden's inline illustration — a <bit-svg> holding the safe SVG
 * (paths use .tw-fill-illustration-*) — with our own logo PNG. Scoped by
 * :has() to the illustration so other bit-svg icons are untouched. */
/* Size the ICON CONTAINER (Bitwarden's tw-size-24 box, already centered via
 * tw-mx-auto), not the bit-svg. Sizing the bit-svg wider than its 96px
 * container is what pushed the logo off-centre. */
/* IMPORTANT: scope to bit-landing-layout (the auth pages: login/lock/register)
 * so we do NOT replace OTHER app illustrations (empty states, etc.) that also
 * use .tw-fill-illustration-* classes. */
html.pv-grigotec bit-landing-layout div:has(> bit-svg .tw-fill-illustration-bg-primary) {
    width: 130px !important;
    max-width: 130px !important;
    height: 130px !important;
}
html.pv-grigotec bit-landing-layout bit-svg:has(.tw-fill-illustration-bg-primary) > svg {
    display: none !important;
}
html.pv-grigotec bit-landing-layout bit-svg:has(.tw-fill-illustration-bg-primary) {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: url('../images/login_vault.png?v=4') center / contain no-repeat;
}

/* ===== EMPTY-VAULT ILLUSTRATION (2x2 item-type grid) -> glass vaults.png =====
 * Targeted precisely by the illustration's unique viewBox so ONLY this one is
 * replaced (not other illustrations). */
html.pv-grigotec div:has(> bit-svg > svg[viewBox="0 18.75 150 112.5"]) {
    width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="0 18.75 150 112.5"]) > svg {
    display: none !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="0 18.75 150 112.5"]) {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: url('../images/vaults.svg?v=1') center / contain no-repeat;
}

/* ===== FAVORITES EMPTY-STATE ILLUSTRATION (star + cursor) -> glass star =====
 * Targeted by its unique viewBox so ONLY the Favorites empty state is replaced. */
html.pv-grigotec div:has(> bit-svg > svg[viewBox="5.29 4.98 86.89 90.19"]) {
    width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="5.29 4.98 86.89 90.19"]) > svg {
    display: none !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="5.29 4.98 86.89 90.19"]) {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: url('../images/favorites.svg?v=2') center / contain no-repeat;
}

/* ===== TRASH EMPTY-STATE ILLUSTRATION -> glass bin =====
 * Targeted by its unique viewBox so ONLY the Trash empty state is replaced. */
html.pv-grigotec div:has(> bit-svg > svg[viewBox="0.22 7 95.71 88"]) {
    width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="0.22 7 95.71 88"]) > svg {
    display: none !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="0.22 7 95.71 88"]) {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: url('../images/trash.svg?v=1') center / contain no-repeat;
}

/* ===== SEND EMPTY-STATE ILLUSTRATION -> glass paper plane ===== */
html.pv-grigotec div:has(> bit-svg > svg[viewBox="9 4 83.89 91"]) {
    width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="9 4 83.89 91"]) > svg {
    display: none !important;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="9 4 83.89 91"]) {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: url('../images/send.svg?v=1') center / contain no-repeat;
}

/* =========================================================================
 * GRIGOTEC THEME — glassmorphism (global style_variant = "grigotec")
 * Toggled by scripts/pv-theme.js, which adds class .pv-grigotec to <html> based
 * on the admin-selected global style fetched from /api/theme-style.
 * Everything is scoped under html.pv-grigotec so the default look is untouched.
 * Best-effort over the vendored Bitwarden SPA — targets its real theme
 * variables (--color-*) and layout classes (.tw-bg-background*, bit-nav-*).
 * ========================================================================= */

/* --- Design tokens (single source of truth; see design/DESIGN-glass.md) --- */
html.pv-grigotec {
    /* Accent — indigo -> emerald */
    --pv-indigo: #6366f1; --pv-emerald: #10b981;
    --pv-indigo-soft: #a5b4fc; --pv-emerald-soft: #6ee7b7;
    --pv-indigo-rgb: 99, 102, 241; --pv-indigo-deep-rgb: 79, 70, 229;
    --pv-indigo-light-rgb: 129, 140, 248; --pv-emerald-rgb: 16, 185, 129;
    /* Base — night gradient + frosted surfaces */
    --pv-night-1: #0f172a; --pv-night-2: #1e3a5f; --pv-night-3: #312e81;
    --pv-glass-rgb: 30, 41, 59; --pv-glass-hover-rgb: 41, 55, 80; --pv-nav-rgb: 15, 23, 42;
    /* Neutrals — slate / white / black */
    --pv-white: #ffffff; --pv-white-rgb: 255, 255, 255; --pv-black-rgb: 0, 0, 0;
    --pv-slate-rgb: 148, 163, 184; --pv-text-rgb: 226, 232, 240; --pv-dropdown-rgb: 18, 26, 44;
    /* Text */
    --pv-text-main: #e2e8f0; --pv-text-bright: #f1f5f9; --pv-text-field: #e8eef6; --pv-on-toast: #111827;
}

html.pv-grigotec,
html.pv-grigotec body {
    background: linear-gradient(135deg, var(--pv-night-1) 0%, var(--pv-night-2) 55%, var(--pv-night-3) 100%) fixed !important;
}

/* Dark glass palette — override Bitwarden's RGB-channel theme variables with
 * !important so they beat the app's own theme_light / theme_dark values. */
html.pv-grigotec {
    --color-background: 17 24 39 !important;
    --color-background-alt: 30 41 59 !important;
    --color-background-alt2: 30 41 59 !important;
    --color-background-alt3: 15 23 42 !important;
    --color-background-alt4: 15 23 42 !important;
    --color-text-main: 226 232 240 !important;
    --color-text-muted: 148 163 184 !important;
    --color-text-alt2: 148 163 184 !important;
    --color-text-contrast: 255 255 255 !important;
    --color-admin-sidenav-background: 15 23 42 !important;
    --color-admin-sidenav-text: 226 232 240 !important;
    --color-admin-sidenav-item-hover: 51 65 85 !important;
    --color-admin-sidenav-active-item: 99 102 241 !important;
}

/* Frosted translucency + blur on the main surfaces. */
html.pv-grigotec .tw-bg-background,
html.pv-grigotec .tw-bg-background-alt,
html.pv-grigotec .tw-bg-background-alt2,
html.pv-grigotec .tw-bg-background-alt4,
html.pv-grigotec bit-dialog .tw-bg-background,
html.pv-grigotec .box,
html.pv-grigotec .card {
    background-color: rgba(var(--pv-glass-rgb), 0.55) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Left navigation (sidenav) — deeper blur + hairline edge. */
html.pv-grigotec app-layout nav,
html.pv-grigotec .tw-bg-background-alt3 {
    background-color: rgba(var(--pv-nav-rgb), 0.45) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-right: 1px solid rgba(var(--pv-white-rgb), 0.08);
}

/* Header / top bar. */
html.pv-grigotec header,
html.pv-grigotec app-header {
    background-color: rgba(var(--pv-nav-rgb), 0.5) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(var(--pv-white-rgb), 0.08);
}

/* =========================================================================
 * SIDEBAR FIXAT PE ECRAN — pe toate temele (nu scoped).
 *
 * Bitwarden randeaza bara ca `nav#bit-side-nav`, deja `tw-sticky`, dar cu
 * `tw-h-full` intr-un lant de inaltimi procentuale fara inaltime definita:
 * `h-full` cade pe `auto`, bara e inalta cat continutul ei, iar sticky n-are
 * interval pe care sa gliseze — pleaca la scroll odata cu pagina.
 *
 * `fixed` ignora lantul de containere, deci merge sigur. Gazda (`bit-side-nav`)
 * ramane in flux si tine locul rezervat, asa ca nu trebuie compensat nimic;
 * latimea ei e masurata din pv-theme.js si publicata ca `--pv-sidenav-w`, ca
 * bara sa nu se stranga la continut si sa urmeze colapsarea.
 * ========================================================================= */
nav#bit-side-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 40;
}
/* Gazda ramane in flux si tine locul rezervat. Odata ce bara a devenit `fixed`,
 * gazda nu mai are de la ce sa-si ia latimea (bara era singurul ei continut) si
 * s-ar strange la zero — de aici continutul paginii intrat pe sub bara. Preia
 * latimea masurata a barei, publicata din pv-theme.js. */
bit-side-nav {
    display: block;
    width: var(--pv-sidenav-w, 15rem);
    flex: 0 0 auto;
}
/* Sepia: bara e un card plutitor cu marginile ei (vezi nav.tw-bg-bg-sidenav mai
 * jos), deci inaltimea scade cu marginile de sus si de jos. */
html.pv-mma nav#bit-side-nav { height: calc(100vh - 20px) !important; }

/* Nav items — rounded, translucent hover. */
html.pv-grigotec bit-nav-item a,
html.pv-grigotec bit-nav-group > button {
    border-radius: 10px;
    margin: 2px 8px;
}
html.pv-grigotec bit-nav-item a:hover,
html.pv-grigotec bit-nav-group > button:hover {
    background-color: rgba(var(--pv-slate-rgb), 0.15) !important;
}

/* Frosted edge on dialogs / cards ONLY. (Previously this also matched every
 * [class*="tw-rounded"], which stamped a 1px frame onto inputs, checkboxes,
 * buttons, etc. — the stray "cadran".) */
html.pv-grigotec bit-dialog,
html.pv-grigotec .box {
    border: 1px solid rgba(var(--pv-white-rgb), 0.10);
}

/* Primary buttons — glassy gradient. */
html.pv-grigotec .tw-bg-primary-500 {
    background-image: linear-gradient(135deg, rgba(var(--pv-indigo-rgb), 0.95), rgba(var(--pv-emerald-rgb), 0.9)) !important;
    border: 1px solid rgba(var(--pv-white-rgb), 0.15);
}

/* Form inputs — a subtle LIGHT fill so fields read against the dark glass
 * card. (The default was a dark fill over an already-dark card, which
 * compounded into near-black.) Checkboxes/radios keep their native look. */
/* Inputs: transparent fill so they match the surrounding background. */
html.pv-grigotec input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.pv-grigotec textarea,
html.pv-grigotec select {
    background-color: transparent !important;
}

/* Field outline = Bitwarden's OWN Material notched outline, just recolored to
 * a subtle white. We add NO extra border to the field box, so nothing runs
 * as a straight line under the floating label. */
html.pv-grigotec bit-form-field .tw-bg-background {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html.pv-grigotec bit-form-field .tw-absolute.tw-top-0,
html.pv-grigotec bit-form-field .tw-absolute.tw-top-0 * {
    border-color: rgba(var(--pv-white-rgb), 0.18) !important;
}

/* Input label — white. */
html.pv-grigotec bit-form-field label,
html.pv-grigotec bit-label,
html.pv-grigotec bit-form-field label span {
    color: var(--pv-white) !important;
}

/* Focus → indigo outline. */
html.pv-grigotec bit-form-field:focus-within .tw-absolute.tw-top-0,
html.pv-grigotec bit-form-field:focus-within .tw-absolute.tw-top-0 * {
    border-color: rgba(var(--pv-indigo-light-rgb), 0.9) !important;
}

/* Chrome autofill: the browser forces its own (white/yellow) background on
 * :-webkit-autofill, overriding our transparent field. There's no direct way
 * to override that colour, so we keep the field transparent by delaying the
 * autofill background transition indefinitely, and set a light text colour. */
html.pv-grigotec input:-webkit-autofill,
html.pv-grigotec input:-webkit-autofill:hover,
html.pv-grigotec input:-webkit-autofill:focus,
html.pv-grigotec input:-webkit-autofill:active,
html.pv-grigotec textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--pv-text-field) !important;
    caret-color: var(--pv-text-field);
    transition: background-color 600000s 0s, color 600000s 0s !important;
}

/* =========================================================================
 * SIDEBAR -> TOP NAVBAR  (glass theme) — custom shell #pvx-topnav
 * Same approach as ids-ips: hide Bitwarden's native left sidenav and render
 * our OWN top navbar (built by scripts/pv-nav.js) with click-to-toggle
 * dropdowns. Robust — we own the markup, no fighting the SPA layout.
 * ========================================================================= */

/* Hide native sidenav + push app content below our fixed top bar. */
html.pv-grigotec app-side-nav { display: none !important; }
html.pv-grigotec app-layout bit-layout { padding-top: 52px !important; }

/* --- Top navbar bar --- */
#pvx-topnav {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 1000;
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: rgba(var(--pv-nav-rgb), 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(var(--pv-white-rgb), 0.10);
  color: var(--pv-text-main); font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
#pvx-brand { display: flex; align-items: center; gap: 9px; padding-right: 14px; margin-right: 4px; border-right: 1px solid rgba(var(--pv-white-rgb),0.12); }
#pvx-brand .pvx-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pv-indigo), var(--pv-emerald)); }
#pvx-brand .pvx-mark svg { width: 17px; height: 17px; stroke: var(--pv-white); }
#pvx-brand .pvx-title { font-size: 15.5px; font-weight: 800; letter-spacing: 0.2px; color: var(--pv-text-bright); white-space: nowrap; }
#pvx-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.pvx-right { display: flex; align-items: center; gap: 2px; }

/* --- Nav items --- */
.pvx-navitem {
  display: flex; align-items: center; gap: 8px; position: relative; height: 52px;
  box-sizing: border-box; padding: 0 12px; cursor: pointer; white-space: nowrap;
  color: rgba(var(--pv-text-rgb), 0.82); font-size: 13.5px; font-weight: 600;
}
.pvx-navitem:hover { background: rgba(var(--pv-slate-rgb), 0.14); color: var(--pv-white); }
.pvx-navitem.pvx-active { color: var(--pv-white); }
.pvx-navitem.pvx-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--pv-indigo), var(--pv-emerald)); border-radius: 2px; }
.pvx-navitem .pvx-gi svg { width: 18px; height: 18px; stroke: currentColor; display: block; }
.pvx-navitem .pvx-caret svg { width: 12px; height: 12px; stroke: currentColor; opacity: 0.65; transition: transform 0.15s; }
.pvx-hasmenu.pvx-open .pvx-caret svg { transform: rotate(180deg); }

/* --- Dropdown (click-to-toggle, opens below the item) --- */
.pvx-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 210px; display: none;
  flex-direction: column; padding: 6px; z-index: 1100;
  background: rgba(var(--pv-nav-rgb), 0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(var(--pv-white-rgb), 0.12); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(var(--pv-black-rgb), 0.5);
}
.pvx-hasmenu.pvx-open .pvx-dropdown { display: flex; }
.pvx-dropdown .pvx-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  cursor: pointer; color: rgba(var(--pv-text-rgb), 0.85); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.pvx-dropdown .pvx-item:hover { background: rgba(var(--pv-indigo-rgb), 0.22); color: var(--pv-white); }
.pvx-dropdown .pvx-item.pvx-active { background: rgba(var(--pv-indigo-rgb), 0.28); color: var(--pv-white); }
.pvx-dropdown .pvx-item svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; }


/* =========================================================================
 * VAULT PAGE — glass enhancements (empty state, filters, header, buttons)
 * ========================================================================= */

/* Decorative background glow orbs (depth) */
html.pv-grigotec app-vault { position: relative; z-index: 0; }
html.pv-grigotec app-vault::before,
html.pv-grigotec app-vault::after {
    content: ""; position: fixed; pointer-events: none; z-index: 0;
    width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; border-radius: 50%;
    filter: blur(100px); opacity: 0.28;
}
html.pv-grigotec app-vault::before { background: radial-gradient(circle, var(--pv-indigo), transparent 68%); top: -12%; right: -6%; }
html.pv-grigotec app-vault::after  { background: radial-gradient(circle, var(--pv-emerald), transparent 68%); bottom: -14%; left: 12%; }

/* Empty state: glow halo behind the illustration + bigger vector */
html.pv-grigotec div.tw-max-w-sm.tw-flex.tw-flex-col.tw-items-center { position: relative; }
html.pv-grigotec div.tw-max-w-sm.tw-flex.tw-flex-col.tw-items-center::before {
    content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 230px; height: 230px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--pv-indigo-rgb),0.35), rgba(var(--pv-emerald-rgb),0.14) 55%, transparent 72%);
    filter: blur(26px); z-index: 0; pointer-events: none;
}
html.pv-grigotec div.tw-max-w-sm div:has(> bit-svg > svg[viewBox="0 18.75 150 112.5"]) {
    width: 132px !important; max-width: 132px !important; height: 132px !important;
}
html.pv-grigotec div.tw-max-w-sm div:has(> bit-svg > svg[viewBox="5.29 4.98 86.89 90.19"]) {
    width: 132px !important; max-width: 132px !important; height: 132px !important;
}
html.pv-grigotec div.tw-max-w-sm div:has(> bit-svg > svg[viewBox="0.22 7 95.71 88"]) {
    width: 132px !important; max-width: 132px !important; height: 132px !important;
}
html.pv-grigotec div.tw-max-w-sm div:has(> bit-svg > svg[viewBox="9 4 83.89 91"]) {
    width: 132px !important; max-width: 132px !important; height: 132px !important;
}

/* Primary buttons (New / New item): gradient glass + glow */
html.pv-grigotec button.tw-bg-primary-500 {
    background-image: linear-gradient(135deg, var(--pv-indigo), var(--pv-emerald)) !important;
    border: 1px solid rgba(var(--pv-white-rgb), 0.18) !important;
    box-shadow: 0 6px 18px rgba(var(--pv-indigo-deep-rgb), 0.35);
}
html.pv-grigotec button.tw-bg-primary-500:hover { filter: brightness(1.08); }

/* Filters panel — rounder glass card */
html.pv-grigotec app-vault-filter .tw-bg-background-alt3 { border-radius: 14px; }

/* Search input focus glow */
html.pv-grigotec input[placeholder="Search vault"]:focus,
html.pv-grigotec input[placeholder*="utare"]:focus {
    box-shadow: 0 0 0 3px rgba(var(--pv-indigo-rgb), 0.25) !important;
}

/* Avatar — gradient ring accent */
html.pv-grigotec bit-avatar {
    box-shadow: 0 0 0 2px rgba(var(--pv-indigo-rgb), 0.65), 0 0 12px rgba(var(--pv-emerald-rgb), 0.4);
    border-radius: 50%;
}

/* Page title — bigger + gradient text */
html.pv-grigotec app-header header h1,
html.pv-grigotec app-header header h2,
html.pv-grigotec app-header header [class*="tw-text-3xl"],
html.pv-grigotec app-header header [class*="tw-text-2xl"] {
    background: linear-gradient(135deg, var(--pv-indigo-soft), var(--pv-emerald-soft)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    font-weight: 800 !important;
}


/* =========================================================================
 * GLASS — signature differentiators (animated bg, refraction, hover, scroll)
 * ========================================================================= */

/* (1) Animated background orbs — slow drift + gentle pulse */
@keyframes pvx-orb-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-32px,26px) scale(1.12); } }
@keyframes pvx-orb-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,-30px) scale(1.10); } }
html.pv-grigotec app-vault::before { animation: pvx-orb-a 17s ease-in-out infinite; }
html.pv-grigotec app-vault::after  { animation: pvx-orb-b 21s ease-in-out infinite; }

/* (2) Refraction — brighter top-left edge highlight on big glass surfaces */
html.pv-grigotec .tw-bg-background-alt,
html.pv-grigotec .tw-bg-background-alt2,
html.pv-grigotec bit-dialog,
html.pv-grigotec app-vault-filter .tw-bg-background-alt3 {
    box-shadow: inset 1.5px 1.5px 0 rgba(var(--pv-white-rgb),0.16), inset -1px -1px 0 rgba(var(--pv-black-rgb),0.12) !important;
}

/* (10) Custom thin gradient scrollbar */
html.pv-grigotec ::-webkit-scrollbar { width: 10px; height: 10px; }
html.pv-grigotec ::-webkit-scrollbar-track { background: transparent; }
html.pv-grigotec ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--pv-indigo-rgb),0.75), rgba(var(--pv-emerald-rgb),0.75));
    border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
html.pv-grigotec ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--pv-indigo), var(--pv-emerald)); background-clip: padding-box;
}
html.pv-grigotec * { scrollbar-color: rgba(var(--pv-indigo-rgb),0.75) transparent; scrollbar-width: thin; }

/* (7) Hover lift + glow on interactive elements */
html.pv-grigotec button.tw-bg-primary-500,
html.pv-grigotec bit-item,
html.pv-grigotec app-vault-filter a,
html.pv-grigotec .pvx-navitem,
html.pv-grigotec .pvx-dropdown .pvx-item {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
html.pv-grigotec button.tw-bg-primary-500:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--pv-indigo-deep-rgb),0.45); }

/* (5) Vault item rows -> translucent glass cards with hover lift */
html.pv-grigotec bit-item,
html.pv-grigotec cdk-virtual-scroll-viewport bit-item,
html.pv-grigotec vault-cipher-row,
html.pv-grigotec [role="listitem"]:has(bit-item) {
    background-color: rgba(var(--pv-glass-rgb),0.5) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--pv-white-rgb),0.08) !important;
    border-radius: 12px !important;
    margin: 6px 4px !important;
}
html.pv-grigotec bit-item:hover,
html.pv-grigotec [role="listitem"]:has(bit-item):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--pv-black-rgb),0.4), 0 0 0 1px rgba(var(--pv-indigo-rgb),0.4) !important;
    background-color: rgba(var(--pv-glass-hover-rgb),0.6) !important;
}

/* (9) Active filter / collection -> gradient highlight + neon accent bar */
html.pv-grigotec app-vault-filter a[class*="active"],
html.pv-grigotec app-vault-filter li.active > a,
html.pv-grigotec [aria-current="page"],
html.pv-grigotec .tw-bg-primary-100 {
    background: linear-gradient(90deg, rgba(var(--pv-indigo-rgb),0.30), rgba(var(--pv-emerald-rgb),0.14)) !important;
    position: relative;
    border-radius: 8px;
}
html.pv-grigotec app-vault-filter a[class*="active"]::before,
html.pv-grigotec [aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
    background: linear-gradient(180deg,var(--pv-indigo),var(--pv-emerald)); border-radius: 2px;
}

/* =========================================================================
 * FULL-WIDTH APP — remove Bitwarden's centered narrow containers
 * (3/4-1/4 vault grid, 4xl settings/tools pages, form container)
 * ========================================================================= */
html.pv-grigotec .tw-max-w-3\/4, html.pv-grigotec .tw-basis-3\/4,
html.pv-grigotec .tw-max-w-1\/4, html.pv-grigotec .tw-basis-1\/4,
html.pv-grigotec .tw-max-w-4xl,
html.pv-grigotec main .tw-container {
    max-width: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
}

/* Send page: stack the 12-col grid -> filter panel full-width on top, list below */
html.pv-grigotec app-send .tw-grid.tw-grid-cols-12 { display: block !important; }
html.pv-grigotec app-send .tw-col-span-3,
html.pv-grigotec app-send .tw-col-span-9 {
    width: 100% !important; max-width: 100% !important; margin-bottom: 10px;
}
html.pv-grigotec app-send .tw-col-span-3 .tw-border { border-radius: 14px !important; }

/* =========================================================================
 * FILTERS -> uniform GRID: max 4 rows per column, equal cells, text fits
 * ========================================================================= */
html.pv-grigotec app-vault > div:has(app-vault-filter) { flex-direction: column !important; }
html.pv-grigotec app-vault > div:has(app-vault-filter) > div:has(app-vault-filter) {
    max-width: 100% !important; width: 100% !important; flex: none !important; padding: 0 !important; margin-bottom: 10px;
}
html.pv-grigotec app-vault-filter > .tw-bg-background-alt:first-child { display: none !important; }
html.pv-grigotec app-vault-filter,
html.pv-grigotec app-vault-filter .tw-bg-background-alt3 { width: 100% !important; max-width: 100% !important; }
html.pv-grigotec app-vault-filter .tw-bg-background-alt3 { border-radius: 14px; padding: 16px 20px !important; }
html.pv-grigotec app-vault-filter input.tw-ps-9 { max-width: 340px; margin-bottom: 16px; }

/* Grid container: equal-width columns, items flow row by row. At full width
 * ~8 columns => the ~20 filter items land in <=4 rows; all cells same size. */
html.pv-grigotec :is(app-vault-filter, app-send) *:has(> .filter) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 12px 16px !important;
    align-content: start;
    justify-items: stretch !important;
    grid-auto-flow: row dense !important;
    width: 100% !important;
}
/* Search box spans the full width on its own row at the top */
html.pv-grigotec :is(app-vault-filter, app-send) *:has(> .filter) > div:first-child:not(.filter) {
    grid-column: 1 / -1 !important;
}
/* Flatten EVERY wrapper (incl. app-filter-section) so each .filter-button
 * becomes an individual grid cell */
html.pv-grigotec .filter,
html.pv-grigotec app-filter-section,
html.pv-grigotec .filter-heading,
html.pv-grigotec .filter-options,
html.pv-grigotec .filter-option { display: contents !important; }
/* .filter-buttons stays the grid CELL (flex) so the main button fills full width */
html.pv-grigotec .filter-buttons {
    display: flex !important; align-items: stretch !important;
    width: 100% !important; padding: 0 !important; margin: 0 !important; gap: 0 !important;
}

/* Hide non-button chrome + plain category labels (keep cells uniform) */
html.pv-grigotec .filter-heading .toggle-button,
html.pv-grigotec .filter bit-menu-trigger,
html.pv-grigotec .filter button:has(> .bwi-ellipsis-v),
html.pv-grigotec .filter-buttons > *:not(.filter-button):not(.toggle-button),
html.pv-grigotec :is(app-vault-filter, app-send) *:has(> .filter) hr,
html.pv-grigotec app-filter-section hr,
html.pv-grigotec .filter hr,
html.pv-grigotec h3.filter-title { display: none !important; }

/* Send page has only 3 type filters -> pack them tight & left-aligned
 * (override the full-width vault grid) */
html.pv-grigotec app-send *:has(> .filter) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px 10px !important;
}
html.pv-grigotec app-send *:has(> .filter) > div:first-child:not(.filter) {
    flex: 1 1 100% !important; width: 100% !important;
}
html.pv-grigotec app-send .filter-buttons { flex: 0 0 auto !important; width: auto !important; }
html.pv-grigotec app-send .filter-button { width: auto !important; min-width: 110px; }
/* "Tipuri" group label -> subtle inline label aligned with the pills */
html.pv-grigotec app-send *:has(> .filter) h3 {
    align-self: center !important;
    margin: 0 4px 0 8px !important; padding: 0 !important;
    font-size: 11px !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .5px; opacity: .55;
    white-space: nowrap;
}

/* Uniform cells: equal size, text ellipsis so everything fits */
html.pv-grigotec .filter-button {
    display: flex !important; align-items: center; gap: 9px;
    justify-self: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 44px; box-sizing: border-box; margin: 0 !important;
    padding: 0 14px !important; border-radius: 10px !important;
    background: rgba(var(--pv-white-rgb),0.06) !important;
    border: 1px solid rgba(var(--pv-white-rgb),0.13) !important;
    overflow: hidden;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
html.pv-grigotec .filter-button i, html.pv-grigotec .filter-button .bwi { flex: 0 0 auto; }
html.pv-grigotec .filter-button span, html.pv-grigotec .filter-button h3 {
    margin: 0 !important; font-size: 13px !important; font-weight: 500 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto;
}
html.pv-grigotec .filter-button:hover { background: rgba(var(--pv-indigo-rgb),0.20) !important; border-color: rgba(var(--pv-indigo-rgb),0.5) !important; transform: translateY(-1px); }
html.pv-grigotec .filter-button.active, html.pv-grigotec .filter-button:has(h3.active) {
    background: linear-gradient(135deg, rgba(var(--pv-indigo-rgb),0.45), rgba(var(--pv-emerald-rgb),0.30)) !important; border-color: rgba(var(--pv-white-rgb),0.28) !important;
}
html.pv-grigotec .filter-button h3.active { color: var(--pv-white) !important; }

/* =========================================================================
 * GENERATOR PAGE — glass pill tabs (+icons), chip options, glass tip card
 * (scoped to glass; default theme keeps native Bitwarden look)
 * ========================================================================= */
/* Tabs (bit-toggle-group) -> separate glass pills, gradient when active */
html.pv-grigotec bit-toggle-group { gap: 10px !important; background: transparent !important; border: 0 !important; }
html.pv-grigotec bit-toggle { border-radius: 14px !important; min-width: 0 !important; }
html.pv-grigotec bit-toggle > label {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100% !important; box-sizing: border-box; margin: 0 !important;
    padding: 13px 16px !important;
    border-radius: 14px !important; border: 1px solid rgba(var(--pv-white-rgb),0.14) !important;
    background: rgba(var(--pv-white-rgb),0.05) !important; color: rgba(var(--pv-white-rgb),0.72) !important;
    font-weight: 600 !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
html.pv-grigotec bit-toggle > label:hover {
    background: rgba(var(--pv-indigo-rgb),0.18) !important; border-color: rgba(var(--pv-indigo-rgb),0.45) !important; color: var(--pv-white) !important;
}
html.pv-grigotec bit-toggle input:checked + label {
    background: linear-gradient(135deg, var(--pv-indigo), var(--pv-emerald)) !important;
    border-color: transparent !important; color: var(--pv-white) !important;
    box-shadow: 0 8px 22px rgba(var(--pv-indigo-rgb),0.42) !important;
}
html.pv-grigotec bit-toggle > label::before {
    content: ""; width: 16px; height: 16px; flex: 0 0 auto; opacity: .92;
    background-position: center; background-repeat: no-repeat; background-size: contain;
}
html.pv-grigotec bit-toggle-group bit-toggle:nth-of-type(1) > label::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M10.85%2012.15%2021%202M18%205l2%202M15%208l2%202%22%2F%3E%3C%2Fsvg%3E"); }
html.pv-grigotec bit-toggle-group bit-toggle:nth-of-type(2) > label::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); }
html.pv-grigotec bit-toggle-group bit-toggle:nth-of-type(3) > label::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E"); }

/* Include options (A-Z / a-z / 0-9 / symbols) -> selectable glass chips */
html.pv-grigotec bit-form-control:has(input[formcontrolname="uppercase"]),
html.pv-grigotec bit-form-control:has(input[formcontrolname="lowercase"]),
html.pv-grigotec bit-form-control:has(input[formcontrolname="number"]),
html.pv-grigotec bit-form-control:has(input[formcontrolname="special"]) {
    display: inline-flex !important; margin: 0 10px 10px 0 !important;
}
html.pv-grigotec bit-form-control:has(input[formcontrolname="uppercase"]) > label,
html.pv-grigotec bit-form-control:has(input[formcontrolname="lowercase"]) > label,
html.pv-grigotec bit-form-control:has(input[formcontrolname="number"]) > label,
html.pv-grigotec bit-form-control:has(input[formcontrolname="special"]) > label {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 9px 18px !important; margin: 0 !important;
    border-radius: 999px !important; border: 1px solid rgba(var(--pv-white-rgb),0.14) !important;
    background: rgba(var(--pv-white-rgb),0.05) !important; color: rgba(var(--pv-white-rgb),0.82) !important;
    font-weight: 600 !important; cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
html.pv-grigotec bit-form-control:has(input[formcontrolname="uppercase"]) > label:hover,
html.pv-grigotec bit-form-control:has(input[formcontrolname="lowercase"]) > label:hover,
html.pv-grigotec bit-form-control:has(input[formcontrolname="number"]) > label:hover,
html.pv-grigotec bit-form-control:has(input[formcontrolname="special"]) > label:hover {
    background: rgba(var(--pv-indigo-rgb),0.18) !important; border-color: rgba(var(--pv-indigo-rgb),0.45) !important; color: var(--pv-white) !important;
}
html.pv-grigotec bit-form-control:has(input[formcontrolname="uppercase"]) > label:has(input:checked),
html.pv-grigotec bit-form-control:has(input[formcontrolname="lowercase"]) > label:has(input:checked),
html.pv-grigotec bit-form-control:has(input[formcontrolname="number"]) > label:has(input:checked),
html.pv-grigotec bit-form-control:has(input[formcontrolname="special"]) > label:has(input:checked) {
    background: linear-gradient(135deg, rgba(var(--pv-indigo-rgb),0.95), rgba(var(--pv-emerald-rgb),0.85)) !important;
    border-color: transparent !important; color: var(--pv-white) !important;
    box-shadow: 0 5px 16px rgba(var(--pv-indigo-rgb),0.40) !important;
}
/* visually hide the native checkbox inside the chips (label still toggles it) */
html.pv-grigotec bit-form-control:has(input[formcontrolname="uppercase"]) input[type="checkbox"],
html.pv-grigotec bit-form-control:has(input[formcontrolname="lowercase"]) input[type="checkbox"],
html.pv-grigotec bit-form-control:has(input[formcontrolname="number"]) input[type="checkbox"],
html.pv-grigotec bit-form-control:has(input[formcontrolname="special"]) input[type="checkbox"] {
    position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important;
    margin: 0 !important; padding: 0 !important; pointer-events: none;
}

/* "Quickly create passwords" banner (bit-spotlight) -> glass tip card */
html.pv-grigotec bit-spotlight > div {
    background: linear-gradient(135deg, rgba(var(--pv-indigo-rgb),0.16), rgba(var(--pv-emerald-rgb),0.08)) !important;
    border: 1px solid rgba(var(--pv-indigo-rgb),0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(var(--pv-black-rgb),0.28), inset 0 1px 0 rgba(var(--pv-white-rgb),0.06) !important;
}
html.pv-grigotec bit-spotlight h2 { color: var(--pv-white) !important; }
html.pv-grigotec bit-spotlight p, html.pv-grigotec bit-spotlight p span { color: rgba(var(--pv-white-rgb),0.82) !important; }

/* =========================================================================
 * IMPORT / EXPORT — glass dropdowns (ng-select), glass callout, buttons
 * (also improves every bit-select app-wide; scoped to glass theme)
 * ========================================================================= */
/* ng-select trigger */
html.pv-grigotec .ng-select .ng-select-container {
    background: rgba(var(--pv-white-rgb),0.05) !important;
    border: 1px solid rgba(var(--pv-white-rgb),0.14) !important;
    border-radius: 10px !important;
    color: var(--pv-white) !important;
    min-height: 46px !important;
}
html.pv-grigotec .ng-select.ng-select-focused .ng-select-container,
html.pv-grigotec .ng-select .ng-select-container:hover {
    border-color: rgba(var(--pv-indigo-rgb),0.55) !important;
    box-shadow: 0 0 0 3px rgba(var(--pv-indigo-rgb),0.18) !important;
}
html.pv-grigotec .ng-select .ng-value,
html.pv-grigotec .ng-select .ng-placeholder,
html.pv-grigotec .ng-select .ng-input > input { color: var(--pv-white) !important; }
html.pv-grigotec .ng-select .ng-arrow-wrapper .ng-arrow { border-top-color: rgba(var(--pv-white-rgb),0.65) !important; }
/* dropdown panel (ng-select appends it to <body>, still under html.pv-grigotec) */
html.pv-grigotec .ng-dropdown-panel {
    background: rgba(var(--pv-dropdown-rgb),0.98) !important;
    border: 1px solid rgba(var(--pv-white-rgb),0.14) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 44px rgba(var(--pv-black-rgb),0.5) !important;
    overflow: hidden;
}
html.pv-grigotec .ng-dropdown-panel .ng-option {
    background: transparent !important; color: rgba(var(--pv-white-rgb),0.85) !important;
}
html.pv-grigotec .ng-dropdown-panel .ng-option.ng-option-marked,
html.pv-grigotec .ng-dropdown-panel .ng-option:hover {
    background: rgba(var(--pv-indigo-rgb),0.25) !important; color: var(--pv-white) !important;
}
html.pv-grigotec .ng-dropdown-panel .ng-option.ng-option-selected {
    background: linear-gradient(90deg, rgba(var(--pv-indigo-rgb),0.35), rgba(var(--pv-emerald-rgb),0.18)) !important; color: var(--pv-white) !important;
}

/* Export warning (bit-callout) -> glass card */
html.pv-grigotec bit-callout > aside {
    background: linear-gradient(135deg, rgba(var(--pv-indigo-rgb),0.16), rgba(var(--pv-emerald-rgb),0.07)) !important;
    border: 1px solid rgba(var(--pv-indigo-rgb),0.40) !important;
    border-radius: 14px !important;
    color: var(--pv-white) !important;
    box-shadow: 0 8px 26px rgba(var(--pv-black-rgb),0.25) !important;
}
html.pv-grigotec bit-callout > aside i.bwi { color: var(--pv-indigo-soft) !important; }
html.pv-grigotec bit-callout > aside header { color: var(--pv-white) !important; }

/* File-chooser (secondary pill) -> glass on dark */
html.pv-grigotec bit-form-field button[buttontype="secondary"],
html.pv-grigotec tools-import button[buttontype="secondary"] {
    background: rgba(var(--pv-white-rgb),0.05) !important;
    border-color: rgba(var(--pv-indigo-rgb),0.55) !important;
    color: var(--pv-white) !important;
}
html.pv-grigotec bit-form-field button[buttontype="secondary"]:hover,
html.pv-grigotec tools-import button[buttontype="secondary"]:hover {
    background: rgba(var(--pv-indigo-rgb),0.20) !important; border-color: rgba(var(--pv-indigo-rgb),0.8) !important;
}

/* =========================================================================
 * REPORTS PAGE — dark-glass report illustrations + full-width centered grid
 * ========================================================================= */
/* Grid: fill the full width with 3 equal columns (was inline-grid 3x288 stuck) */
html.pv-grigotec app-report-list .tw-inline-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 360px)) !important;
    justify-content: center !important;
    align-content: start !important;
    width: 100% !important;
    gap: 12px !important;
}

html.pv-grigotec bit-svg:has(> svg[viewBox="0.7 2.4 79.3 77.2"]) > svg { display: none !important; }
html.pv-grigotec bit-svg:has(> svg[viewBox="0.7 2.4 79.3 77.2"]) {
    width: 100% !important; height: 100% !important; display: block !important;
    background: url('../images/report-exposed.svg?v=3') center / contain no-repeat;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="0 1.49 96 94.02"]) > svg { display: none !important; }
html.pv-grigotec bit-svg:has(> svg[viewBox="0 1.49 96 94.02"]) {
    width: 100% !important; height: 100% !important; display: block !important;
    background: url('../images/report-reused.svg?v=3') center / contain no-repeat;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="0 0.99 80 73.35"]) > svg { display: none !important; }
html.pv-grigotec bit-svg:has(> svg[viewBox="0 0.99 80 73.35"]) {
    width: 100% !important; height: 100% !important; display: block !important;
    background: url('../images/report-weak.svg?v=3') center / contain no-repeat;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="0.4 10.07 79.2 60"]) > svg { display: none !important; }
html.pv-grigotec bit-svg:has(> svg[viewBox="0.4 10.07 79.2 60"]) {
    width: 100% !important; height: 100% !important; display: block !important;
    background: url('../images/report-unsecure.svg?v=3') center / contain no-repeat;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="4.72 12.85 92 80"]) > svg { display: none !important; }
html.pv-grigotec bit-svg:has(> svg[viewBox="4.72 12.85 92 80"]) {
    width: 100% !important; height: 100% !important; display: block !important;
    background: url('../images/report-2fa.svg?v=3') center / contain no-repeat;
}
html.pv-grigotec bit-svg:has(> svg[viewBox="11.6 3.33 56.67 73.33"]) > svg { display: none !important; }
html.pv-grigotec bit-svg:has(> svg[viewBox="11.6 3.33 56.67 73.33"]) {
    width: 100% !important; height: 100% !important; display: block !important;
    background: url('../images/report-breach.svg?v=3') center / contain no-repeat;
}

/* =========================================================================
 * SETTINGS — glass, consistent with Generator/Import/Export
 * (full-width already handled by the .tw-max-w-4xl override)
 * ========================================================================= */
/* Settings section nav (My account / Security / Preferences / ...) -> glass panel */
html.pv-grigotec nav.tw-bg-background-alt3 {
    background: rgba(var(--pv-white-rgb),0.04) !important;
    border: 1px solid rgba(var(--pv-white-rgb),0.10) !important;
    border-radius: 14px !important;
    padding: 6px !important;
}
html.pv-grigotec nav.tw-bg-background-alt3 a {
    border-radius: 9px !important;
    transition: background-color .15s ease, color .15s ease;
}
html.pv-grigotec nav.tw-bg-background-alt3 a:hover {
    background: rgba(var(--pv-indigo-rgb),0.16) !important; color: var(--pv-white) !important;
}
html.pv-grigotec nav.tw-bg-background-alt3 a[aria-current="page"],
html.pv-grigotec nav.tw-bg-background-alt3 a.tw-bg-secondary-100,
html.pv-grigotec nav.tw-bg-background-alt3 a[class*="active"] {
    background: linear-gradient(90deg, rgba(var(--pv-indigo-rgb),0.42), rgba(var(--pv-emerald-rgb),0.20)) !important;
    color: var(--pv-white) !important;
    position: relative;
}

/* Checkboxes + radios -> glass; gradient fill when active */
html.pv-grigotec input[bitcheckbox],
html.pv-grigotec bit-radio-button input[type="radio"] {
    border-color: rgba(var(--pv-white-rgb),0.32) !important;
    background-color: rgba(var(--pv-white-rgb),0.06) !important;
}
html.pv-grigotec input[bitcheckbox]:checked,
html.pv-grigotec bit-radio-button input[type="radio"]:checked {
    border-color: transparent !important;
    background-color: var(--pv-indigo) !important;
    background-image: linear-gradient(135deg, var(--pv-indigo), var(--pv-emerald)) !important;
}

/* Radio option label spacing on dark */
html.pv-grigotec bit-radio-button label { color: rgba(var(--pv-white-rgb),0.9) !important; }

/* =========================================================================
 * Settings/Security sub-tabs: keep ONLY the native top indicator
 * (drop my aria-current gradient fill + left ::before bar on tabs)
 * ========================================================================= */
html.pv-grigotec .tw-group\/tab[aria-current="page"] { background: none !important; }
html.pv-grigotec .tw-group\/tab[aria-current="page"]::before { content: none !important; }

/* Error / toast text -> dark & readable (was low-contrast gray) */
html.pv-grigotec bit-toast .toast-title,
html.pv-grigotec bit-toast .toast-message,
html.pv-grigotec .toast-container .toast-title,
html.pv-grigotec .toast-container .toast-message,
html.pv-grigotec bit-toast p,
html.pv-grigotec bit-toast span:not([class*="bwi"]) {
    color: var(--pv-on-toast) !important;
}

/* =========================================================================
 * MMA THEME — sepia / cream (global style_variant = "mma")
 * Toggled by scripts/pv-theme.js, which adds class .pv-mma to <html> based
 * on the admin-selected global style fetched from /api/theme-style.
 * A warm LIGHT theme that KEEPS Bitwarden's native left sidebar (unlike
 * glass, which hides it and builds #pvx-topnav) — it just restyles it.
 * DESIGN: minimal boxing. Depth comes from the warm palette (sidebar a shade
 * deeper than the canvas), NOT from borders + shadows on every surface (that
 * made the earlier "paper" variant look busy). One accent: terracotta, used
 * only on active/hover/focus. Everything scoped under html.pv-mma so the
 * default look AND the glass theme stay untouched.
 * ========================================================================= */

/* Page canvas — warm cream. */
/* --- Design tokens (single source of truth; see design/DESIGN-sepia.md) --- */
html.pv-mma {
    /* Accent — terracotta */
    --pv-tc-300: #d99a5b; --pv-tc-500: #b45309; --pv-tc-600: #92400e; --pv-tc-700: #78350f;
    --pv-tc-grad-1: #b8560c; --pv-tc-grad-2: #983f07;
    --pv-tc-rgb: 180, 83, 9; --pv-tc-deep-rgb: 154, 67, 8;
    /* Neutrals — cream */
    --pv-cream-canvas: #faf6ee; --pv-cream-surface: #fffdf7; --pv-cream-panel: #f4ede0;
    --pv-cream-alt: #efe7d6; --pv-sand-hover: #ece1cf; --pv-sand-active: #efdcc2;
    /* Ink — text */
    --pv-ink-strong: #26201a; --pv-ink-body: #3a2f24; --pv-ink-muted: #8a7a68;
    --pv-ink-icon: #a58a6f; --pv-ink-icon2: #b4936f; --pv-ink-label: #6b5844; --pv-ink-label2: #a07c55;
    --pv-on-accent: #fdf6ea; --pv-ink-rgb: 58, 47, 36;
    /* Radius */
    --pv-radius-row: 10px; --pv-radius-pill: 11px; --pv-radius-input: 12px;
    --pv-radius-dialog: 14px; --pv-radius-card: 16px;
}

html.pv-mma,
html.pv-mma body {
    background: var(--pv-cream-canvas) !important;
}

/* Warm tint over Bitwarden's LIGHT base (pv-theme.js forces theme_light for
 * sepia). Newer Bitwarden paints surfaces from SEMANTIC tokens
 * (--color-bg-*, e.g. .tw-bg-background -> var(--color-bg-primary)) and text
 * from legacy RGB-triplet tokens (--color-text-*). We override BOTH families,
 * but deliberately DON'T touch the *contrast* tokens (they stay white) so text
 * on terracotta buttons/badges keeps its light color. */
html.pv-mma {
    /* Surfaces -> warm cream (semantic bg tokens drive .tw-bg-background*). */
    --color-bg-primary: var(--pv-cream-surface) !important;        /* content + cards */
    --color-bg-secondary: var(--pv-cream-panel) !important;
    --color-bg-tertiary: var(--pv-cream-surface) !important;        /* .tw-bg-background-alt */
    --color-bg-quaternary: var(--pv-cream-alt) !important;
    --color-bg-brand-strong: var(--pv-cream-panel) !important;    /* sidebar + filter panel (alt3) */
    --color-bg-brand: var(--pv-cream-alt) !important;           /* alt2 accent surface */
    --color-bg-brand-soft: rgba(var(--pv-tc-rgb), 0.12) !important;
    --color-bg-brand-softer: rgba(var(--pv-tc-rgb), 0.06) !important;
    --color-bg-brand-medium: rgba(var(--pv-tc-rgb), 0.18) !important;
    --color-bg-hover: rgba(var(--pv-tc-rgb), 0.07) !important;
    --color-hover-default: rgba(var(--pv-tc-rgb), 0.10) !important;  /* row/item hover -> warm, not stock blue */

    /* Sidebar — Bitwarden's side-nav is a DEDICATED panel with its OWN token
     * family (--color-sidenav-*), hardcoded dark (#212529) even in light mode;
     * that's why the bg-* overrides never touched it. Recolor it to the cream
     * palette so it matches the rest, with terracotta accents on hover/active. */
    --color-sidenav-background: var(--pv-cream-panel) !important;   /* cream, matches filter panel */
    --color-sidenav-text: var(--pv-ink-body) !important;          /* warm brown */
    --color-sidenav-item-hover: rgba(var(--pv-tc-rgb), 0.12) !important;/* soft terracotta hover wash */
    --color-sidenav-active-item: var(--pv-tc-500) !important;   /* terracotta (pill fallback) */
    --color-admin-sidenav-background: var(--pv-cream-panel) !important;
    --color-admin-sidenav-text: var(--pv-ink-body) !important;
    --color-admin-sidenav-item-hover: var(--pv-sand-hover) !important;
    --color-admin-sidenav-active-item: var(--pv-sand-active) !important;

    /* Accent -> terracotta (brand fg + legacy primary ramp for buttons/links). */
    --color-fg-brand: var(--pv-tc-500) !important;
    --color-fg-brand-soft: var(--pv-tc-500) !important;
    --color-fg-brand-strong: var(--pv-tc-700) !important;
    --color-primary-300: 217 154 91 !important;     /* var(--pv-tc-300) */
    --color-primary-500: 180 83 9 !important;       /* var(--pv-tc-500) terracotta */
    --color-primary-600: 146 64 14 !important;      /* var(--pv-tc-600) */
    --color-primary-700: 120 53 15 !important;      /* var(--pv-tc-700) */

    /* Body text -> warm brown (legacy triplets drive .tw-text-main/muted;
     * fg-body/heading drive newer components). Contrast tokens left untouched. */
    --color-text-main: 58 47 36 !important;         /* var(--pv-ink-body) */
    --color-text-muted: 138 122 104 !important;     /* var(--pv-ink-muted) */
    --color-text-alt2: 138 122 104 !important;
    --color-fg-body: var(--pv-ink-body) !important;
    --color-fg-body-subtle: var(--pv-ink-muted) !important;
    --color-fg-heading: var(--pv-ink-strong) !important;
}

/* --- SIDEBAR: FLOATING PANEL (sepia) -------------------------------------
 * The native side-nav is lifted off the cream canvas as a rounded, shadowed
 * card (inset from the edges), with terracotta "pill" active rows. Bitwarden
 * styles it via the sidenav token family + Tailwind utilities on bit-nav-item;
 * we target the .tw-bg-bg-sidenav container (the panel) and the bit-nav-item
 * anchors (rows). Icons are .bwi font glyphs -> recolored via `color`. */

/* Keep Bitwarden's NATIVE full-height sidebar layout intact — that's what
 * pins the product switcher (Password Manager / Admin Console) to the bottom
 * and keeps collapse working. Forcing height/overflow/inset here previously
 * broke the flex chain (switcher floated up, stray scrollbar, split look), so
 * we now ONLY recolor (cream, via the sidenav tokens above) + add one soft
 * right-edge shadow the same size as the active pill's (0 .. 16px blur). */
html.pv-mma app-side-nav,
html.pv-mma app-layout nav { border-right: 0 !important; }

/* Full-height FLOATING CARD — scoped to the NAV element ONLY. The class
 * .tw-bg-bg-sidenav is on THREE elements (the nav container, the logo link, and
 * the bottom `div.tw-mt-auto` that holds the product switcher); styling the bare
 * class forced all three to full height and broke the layout. The nav is
 * `tw-flex-col` and the bottom section already has `tw-mt-auto`, so once the nav
 * has a definite full height the switcher pins to the bottom natively while the
 * nav items stay at the top. overflow:hidden clips the rounded corners (the few
 * fixed sidebar items always fit, so nothing is cut off). */
html.pv-mma nav.tw-bg-bg-sidenav {
    height: calc(100vh - 20px) !important;
    margin: 10px 8px 10px 10px !important;
    box-sizing: border-box !important;
    border-radius: var(--pv-radius-card) !important;
    box-shadow: 0 6px 16px rgba(var(--pv-ink-rgb), 0.28) !important;
    overflow: hidden !important;
}

/* Hide the sidebar scrollbar (the flex-1 area still scrolls if it needs to). */
html.pv-mma app-side-nav *::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
html.pv-mma app-side-nav * { scrollbar-width: none !important; }

/* Collapse / expand via the bottom ARROW (app-toggle-width) — animate the
 * width change of the sidebar so it glides instead of snapping, fade the labels
 * as they hide/show, and give the arrow itself a smooth rotation + hover feel. */
/* Confirmed via DOM: the sidebar <nav> is the element that resizes (64px
 * collapsed <-> full expanded). Animate ITS width, plus the inner label rows /
 * anchors (they go ~270px <-> 16px) so the text + icons glide instead of
 * snapping. Width transitions need concrete px on both ends — this nav has
 * them, so it tweens. */
html.pv-mma nav.tw-bg-bg-sidenav,
html.pv-mma nav.tw-sticky.tw-flex-col,
html.pv-mma app-side-nav,
html.pv-mma bit-side-nav,
html.pv-mma bit-side-nav > div,
html.pv-mma bit-side-nav > div > div {
    transition: width .3s cubic-bezier(.4,0,.2,1),
                min-width .3s cubic-bezier(.4,0,.2,1),
                max-width .3s cubic-bezier(.4,0,.2,1),
                flex-basis .3s cubic-bezier(.4,0,.2,1) !important;
}
html.pv-mma nav.tw-bg-bg-sidenav .tw-flex.tw-items-center {
    transition: width .3s cubic-bezier(.4,0,.2,1),
                padding .3s cubic-bezier(.4,0,.2,1) !important;
}
html.pv-mma bit-nav-item span,
html.pv-mma bit-nav-group span,
html.pv-mma navigation-product-switcher span {
    transition: opacity .18s ease !important;
}
/* The collapse arrow: smooth rotation on toggle + a little hover feedback. */
html.pv-mma app-toggle-width button,
html.pv-mma app-toggle-width [class*="bwi"],
html.pv-mma app-toggle-width svg {
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
}
html.pv-mma app-toggle-width button:hover { transform: scale(1.12); }
html.pv-mma app-toggle-width button:active { transform: scale(0.94); }

/* Disable DRAG-to-resize of the sidebar: the drag handle is the element with
 * the col-resize cursor — kill its pointer events + cursor so it can't be
 * grabbed. The collapse ARROW is a separate button and stays fully clickable
 * (re-enabled explicitly in case it nests inside the handle). */
html.pv-mma .tw-cursor-col-resize {
    pointer-events: none !important;
    cursor: default !important;
}
html.pv-mma .tw-cursor-col-resize button,
html.pv-mma app-toggle-width button { pointer-events: auto !important; }

/* Muted warm icons (Bitwarden puts the row bg on inner divs, not an <a>). */
html.pv-mma bit-nav-item .bwi,
html.pv-mma bit-nav-group > button .bwi {
    color: var(--pv-ink-icon) !important;
    transition: color .16s ease;
}
html.pv-mma bit-nav-item:hover .bwi,
html.pv-mma bit-nav-group > button:hover .bwi { color: var(--pv-tc-500) !important; }

/* HOVER + ACTIVE pills share ONE full-width geometry so every hover matches the
 * active (Seifuri) pill exactly in size + position. The row bg lives on inner
 * divs: active = .tw-bg-bg-sidenav-active-item, hover = the class token
 * `hover:tw-bg-bg-sidenav-item-hover` (matched via [class~=] to dodge escaping).
 * The old rules targeted a non-existent <a> + added margin/translateX, which is
 * what made the hover pill narrow and shifted left. */
html.pv-mma .tw-bg-bg-sidenav-active-item,
html.pv-mma [class~="hover:tw-bg-bg-sidenav-item-hover"] {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--pv-radius-pill) !important;
    transition: background-color .16s ease !important;
}
/* Hover wash — soft terracotta, full width. */
html.pv-mma [class~="hover:tw-bg-bg-sidenav-item-hover"]:hover {
    background-color: rgba(var(--pv-tc-rgb), 0.12) !important;
}
/* Active — SOLID terracotta pill with soft glow + cream text/icon. */
html.pv-mma .tw-bg-bg-sidenav-active-item {
    background: linear-gradient(135deg, var(--pv-tc-grad-1), var(--pv-tc-grad-2)) !important;
    box-shadow: 0 6px 16px rgba(var(--pv-tc-deep-rgb), 0.36) !important;
    font-weight: 650 !important;
}
html.pv-mma .tw-bg-bg-sidenav-active-item,
html.pv-mma .tw-bg-bg-sidenav-active-item * {
    color: var(--pv-on-accent) !important;
    fill: var(--pv-on-accent) !important;
}

/* Header / top bar — warm hairline bottom border only. */
html.pv-mma header,
html.pv-mma app-header {
    border-bottom: 1px solid rgba(var(--pv-ink-rgb), 0.10);
}

/* Dialogs / modals — the ONE place we keep a real border + soft shadow. */
html.pv-mma bit-dialog .tw-bg-background,
html.pv-mma bit-dialog {
    border: 1px solid rgba(var(--pv-ink-rgb), 0.12);
    box-shadow: 0 6px 16px rgba(var(--pv-ink-rgb), 0.22);
    border-radius: var(--pv-radius-dialog);
}

/* Primary buttons — solid terracotta (crisp, no gradient). */
html.pv-mma .tw-bg-primary-500,
html.pv-mma button.tw-bg-primary-500 {
    background-color: var(--pv-tc-500) !important;
    background-image: none !important;
    border: 1px solid var(--pv-tc-600) !important;
    color: var(--pv-cream-surface) !important;
}
html.pv-mma button.tw-bg-primary-500:hover { background-color: var(--pv-tc-600) !important; }

/* Form inputs — cream fill, warm outline, terracotta focus. */
html.pv-mma input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.pv-mma textarea,
html.pv-mma select {
    background-color: var(--pv-cream-surface) !important;
    color: var(--pv-ink-body) !important;
}
/* Bitwarden's Material notched outline recolored to warm; terracotta on focus. */
html.pv-mma bit-form-field .tw-absolute.tw-top-0,
html.pv-mma bit-form-field .tw-absolute.tw-top-0 * {
    border-color: rgba(var(--pv-ink-rgb), 0.20) !important;
}
html.pv-mma bit-form-field:focus-within .tw-absolute.tw-top-0,
html.pv-mma bit-form-field:focus-within .tw-absolute.tw-top-0 * {
    border-color: var(--pv-tc-500) !important;
}
html.pv-mma bit-form-field label,
html.pv-mma bit-label { color: var(--pv-ink-label) !important; }

/* Vault item rows — borderless; warm hover tint only (no per-row box). */
html.pv-mma bit-item,
html.pv-mma [role="listitem"]:has(bit-item) {
    border-radius: var(--pv-radius-row) !important;
    transition: background-color .15s ease;
}
html.pv-mma bit-item:hover,
html.pv-mma [role="listitem"]:has(bit-item):hover {
    background-color: rgba(var(--pv-tc-rgb), 0.06) !important;
}

/* Active filter / collection — warm tint. */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) a[class*="active"],
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) li.active > a,
html.pv-mma .tw-bg-primary-100 {
    background-color: rgba(var(--pv-tc-rgb), 0.14) !important;
    color: var(--pv-tc-700) !important;
    border-radius: 8px;
}

/* Avatar — subtle terracotta ring. */
html.pv-mma bit-avatar {
    box-shadow: 0 0 0 2px rgba(var(--pv-tc-rgb), 0.30);
    border-radius: 50%;
}

/* Search input focus glow. */
html.pv-mma input[placeholder="Search vault"]:focus,
html.pv-mma input[placeholder*="utare"]:focus {
    box-shadow: 0 0 0 3px rgba(var(--pv-tc-rgb), 0.16) !important;
}

/* Radios — terracotta when checked. */
html.pv-mma bit-radio-button input[type="radio"]:checked {
    border-color: var(--pv-tc-500) !important;
    background-color: var(--pv-tc-500) !important;
    background-image: none !important;
}
/* Checkboxes — NEUTRAL border globally (no colored edge). The visible box +
 * border are drawn on input::before (not the input's own border), and the
 * check on ::after — so we override ::before's border. Terracotta fill on the
 * box is kept; only the colored EDGE is neutralized (matches the unchecked
 * secondary border in both states, incl. hover). */
html.pv-mma input[bitcheckbox]:checked::before,
html.pv-mma input[bitcheckbox]:checked:hover::before,
html.pv-mma input[bitcheckbox]:indeterminate::before,
html.pv-mma input[bitcheckbox]:indeterminate:hover::before {
    border-color: rgba(var(--pv-ink-rgb),0.30) !important;
}

/* Subtle warm scrollbar. */
html.pv-mma ::-webkit-scrollbar { width: 10px; height: 10px; }
html.pv-mma ::-webkit-scrollbar-track { background: transparent; }
html.pv-mma ::-webkit-scrollbar-thumb {
    background: rgba(var(--pv-tc-rgb), 0.30);
    border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
html.pv-mma ::-webkit-scrollbar-thumb:hover { background: rgba(var(--pv-tc-rgb), 0.55); background-clip: padding-box; }
html.pv-mma * { scrollbar-color: rgba(var(--pv-tc-rgb), 0.35) transparent; scrollbar-width: thin; }

/* =========================================================================
 * PAGE: VAULT — "WARM EDITORIAL" (sepia only)
 * Turns the stock two-box vault page into a warm card dashboard. Selectors are
 * grounded in the live DOM: app-vault-header > app-header > h1 (title);
 * div.tw-basis-1/4 > app-vault-filter (filters); div.tw-basis-3/4 >
 * app-vault-items / bit-no-items (list / empty state); app-onboarding.
 * ========================================================================= */

/* --- Header: editorial serif title ------------------------------------- */
html.pv-mma app-vault-header h1,
html.pv-mma app-header header h1 {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    color: var(--pv-ink-body) !important;
    letter-spacing: -0.015em !important;
}

/* --- Primary CTA (Nou / Element nou): prominent terracotta pill ---------- */
html.pv-mma button.tw-bg-primary-500 {
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(var(--pv-tc-rgb), 0.28) !important;
}

/* --- Onboarding panel -> soft warm card --------------------------------- */
html.pv-mma app-onboarding details {
    border-radius: var(--pv-radius-dialog) !important;
    border: 1px solid rgba(var(--pv-ink-rgb), 0.08) !important;
    box-shadow: 0 4px 12px rgba(var(--pv-ink-rgb), 0.08) !important;
    overflow: hidden;
}

/* --- Filter panel -> ONE floating cream card ---------------------------- */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) {
    display: block !important;
    background: var(--pv-cream-surface) !important;
    border-radius: var(--pv-radius-card) !important;
    border: 1px solid rgba(var(--pv-ink-rgb), 0.07) !important;
    box-shadow: 0 6px 16px rgba(var(--pv-ink-rgb), 0.12) !important;
    overflow: hidden !important;
}
/* Drop the native box border/bg on the wrapper levels so we get a single card
 * (keeps deeper elements — inputs, rows — untouched). */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) > div,
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) > div > div {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* "FILTRE" label -> small-caps warm heading. */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .tw-uppercase {
    background: transparent !important;
    color: var(--pv-ink-label2) !important;
    letter-spacing: .14em !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
/* Filter icons (collections / folders) -> warm; terracotta when active. */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi,
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) bit-svg { color: var(--pv-ink-icon2) !important; }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) [aria-current="page"] .bwi,
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) a:hover .bwi { color: var(--pv-tc-500) !important; }

/* --- Search -> prominent rounded warm bar ------------------------------- */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) input:not([type="checkbox"]):not([type="radio"]) {
    background: var(--pv-cream-canvas) !important;
    border: 1px solid rgba(var(--pv-ink-rgb), 0.12) !important;
    border-radius: var(--pv-radius-input) !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 14px !important;
}
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) input:focus {
    border-color: var(--pv-tc-500) !important;
    box-shadow: 0 0 0 3px rgba(var(--pv-tc-rgb), 0.16) !important;
}


/* --- Empty state -> FULLY CUSTOM sepia illustration (stock art removed) -- */
html.pv-mma bit-no-items { position: relative; text-align: center; }
/* Remove the stock (blue) illustration AND collapse its wrapper div so it
 * leaves no empty gap above the text (targets the tight direct wrapper via
 * :has(> …); buttons aren't divs, so the "+" CTA icon is untouched). */
html.pv-mma bit-no-items svg,
html.pv-mma bit-no-items bit-svg,
html.pv-mma bit-no-items div:has(> bit-svg),
html.pv-mma bit-no-items div:has(> svg) { display: none !important; }
/* Drop in our own safe illustration + warm halo where the art used to be. */
html.pv-mma bit-no-items::before {
    content: ""; display: block; width: 210px; height: 172px; margin: 0 auto 12px;
    background:
        url('../images/empty-vault-sepia.svg') center top / 190px no-repeat,
        radial-gradient(circle at 50% 46%, rgba(var(--pv-tc-rgb),0.15), rgba(var(--pv-tc-rgb),0.04) 56%, transparent 72%) center / 240px no-repeat;
}
/* Per-context empty-state art (keyed by the stock illustration's viewBox). */
html.pv-mma bit-no-items:has(svg[viewBox="5.29 4.98 86.89 90.19"])::before {
    background: url('../images/empty-favorites-sepia.svg') center top / 190px no-repeat, radial-gradient(circle at 50% 46%, rgba(var(--pv-tc-rgb),0.15), rgba(var(--pv-tc-rgb),0.04) 56%, transparent 72%) center / 240px no-repeat;
}
html.pv-mma bit-no-items:has(svg[viewBox="0.22 7 95.71 88"])::before {
    background: url('../images/empty-trash-sepia.svg') center top / 190px no-repeat, radial-gradient(circle at 50% 46%, rgba(var(--pv-tc-rgb),0.15), rgba(var(--pv-tc-rgb),0.04) 56%, transparent 72%) center / 240px no-repeat;
}
html.pv-mma bit-no-items:has(svg[viewBox="9 4 83.89 91"])::before {
    background: url('../images/empty-send-sepia.svg') center top / 190px no-repeat, radial-gradient(circle at 50% 46%, rgba(var(--pv-tc-rgb),0.15), rgba(var(--pv-tc-rgb),0.04) 56%, transparent 72%) center / 240px no-repeat;
}

/* =========================================================================
 * VAULT FILTERS — FULLY CUSTOM ICON SET (sepia)
 * The stock Bitwarden .bwi font glyphs are masked out and replaced with our
 * own line shapes, painted via background-color: currentColor (so they inherit
 * the warm color + go terracotta on active). Scoped to the filter panel.
 * ========================================================================= */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-vault, .bwi-user, .bwi-users, .bwi-business, .bwi-provider, .bwi-collection, .bwi-collection-shared, .bwi-folder, .bwi-star, .bwi-star-f, .bwi-globe, .bwi-sticky-note, .bwi-file-text, .bwi-file, .bwi-files, .bwi-id-card, .bwi-credit-card, .bwi-key, .bwi-passkey, .bwi-trash, .bwi-plus, .bwi-list, .bwi-list-alt, .bwi-clone)::before {
    content: "" !important;
}
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-vault, .bwi-user, .bwi-users, .bwi-business, .bwi-provider, .bwi-collection, .bwi-collection-shared, .bwi-folder, .bwi-star, .bwi-star-f, .bwi-globe, .bwi-sticky-note, .bwi-file-text, .bwi-file, .bwi-files, .bwi-id-card, .bwi-credit-card, .bwi-key, .bwi-passkey, .bwi-trash, .bwi-plus, .bwi-list, .bwi-list-alt, .bwi-clone) {
    display: inline-block !important;
    width: 1.06em !important; height: 1.06em !important; vertical-align: -0.16em;
    background-color: currentColor !important;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
/* Per-icon shapes (viewBox 0 0 24 24, rounded line style). */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-vault { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='11' cy='12' r='3.2'/%3E%3Cpath d='M11 8.8v6.4M7.8 12h6.4M16.5 12h1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='11' cy='12' r='3.2'/%3E%3Cpath d='M11 8.8v6.4M7.8 12h6.4M16.5 12h1.6'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-user, .bwi-provider) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.5 20a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.5 20a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-users { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M16 5.6a3 3 0 0 1 0 5.6M17 19a5.6 5.6 0 0 0-2-4.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M16 5.6a3 3 0 0 1 0 5.6M17 19a5.6 5.6 0 0 0-2-4.2'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-business { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M10 21v-3h4v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M10 21v-3h4v3'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-collection, .bwi-collection-shared) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-folder { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-star, .bwi-star-f) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.9 6.26 6.86.62-5.18 4.56 1.55 6.7L12 16.9l-6.13 3.24 1.55-6.7L2.24 9.5l6.86-.62z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.9 6.26 6.86.62-5.18 4.56 1.55 6.7L12 16.9l-6.13 3.24 1.55-6.7L2.24 9.5l6.86-.62z'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-sticky-note, .bwi-file-text, .bwi-file, .bwi-files) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v5h5M8 13h8M8 17h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v5h5M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-id-card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='11' r='2'/%3E%3Cpath d='M5.5 16a3 3 0 0 1 6 0M14 10h4M14 13.5h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='11' r='2'/%3E%3Cpath d='M5.5 16a3 3 0 0 1 6 0M14 10h4M14 13.5h3'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-credit-card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9.5h18M6.5 14.5h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9.5h18M6.5 14.5h4'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-key, .bwi-passkey) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='4'/%3E%3Cpath d='M10.8 11.8L19 20M16 17l2-2M13.8 14.8l2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='4'/%3E%3Cpath d='M10.8 11.8L19 20M16 17l2-2M13.8 14.8l2-2'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5h17M9 7.5l.6-2.2a1 1 0 0 1 1-.8h2.8a1 1 0 0 1 1 .8l.6 2.2M6.4 7.5l.95 12a1.5 1.5 0 0 0 1.5 1.4h6.3a1.5 1.5 0 0 0 1.5-1.4l.95-12M10 11.5v5.5M14 11.5v5.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5h17M9 7.5l.6-2.2a1 1 0 0 1 1-.8h2.8a1 1 0 0 1 1 .8l.6 2.2M6.4 7.5l.95 12a1.5 1.5 0 0 0 1.5 1.4h6.3a1.5 1.5 0 0 0 1.5-1.4l.95-12M10 11.5v5.5M14 11.5v5.5'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-list, .bwi-list-alt) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E"); }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-clone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E"); }
/* Search magnifier (in the filter search box). */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-search::before { content: "" !important; }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) .bwi-search {
    display: inline-block !important; width: 1.06em !important; height: 1.06em !important;
    vertical-align: -0.16em; background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* Hide external Bitwarden help links (rebranded app). */
a[href*="bitwarden.com/help"] { display: none !important; }

/* Send filter column: shared vault-filter treatment above; just the layout
 * overrides the raw .filter needs (align-self + left-aligned vertical items). */
html.pv-mma app-send .tw-col-span-3 { align-self: start; padding: 2px 10px 12px !important; }
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter { padding: 0 !important; }
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-options { display: flex !important; flex-direction: column !important; gap: 2px !important; align-items: stretch !important; padding-left: 0 !important; margin-left: 0 !important; }
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-option { display: block !important; width: 100% !important; padding-left: 0 !important; margin-left: 0 !important; text-align: left !important; }
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-buttons { display: flex !important; width: 100% !important; justify-content: flex-start !important; padding-left: 0 !important; margin-left: 0 !important; }
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-button {
    display: flex !important; align-items: center !important; gap: 10px;
    width: 100% !important; justify-content: flex-start !important; text-align: left !important;
    font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important;
    color: var(--pv-ink-body) !important;
    padding: 8px 10px !important; margin: 0 !important; border-radius: 8px !important;
    min-height: 0 !important;
}
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-button .bwi { color: var(--pv-ink-icon2) !important; }
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-button:hover { background: rgba(var(--pv-tc-rgb), 0.08) !important; }
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-button.active,
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-button:has(.active),
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-button:has(h3.active) { background: rgba(var(--pv-tc-rgb), 0.14) !important; color: var(--pv-tc-700) !important; }
/* Group heading ("Tipuri") -> terracotta title-case, like vault nav-group headers. */
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-heading,
html.pv-mma :is(app-send .tw-col-span-3, app-organization-vault-filter) .filter-heading * {
    padding-left: 4px !important; text-align: left !important;
    color: var(--pv-tc-600) !important;
    font-weight: 600 !important;
    font-size: 14px !important; line-height: 20px !important;
    letter-spacing: 0 !important; text-transform: none !important;
}

/* Filter "all/grid" icon (bwi-th) -> custom rounded-grid mask (vault + Send). */
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-th, .bwi-th-large)::before { content: "" !important; }
html.pv-mma :is(app-vault-filter, app-send .tw-col-span-3, app-organization-vault-filter) :is(.bwi-th, .bwi-th-large) {
    display: inline-block !important; width: 1.06em !important; height: 1.06em !important; vertical-align: -0.16em;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Send filter: FILTRE title — full-bleed divider (edge to edge like vault) +
 * label pulled left. Negative margin cancels the card's 10px padding; the card's
 * overflow:hidden clips the line to the card edges. */
html.pv-mma app-send .tw-col-span-3 .tw-uppercase {
    margin: 0 -12px !important;
    padding: 8px 12px 10px 22px !important;
    border-bottom: 1px solid rgba(var(--pv-ink-rgb), 0.10) !important;
}

/* =========================================================================
 * PAGE: GENERATOR — "warm editorial" (sepia only)
 * Selectors grounded in the build: tools-credential-generator (page root),
 * bit-toggle-group / bit-toggle (type tabs), bit-color-password (output),
 * bit-card (option cards), bit-credential-generator-history (history).
 * ========================================================================= */

/* --- Warm paper backdrop behind the generator column -------------------- */
html.pv-mma tools-credential-generator { position: relative; display: block; }
html.pv-mma tools-credential-generator::before {
    content: ""; position: absolute; inset: -32px -60px auto -60px; height: 320px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(var(--pv-tc-rgb),0.10), rgba(var(--pv-tc-rgb),0.03) 55%, transparent 72%);
    pointer-events: none; z-index: 0;
}
html.pv-mma tools-credential-generator > * { position: relative; z-index: 1; }

/* --- Type tabs (Parolă / Frază / Nume) -> terracotta segmented pills ----- */
html.pv-mma tools-credential-generator bit-toggle-group {
    gap: 8px !important; background: transparent !important; border: 0 !important; padding: 0 !important;
}
html.pv-mma tools-credential-generator bit-toggle { border-radius: 999px !important; min-width: 0 !important; }
html.pv-mma tools-credential-generator bit-toggle > label {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; box-sizing: border-box; margin: 0 !important;
    padding: 11px 16px !important; border-radius: 999px !important;
    border: 1px solid rgba(var(--pv-ink-rgb),0.10) !important;
    background: var(--pv-cream-surface) !important; color: var(--pv-ink-muted) !important;
    font-weight: 600 !important;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html.pv-mma tools-credential-generator bit-toggle > label:hover {
    background: rgba(var(--pv-tc-rgb),0.08) !important; color: var(--pv-tc-700) !important;
    border-color: rgba(var(--pv-tc-rgb),0.30) !important;
}
html.pv-mma tools-credential-generator bit-toggle input:checked + label {
    background: var(--pv-tc-500) !important; color: var(--pv-on-accent) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(var(--pv-tc-rgb),0.30) !important;
}

/* --- Output = hero: big monospace, warm char color-coding --------------- */
html.pv-mma tools-credential-generator bit-card:has(bit-color-password) {
    background: var(--pv-cream-canvas) !important;
    border: 1px solid rgba(var(--pv-ink-rgb),0.10) !important;
    border-radius: var(--pv-radius-card) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px rgba(var(--pv-ink-rgb),0.10) !important;
}
html.pv-mma bit-color-password {
    font-family: "SF Mono", "Menlo", Monaco, Consolas, "Courier New", monospace !important;
    font-size: 22px !important; line-height: 30px !important; letter-spacing: 0.06em !important;
    font-weight: 600 !important; word-break: break-all;
    color: var(--pv-ink-strong) !important;
}
/* Letters = ink (inherited); digits + symbols = terracotta. */
html.pv-mma bit-color-password [class*="tw-text-primary"] { color: var(--pv-tc-500) !important; }
html.pv-mma bit-color-password [class*="tw-text-danger"] { color: var(--pv-tc-600) !important; }

/* Regenerate + copy -> warm round pills with press feedback. */
html.pv-mma tools-credential-generator bit-card:has(bit-color-password) button {
    border-radius: 999px !important;
    transition: background-color .15s ease, transform .1s ease, color .15s ease;
}
html.pv-mma tools-credential-generator bit-card:has(bit-color-password) button:hover {
    background: rgba(var(--pv-tc-rgb),0.12) !important; color: var(--pv-tc-600) !important;
}
html.pv-mma tools-credential-generator bit-card:has(bit-color-password) button:active { transform: scale(0.90); }

/* --- Checkboxes: empty box + terracotta check (no filled exterior) -------
 * Options live in tools-*-settings (siblings of the generator), so scope wide.
 * Checked box = cream fill + neutral hairline border; the check is our own
 * terracotta SVG drawn as background-image (Bitwarden draws its white check the
 * same way — the global rule at ~1210 blanks it, we replace it here). */
html.pv-mma :is(tools-credential-generator, tools-password-settings, tools-passphrase-settings, tools-username-settings, tools-catchall-settings, tools-subaddress-settings, tools-forwarder-settings) input[bitcheckbox]:checked {
    background-color: var(--pv-cream-surface) !important;
    border-color: rgba(var(--pv-ink-rgb),0.28) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 9-10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 74% !important;
}

/* --- Section headings (Opțiuni, Istoric generator) -> editorial serif ---- */
html.pv-mma tools-credential-generator h1,
html.pv-mma tools-credential-generator h2,
html.pv-mma tools-credential-generator h3,
html.pv-mma bit-credential-generator-history h2,
html.pv-mma bit-credential-generator-history h3 {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important; letter-spacing: -0.01em !important;
    color: var(--pv-ink-strong) !important;
}

/* =========================================================================
 * PAGES: IMPORT & EXPORT — bold, DISTINCT redesigns (sepia)
 * Scoped by pv-page-import / pv-page-export (stamped on <html> by pv-theme.js).
 * Import  = light "guided steps" identity.  Export = deep "security" identity.
 * ========================================================================= */

/* Editorial serif on section headings, both pages. */
html.pv-mma.pv-page-import :is(h1, h2, h3),
html.pv-mma.pv-page-export :is(h1, h2, h3) {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important; letter-spacing: -0.01em !important;
    color: var(--pv-ink-strong) !important;
}

/* ---- IMPORT: guided numbered steps + accent cards ------------------------ */
html.pv-mma.pv-page-import form { counter-reset: pv-step; }
html.pv-mma.pv-page-import bit-section-header h2 {
    display: flex !important; align-items: center !important; gap: 12px !important;
}
html.pv-mma.pv-page-import bit-section-header h2::before {
    counter-increment: pv-step; content: counter(pv-step);
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pv-tc-500); color: var(--pv-on-accent);
    font-family: "Iowan Old Style", Georgia, serif; font-weight: 700; font-size: 17px;
    letter-spacing: 0; box-shadow: 0 4px 12px rgba(var(--pv-tc-rgb),0.30);
}
html.pv-mma.pv-page-import bit-section bit-card {
    border-left: 3px solid var(--pv-tc-500) !important;
    box-shadow: 0 6px 16px rgba(var(--pv-ink-rgb),0.08) !important;
}

/* ---- IMPORT: file picker as a big dashed drop-zone ----------------------- */
html.pv-mma.pv-page-import bit-form-field:has(#import_input_file) {
    display: block !important; text-align: center !important;
    border: 2px dashed rgba(var(--pv-tc-rgb),0.40) !important;
    border-radius: var(--pv-radius-dialog) !important;
    background: rgba(var(--pv-tc-rgb),0.04) !important;
    padding: 22px 18px 18px !important;
    transition: background-color .15s ease, border-color .15s ease;
}
html.pv-mma.pv-page-import bit-form-field:has(#import_input_file):hover {
    background: rgba(var(--pv-tc-rgb),0.08) !important; border-color: var(--pv-tc-500) !important;
}
html.pv-mma.pv-page-import bit-form-field:has(#import_input_file)::before {
    content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 10px;
    background: var(--pv-tc-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M8 8l4-4 4 4M4 20h16'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M8 8l4-4 4 4M4 20h16'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- EXPORT: blue info callout -> warm panel ----------------------------
 * Minimal + robust: warm surface, terracotta left border, native info icon
 * tinted terracotta. NO custom ::before shield (it overflowed as a stray blob)
 * and NO position/padding tricks. :has(*) skips any empty/conditional callout. */
/* Target the inner <aside> box (the real visible callout). Styling the host
 * bit-callout leaked its border-left into the aside's top/bottom margin gutters
 * = the two stray vertical marks. */
html.pv-mma.pv-page-export bit-callout aside:has(.bwi-info-circle) {
    background-color: var(--pv-cream-surface) !important;
    border-color: rgba(var(--pv-tc-rgb),0.28) !important;
    border-left: 5px solid var(--pv-tc-600) !important;
    box-shadow: 0 6px 16px rgba(var(--pv-ink-rgb),0.10) !important;
    color: var(--pv-ink-body) !important;
}
html.pv-mma.pv-page-export bit-callout aside:has(.bwi-info-circle) .bwi { color: var(--pv-tc-600) !important; }
html.pv-mma.pv-page-export bit-callout aside:has(.bwi-info-circle) [id^="bit-callout-title"] { color: var(--pv-tc-700) !important; }

/* =========================================================================
 * PAGE: RAPOARTE — warm cards + fully custom, per-report colored icons (sepia)
 * DOM: app-report-card > a[routerLink] > bit-base-card
 *        > div.tw-h-28 (icon band) > div.tw-size-20 > bit-svg (stock art)
 *        > bit-card-content > h3 + p
 * Each card is keyed by its route via a[href*="…-report"]; the stock bit-svg is
 * hidden and replaced by a mask-image icon painted in the report's own color.
 * ========================================================================= */

/* ---- Layout: HORIZONTAL rectangular cards, FULL WIDTH, 3 per row, equal height
 * Each card is wrapped in a bare <div> (the flex item); those wrappers live in a
 * flex container. Any max-width ancestor is released so the row spans full width;
 * align-items:stretch + a height:100% chain makes every card the same height. */
html.pv-mma.pv-page-reports [class*="tw-max-w-"]:has(app-report-card) { max-width: 1320px !important; }
html.pv-mma.pv-page-reports div:has(> div > app-report-card) {
    display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
    width: 100% !important; gap: 16px !important;
}
html.pv-mma.pv-page-reports div:has(> app-report-card) {
    flex: 1 1 calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;
    min-width: 0 !important;
    display: flex !important;
}
html.pv-mma.pv-page-reports app-report-card,
html.pv-mma.pv-page-reports app-report-card > a,
html.pv-mma.pv-page-reports app-report-card bit-base-card { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; }

/* ---- Card shell (all): icon on the LEFT, text on the RIGHT ---- */
html.pv-mma.pv-page-reports app-report-card bit-base-card {
    min-height: 250px !important;
    display: flex !important; flex-direction: row !important; align-items: stretch !important;
    background: var(--pv-cream-surface) !important;
    border: 1px solid rgba(var(--pv-ink-rgb),0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(var(--pv-ink-rgb),0.08) !important;
    transition: box-shadow .18s ease !important;
    overflow: hidden !important;
}
/* icon band -> fixed left column, full height */
html.pv-mma.pv-page-reports app-report-card .tw-h-28 {
    height: auto !important; width: 120px !important; flex: 0 0 120px !important;
    align-items: center !important;
    border-bottom: 0 !important;
    border-right: 1px solid rgba(var(--pv-ink-rgb),0.06) !important;
}
/* content takes the rest */
html.pv-mma.pv-page-reports app-report-card bit-card-content { flex: 1 1 auto !important; }
/* hide the stock illustration; turn its 80px box into a masked icon */
html.pv-mma.pv-page-reports app-report-card bit-svg { display: none !important; }
html.pv-mma.pv-page-reports app-report-card .tw-size-20 {
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important; mask-position: center !important;
    -webkit-mask-size: 60px 60px !important; mask-size: 60px 60px !important;
}
/* editorial title + muted body */
html.pv-mma.pv-page-reports app-report-card h3 {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif !important;
    font-weight: 700 !important; color: var(--pv-ink-strong) !important;
    letter-spacing: -0.01em !important;
}
html.pv-mma.pv-page-reports app-report-card p { color: var(--pv-ink-muted) !important; }

/* ---- Per-report color + icon (band tint, top accent, icon, hover glow) --- */

/* Parole expuse — clay red, "eye" (visible/exposed) */
html.pv-mma.pv-page-reports a[href*="exposed-passwords-report"] .tw-h-28 { background: rgba(192,57,43,0.10) !important; }
html.pv-mma.pv-page-reports a[href*="exposed-passwords-report"] .tw-size-20 {
    background-color: #c0392b !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5 10 6.5 10 6.5-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5 10 6.5 10 6.5-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}
html.pv-mma.pv-page-reports a[href*="exposed-passwords-report"]:hover bit-base-card { box-shadow: 0 12px 28px rgba(192,57,43,0.26) !important; }

/* Parole refolosite — amber, "clone" (duplicates) */
html.pv-mma.pv-page-reports a[href*="reused-passwords-report"] .tw-h-28 { background: rgba(207,138,30,0.12) !important; }
html.pv-mma.pv-page-reports a[href*="reused-passwords-report"] .tw-size-20 {
    background-color: #cf8a1e !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E") !important;
}
html.pv-mma.pv-page-reports a[href*="reused-passwords-report"]:hover bit-base-card { box-shadow: 0 12px 28px rgba(207,138,30,0.26) !important; }

/* Parole slabe — burnt orange, "broken shield / crack" */
html.pv-mma.pv-page-reports a[href*="weak-passwords-report"] .tw-h-28 { background: rgba(194,97,12,0.11) !important; }
html.pv-mma.pv-page-reports a[href*="weak-passwords-report"] .tw-size-20 {
    background-color: #c2610c !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v5c0 4.5-3.2 7.8-8 9-4.8-1.2-8-4.5-8-9V6z'/%3E%3Cpath d='M12.5 7.5l-3 4.2h3L11 16.5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v5c0 4.5-3.2 7.8-8 9-4.8-1.2-8-4.5-8-9V6z'/%3E%3Cpath d='M12.5 7.5l-3 4.2h3L11 16.5'/%3E%3C/svg%3E") !important;
}
html.pv-mma.pv-page-reports a[href*="weak-passwords-report"]:hover bit-base-card { box-shadow: 0 12px 28px rgba(194,97,12,0.26) !important; }

/* Website-uri nesigure — teal, "open padlock" (unsecured) */
html.pv-mma.pv-page-reports a[href*="unsecured-websites-report"] .tw-h-28 { background: rgba(47,143,131,0.12) !important; }
html.pv-mma.pv-page-reports a[href*="unsecured-websites-report"] .tw-size-20 {
    background-color: #2f8f83 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7.5A4 4 0 0 1 15.5 6'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7.5A4 4 0 0 1 15.5 6'/%3E%3C/svg%3E") !important;
}
html.pv-mma.pv-page-reports a[href*="unsecured-websites-report"]:hover bit-base-card { box-shadow: 0 12px 28px rgba(47,143,131,0.26) !important; }

/* Autentificare 2 etape inactivă — violet, "phone + check" */
html.pv-mma.pv-page-reports a[href*="inactive-two-factor-report"] .tw-h-28 { background: rgba(109,90,168,0.12) !important; }
html.pv-mma.pv-page-reports a[href*="inactive-two-factor-report"] .tw-size-20 {
    background-color: #6d5aa8 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M9.2 11.8l2 2 3.6-3.8'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M9.2 11.8l2 2 3.6-3.8'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") !important;
}
html.pv-mma.pv-page-reports a[href*="inactive-two-factor-report"]:hover bit-base-card { box-shadow: 0 12px 28px rgba(109,90,168,0.26) !important; }

/* Breșă de date — deep crimson, "document + alert" */
html.pv-mma.pv-page-reports a[href*="breach-report"] .tw-h-28 { background: rgba(146,43,33,0.11) !important; }
html.pv-mma.pv-page-reports a[href*="breach-report"] .tw-size-20 {
    background-color: #922b21 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 11.5v3M12 17.4h.01'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 11.5v3M12 17.4h.01'/%3E%3C/svg%3E") !important;
}
html.pv-mma.pv-page-reports a[href*="breach-report"]:hover bit-base-card { box-shadow: 0 12px 28px rgba(146,43,33,0.26) !important; }

/* =========================================================================
 * SETTINGS PAGES — warm editorial, same language as Import (sepia)
 * Scoped by pv-page-settings (section class stamped for every /settings/*
 * route by pv-theme.js). Applies Import's transferable look: editorial serif
 * section headings + terracotta accent-left cards. (No numbered "step" badges
 * or file drop-zone — those are Import's guided-flow identity, not settings.)
 * ========================================================================= */
html.pv-mma.pv-page-settings :is(h1, h2, h3) {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important; letter-spacing: -0.01em !important;
    color: var(--pv-ink-strong) !important;
}
html.pv-mma.pv-page-settings bit-card {
    border-left: 3px solid var(--pv-tc-500) !important;
    box-shadow: 0 6px 16px rgba(var(--pv-ink-rgb),0.08) !important;
}

/* =========================================================================
 * TWO-STEP LOGIN (2FA) — custom per-provider icons (sepia)
 * Row = <bit-item class="providers-2fa-<providerType>">; icon holder =
 * auth-two-factor-icon (inline bit-svg for authenticator/email, <img> for
 * Duo/YubiKey/WebAuthn). We hide the stock art and paint a mask icon in a
 * per-provider color, keyed by the STABLE providers-2fa-<type> class.
 * Types: 0 Authenticator · 1 Email · 2 Duo (LEFT AS-IS) · 3 YubiKey · 6 WebAuthn
 * ========================================================================= */
html.pv-mma.pv-page-two-factor :is(.providers-2fa-0, .providers-2fa-1, .providers-2fa-3, .providers-2fa-6) auth-two-factor-icon > * { display: none !important; }
html.pv-mma.pv-page-two-factor :is(.providers-2fa-0, .providers-2fa-1, .providers-2fa-3, .providers-2fa-6) auth-two-factor-icon {
    display: inline-block !important; width: 70px !important; height: 70px !important;
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important; mask-position: center !important;
    -webkit-mask-size: 52px 52px !important; mask-size: 52px 52px !important;
}
/* 0 Authenticator — terracotta, phone + code */
html.pv-mma.pv-page-two-factor .providers-2fa-0 auth-two-factor-icon {
    background-color: #b45309 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 11h6M9 14h4'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 11h6M9 14h4'/%3E%3C/svg%3E") !important;
}
/* 1 Email — amber, envelope */
html.pv-mma.pv-page-two-factor .providers-2fa-1 auth-two-factor-icon {
    background-color: #cf8a1e !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6 8.5-6'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6 8.5-6'/%3E%3C/svg%3E") !important;
}
/* 3 YubiKey — green, USB security key */
html.pv-mma.pv-page-two-factor .providers-2fa-3 auth-two-factor-icon {
    background-color: #4e8a2f !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='9' width='14' height='6' rx='3'/%3E%3Ccircle cx='6' cy='12' r='1.4'/%3E%3Cpath d='M16.5 12H21'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='9' width='14' height='6' rx='3'/%3E%3Ccircle cx='6' cy='12' r='1.4'/%3E%3Cpath d='M16.5 12H21'/%3E%3C/svg%3E") !important;
}
/* 6 WebAuthn / FIDO2 — teal, fingerprint */
html.pv-mma.pv-page-two-factor .providers-2fa-6 auth-two-factor-icon {
    background-color: #2f8f83 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5a7.5 7.5 0 0 1 7.5 7.5v1'/%3E%3Cpath d='M4.5 13v-1A7.5 7.5 0 0 1 8 5.6'/%3E%3Cpath d='M8 20.5A11 11 0 0 1 7 12a5 5 0 0 1 10 0v2a7 7 0 0 0 .6 2.9'/%3E%3Cpath d='M12 12v3a9 9 0 0 0 .7 3.5'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5a7.5 7.5 0 0 1 7.5 7.5v1'/%3E%3Cpath d='M4.5 13v-1A7.5 7.5 0 0 1 8 5.6'/%3E%3Cpath d='M8 20.5A11 11 0 0 1 7 12a5 5 0 0 1 10 0v2a7 7 0 0 0 .6 2.9'/%3E%3Cpath d='M12 12v3a9 9 0 0 0 .7 3.5'/%3E%3C/svg%3E") !important;
}

/* =========================================================================
 * LOGIN / AUTH SCREEN (sepia) — default layout kept (illustration on top,
 * centered, form below); ONLY the stock safe illustration is swapped for our
 * custom sepia safe. Scoped to bit-landing-hero so other illustrations stay.
 * ========================================================================= */
html.pv-mma bit-landing-hero bit-svg:has(.tw-fill-illustration-bg-primary) > svg { display: none !important; }
html.pv-mma bit-landing-hero bit-svg:has(.tw-fill-illustration-bg-primary) {
    display: block !important; width: 100% !important; height: 100% !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Crect x='28' y='34' width='184' height='176' rx='22' fill='%23fffdf7' stroke='%2392400e' stroke-width='6'/%3E%3Crect x='46' y='52' width='148' height='140' rx='14' fill='%23faf6ee' stroke='%23b45309' stroke-width='3'/%3E%3Crect x='24' y='70' width='10' height='24' rx='3' fill='%23b45309'/%3E%3Crect x='24' y='150' width='10' height='24' rx='3' fill='%23b45309'/%3E%3Ccircle cx='108' cy='122' r='40' fill='%23fbeede' stroke='%23b45309' stroke-width='5'/%3E%3Ccircle cx='108' cy='122' r='24' fill='none' stroke='%23c2610c' stroke-width='3'/%3E%3Ccircle cx='108' cy='122' r='6' fill='%2392400e'/%3E%3Cg stroke='%23b45309' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M108 92v-10'/%3E%3Cpath d='M108 152v10'/%3E%3Cpath d='M78 122h-10'/%3E%3Cpath d='M138 122h10'/%3E%3C/g%3E%3Crect x='170' y='104' width='14' height='36' rx='7' fill='%23b45309'/%3E%3Cg fill='%23c2610c'%3E%3Ccircle cx='58' cy='64' r='4'/%3E%3Ccircle cx='182' cy='64' r='4'/%3E%3Ccircle cx='58' cy='180' r='4'/%3E%3Ccircle cx='182' cy='180' r='4'/%3E%3C/g%3E%3Crect x='44' y='208' width='12' height='16' rx='3' fill='%2392400e'/%3E%3Crect x='184' y='208' width='12' height='16' rx='3' fill='%2392400e'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* =========================================================================
 * PNRR FUNDING FOOTER — mandatory, ALL pages, ALL themes (markup per tema).
 * NOT scoped to pv-mma/pv-grigotec (must show on default too). Injected into
 * <body> by pv-theme.js so it survives Angular re-renders. White bar so the
 * official logos read on any theme.
 * ========================================================================= */
/* Non-fixed sticky-footer: make <body> a column so the banner (appended last by
 * pv-theme.js) sits at the very BOTTOM, after app-root, instead of floating to
 * the top of normal flow. */
body:has(> #pv-eu-footer) { display: flex !important; flex-direction: column !important; min-height: 100vh; }
body:has(> #pv-eu-footer) > app-root { flex: 1 0 auto; }
/* Container only — the fragment fetched from /api/pnrr-footer brings its own
 * inline styles (white background, PNRR banner, project details). */
#pv-eu-footer {
    position: static; width: 100%; box-sizing: border-box; flex: 0 0 auto; order: 999;
    background: transparent;
}
/* Bara fixata acopera coltul din stanga-jos al footerului, iar footerul e
 * randat in <body>, in afara layout-ului aplicatiei, deci se centreaza pe toata
 * latimea ferestrei — adica vizual mutat spre stanga. Il impingem cu exact
 * latimea barei (aceeasi variabila pe care o intretine pv-theme.js), ca sa se
 * centreze pe zona ramasa libera. */
#pv-eu-footer { padding-left: var(--pv-sidenav-w, 0px); }
/* Pe glass sidenavul nativ e ascuns (avem navbar sus), deci nimic de compensat. */
html.pv-grigotec #pv-eu-footer { padding-left: 0; }
#pv-eu-footer img { max-width: 100%; height: auto; display: block; }
#pv-eu-footer a { text-decoration: underline; }

/* --- Footerul, imbracat in tema activa a web vault-ului ------------------
 * Fragmentul vine cu stiluri inline (banda alba, albastru EU) scrise pentru
 * hartie, deci pe orice tema arata ca o plansa lipita peste pagina. Se schimba
 * doar prezentarea — textul juridic si emblemele raman neatinse.
 *
 * Culorile vin din variabilele de tema ale Bitwarden (canale RGB separate prin
 * spatiu), nu din valori fixe: asa footerul urmeaza automat tema activa, fie ea
 * light/dark implicit, glass (pv-grigotec) sau sepia (pv-mma). Din acelasi
 * motiv regulile NU sunt scoped pe o tema anume.
 *
 * `!important` e obligatoriu: stilurile din fragment sunt inline. */
#pv-eu-footer > div {
    background: transparent !important;
    border-top: 0 !important;
    position: relative;
}
/* Separator hairline care se stinge spre margini, in loc de linia continua. */
#pv-eu-footer > div::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgb(var(--color-text-main) / 0.22),
        transparent);
}
/* Emblemele isi pastreaza plansa alba impusa de identitatea vizuala (au text
 * bleumarin desenat in PNG, ar disparea pe fundal inchis), dar primesc rama
 * temei, ca sa arate asezate, nu decupate. */
#pv-eu-footer img {
    background: #ffffff;
    border: 1px solid rgb(var(--color-text-main) / 0.18);
    border-radius: 10px;
    padding: 10px 14px;
    box-sizing: border-box;
}
/* Culorile de text, prinse dupa valoarea din atributul `style`, ca sa nu fie
 * nevoie sa umblam in footerele aprobate. Titlul si linkurile iau accentul temei
 * amestecat cu cerneala ei — raman lizibile si acolo unde accentul e prea inchis
 * pentru fundal (primary-600 al Bitwarden e albastru inchis, iar tema glass e
 * intunecata). */
#pv-eu-footer [style*="color:#333333"] { color: rgb(var(--color-text-main)) !important; }
#pv-eu-footer [style*="color:#666666"] { color: rgb(var(--color-text-muted)) !important; }
#pv-eu-footer [style*="color:#003399"] {
    color: color-mix(in srgb,
        rgb(var(--color-primary-600)) 55%,
        rgb(var(--color-text-main))) !important;
}
#pv-eu-footer [style*="border-top:1px solid #e0e0e0"] {
    border-top-color: rgb(var(--color-text-main) / 0.18) !important;
}
/* Compactare: footerul e obligatoriu, dar nu e continutul paginii. Aceleasi
 * proportii, la o scara mai mica — nimic nu dispare, doar se stramtoreaza. */
#pv-eu-footer > div { padding: 12px 16px !important; }
#pv-eu-footer img { max-width: 420px !important; margin-bottom: 10px !important; padding: 7px 10px; }
#pv-eu-footer [style*="font-size:12px"] { font-size: 10.5px !important; line-height: 1.5 !important; }
#pv-eu-footer [style*="font-size:14px"] { font-size: 11.5px !important; }
#pv-eu-footer [style*="font-size:11px"] {
    font-size: 9.5px !important; margin-top: 6px !important; padding-top: 6px !important;
}
#pv-eu-footer [style*="font-size:10px"] { font-size: 9px !important; }
#pv-eu-footer [style*="margin-bottom:6px"],
#pv-eu-footer [style*="margin-bottom:8px"] { margin-bottom: 4px !important; }

/* --- Glass: footerul ca panou frosted, nu ca banda transparenta -----------
 * Restul temei e construit din suprafete translucide cu blur peste gradientul
 * de fundal (navbar, carduri, header). Un footer complet transparent ar fi
 * singura zona fara suprafata proprie — asa ca primeste aceeasi reteta ca
 * navbarul, iar accentul vine din indigo-ul temei, nu din albastrul stoc al
 * Bitwarden (care e prea inchis pentru fundalul de noapte). */
html.pv-grigotec #pv-eu-footer > div {
    background: rgba(var(--pv-nav-rgb), 0.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
html.pv-grigotec #pv-eu-footer > div::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--pv-white-rgb), 0.14),
        transparent);
}
html.pv-grigotec #pv-eu-footer img {
    border-color: rgba(var(--pv-white-rgb), 0.14);
}
html.pv-grigotec #pv-eu-footer [style*="color:#003399"] {
    color: color-mix(in srgb, var(--pv-indigo-soft) 65%, rgb(var(--color-text-main))) !important;
}

/* --- Sepia: footerul ca banda de hartie ----------------------------------
 * Tema e editoriala — suprafete crem cu umbre moi peste canvasul cald. Un
 * footer transparent l-ar lasa direct pe canvas, fara suprafata proprie, asa ca
 * primeste foaia (--pv-cream-surface) si o linie in cerneala calda a temei.
 * Culorile de text vin deja corect: pv-mma suprascrie --color-text-main,
 * --color-text-muted si --color-primary-600 cu tokenii lui warm/terracotta. */
html.pv-mma #pv-eu-footer > div {
    background: var(--pv-cream-surface) !important;
}
html.pv-mma #pv-eu-footer > div::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--pv-ink-rgb), 0.18),
        transparent);
}
html.pv-mma #pv-eu-footer img {
    border-color: rgba(var(--pv-ink-rgb), 0.14);
}
html.pv-mma bit-form-field label {
      visibility: visible !important;
}