/* WHITE RABBIT VAULT • AUTHENTICATED WEB VAULT THEME v1.0
   Load AFTER stock styles and AFTER the existing login white-rabbit-theme.css.
   CSS-only visual enhancement. Does not change vault data, authentication or form logic.
   Scope: authenticated shell; excludes body.layout_frontend (login).
   Vaultwarden / Bitwarden web clients may rename classes between versions.
*/
:root {
  --wr-a-obsidian:#080d17; --wr-a-base:#0c1423; --wr-a-surface:#111d30;
  --wr-a-surface-high:#1b2b42; --wr-a-sidebar:#0a1323;
  --wr-a-line:rgba(207,166,94,.18); --wr-a-strong-line:rgba(223,181,107,.34);
  --wr-a-gold:#e4b96d; --wr-a-gold-hi:#ffdb9d; --wr-a-cream:#f2ecdf;
  --wr-a-muted:#a6b1c4; --wr-a-focus:#f4c87a;
}
/* App canvas, avoiding the unauthenticated screen. */
body:not(.layout_frontend) { background:var(--wr-a-base)!important; color:var(--wr-a-cream); }
body:not(.layout_frontend) app-root, body:not(.layout_frontend) main { color:var(--wr-a-cream); }
body:not(.layout_frontend) .layout, body:not(.layout_frontend) .layout-body,
body:not(.layout_frontend) .layout-content {background-color:var(--wr-a-base)!important;}
/* Sidebar and vertical navigation */
body:not(.layout_frontend) aside, body:not(.layout_frontend) .sidebar,
body:not(.layout_frontend) .layout-sidebar,
body:not(.layout_frontend) nav[aria-label='Main navigation'] {
  background:var(--wr-a-sidebar)!important;
  border-right:1px solid var(--wr-a-line)!important;
}
body:not(.layout_frontend) aside { background-image:linear-gradient(170deg,rgba(226,174,88,.055),transparent 47%)!important; }
body:not(.layout_frontend) .sidebar a, body:not(.layout_frontend) aside a,
body:not(.layout_frontend) aside button {border-radius:10px;transition:background-color .16s,color .16s,border-color .16s;}
body:not(.layout_frontend) aside a:hover,body:not(.layout_frontend) aside button:hover,
body:not(.layout_frontend) .sidebar a:hover{background:rgba(222,176,102,.10)!important;color:var(--wr-a-gold-hi)!important;}
body:not(.layout_frontend) aside a.active,body:not(.layout_frontend) aside a[aria-current='page'],
body:not(.layout_frontend) .sidebar .active,
body:not(.layout_frontend) .sidebar a[aria-current='page']{
  background:linear-gradient(90deg,rgba(213,159,73,.25),rgba(213,159,73,.07))!important;
  color:var(--wr-a-gold-hi)!important;
  box-shadow:inset 3px 0 0 var(--wr-a-gold);
}
/* Card-based filters & detail panes */
body:not(.layout_frontend) .card,body:not(.layout_frontend) .card-body,
body:not(.layout_frontend) .filter-container,body:not(.layout_frontend) .filters,
body:not(.layout_frontend) .tw-bg-background,body:not(.layout_frontend) .tw-bg-card {
  border-color:var(--wr-a-line)!important;
}
body:not(.layout_frontend) .card,body:not(.layout_frontend) .filter-container,
body:not(.layout_frontend) .filters {background:var(--wr-a-surface)!important;border-radius:12px!important;}
body:not(.layout_frontend) .card-header{background:rgba(224,176,100,.045)!important;border-color:var(--wr-a-line)!important;}
/* Key action buttons */
body:not(.layout_frontend) .btn-primary,
body:not(.layout_frontend) button.btn-primary {
  background:linear-gradient(130deg,#f2cf8b,#d8a452)!important;
  border-color:#d6a04c!important;
  color:#211909!important;
  font-weight:650;
  border-radius:9px!important;
  box-shadow:0 3px 18px rgba(214,157,64,.13);
}
body:not(.layout_frontend) .btn-primary:hover {filter:brightness(1.07);box-shadow:0 5px 24px rgba(214,157,64,.22);}
body:not(.layout_frontend) .btn-outline-primary,
body:not(.layout_frontend) .btn-secondary {border-color:var(--wr-a-strong-line)!important;border-radius:9px!important;}
/* Keep warning/destructive buttons in their original semantic colours. */
body:not(.layout_frontend) .btn-danger,body:not(.layout_frontend) .btn-warning{filter:none;}
/* Vault list rows and tables */
body:not(.layout_frontend) table,body:not(.layout_frontend) .table {background:transparent!important;border-color:var(--wr-a-line)!important;}
body:not(.layout_frontend) table th,body:not(.layout_frontend) .table th{
  color:var(--wr-a-muted)!important;font-size:.8rem;font-weight:650;letter-spacing:.055em;
  border-bottom:1px solid var(--wr-a-strong-line)!important;
}
body:not(.layout_frontend) table td,body:not(.layout_frontend) .table td,
body:not(.layout_frontend) .table > :not(caption) > * > * {
  border-color:var(--wr-a-line)!important;
}
body:not(.layout_frontend) table tbody tr:hover,body:not(.layout_frontend) .table tbody tr:hover {
  background:rgba(224,179,104,.055)!important;
}
body:not(.layout_frontend) .list-group-item {background:transparent!important;border-color:var(--wr-a-line)!important;}
body:not(.layout_frontend) .list-group-item:hover {background:rgba(224,179,104,.055)!important;}
/* Links, controls, badges */
body:not(.layout_frontend) a:not(.btn) {text-decoration-color:rgba(226,181,111,.4);}
body:not(.layout_frontend) .text-primary,body:not(.layout_frontend) .tw-text-primary,
body:not(.layout_frontend) a:not(.btn):hover {color:var(--wr-a-gold-hi)!important;}
body:not(.layout_frontend) input:not([type='checkbox']):not([type='radio']),
body:not(.layout_frontend) select,body:not(.layout_frontend) textarea,
body:not(.layout_frontend) .form-control,body:not(.layout_frontend) .form-select {
  background-color:#17253b!important;border-color:rgba(168,187,217,.35)!important;
  color:var(--wr-a-cream)!important;border-radius:9px!important;
}
body:not(.layout_frontend) input::placeholder,body:not(.layout_frontend) textarea::placeholder {color:#9aa8be!important;}
body:not(.layout_frontend) input:focus,body:not(.layout_frontend) select:focus,
body:not(.layout_frontend) textarea:focus {border-color:var(--wr-a-focus)!important;box-shadow:0 0 0 3px rgba(230,176,96,.15)!important;}
body:not(.layout_frontend) :is(button,a,input,select,textarea,[tabindex]):focus-visible{
 outline:2px solid var(--wr-a-focus)!important;outline-offset:2px;
}
body:not(.layout_frontend) input[type=checkbox],body:not(.layout_frontend) input[type=radio]{accent-color:var(--wr-a-gold);}
body:not(.layout_frontend) .badge.bg-primary,body:not(.layout_frontend) .badge-primary {background:#3c2d19!important;color:#f5d89e!important;border:1px solid rgba(235,184,102,.3);}
/* Popovers/dialogues: dark readable surfaces, useful for edit item and settings */
body:not(.layout_frontend) .dropdown-menu,body:not(.layout_frontend) .popover,
body:not(.layout_frontend) .modal-content,body:not(.layout_frontend) [role='dialog'] {
  background-color:#142137!important;color:var(--wr-a-cream)!important;
  border:1px solid var(--wr-a-strong-line)!important;
  border-radius:12px!important;box-shadow:0 16px 52px rgba(0,0,0,.38)!important;
}
body:not(.layout_frontend) .dropdown-item:hover,body:not(.layout_frontend) [role='menuitem']:hover {background:rgba(229,181,100,.13)!important;}
body:not(.layout_frontend) .modal-header,body:not(.layout_frontend) .modal-footer {border-color:var(--wr-a-line)!important;}
/* Separation and legibility */
body:not(.layout_frontend) hr {border-color:var(--wr-a-line)!important;opacity:1;}
body:not(.layout_frontend) .text-muted,body:not(.layout_frontend) .tw-text-muted {color:var(--wr-a-muted)!important;}
/* Do not use a busy photograph behind sensitive records. App gets subtle atmospheric texture only. */
body:not(.layout_frontend) main {background-image:radial-gradient(ellipse at 95% 0%,rgba(196,137,55,.045),transparent 45%)!important;}
@media (max-width: 900px) {
 body:not(.layout_frontend) aside,body:not(.layout_frontend) .sidebar {background-image:none!important;}
 body:not(.layout_frontend) .card {border-radius:9px!important;}
}
@media (prefers-reduced-motion: reduce) {
 body:not(.layout_frontend) aside a,body:not(.layout_frontend) aside button {transition:none!important;}
}

/* ---- adapters for the Vaultwarden web 2026.7 authenticated shell (2026-10-19) ----
   The package targets Bootstrap-era classes (.card, .btn-primary, .table, aside).
   This build renders bit-* components styled from --color-* custom properties,
   so the reliable lever is remapping those tokens. Scoped to the authenticated
   layout only; the login screen (body.layout_frontend) is untouched. */
body:not(.layout_frontend) {
  /* surfaces */
  --color-background: 12 20 35;          /* #0c1423 */
  --color-background-alt: 17 29 48;      /* #111d30 */
  --color-background-alt3: 10 19 35;     /* #0a1323 sidebar */
  --color-background-alt4: 8 13 23;      /* #080d17 */
  --color-bg-primary: #0c1423;
  --color-bg-secondary: #111d30;
  --color-bg-tertiary: #111d30;
  --color-bg-quaternary: #16233a;
  --color-bg-white: #0c1423;
  --color-bg-hover: rgba(255, 255, 255, 0.06);
  --color-hover-default: rgba(255, 255, 255, 0.07);
  /* text */
  --color-text-main: 242 236 223;        /* #f2ecdf */
  --color-text-muted: #a6b1c4;
  --color-text-contrast: 23 17 8;
  --color-fg-heading: #f2ecdf;
  --color-fg-body: #ddd6c8;
  --color-fg-body-subtle: #a6b1c4;
  --color-fg-inactive: #7d8798;
  --color-fg-contrast: #171108;
  --color-fg-white: #f2ecdf;
  /* lines */
  --color-border-base: rgba(207, 166, 94, 0.22);
  --color-border-strong: rgba(223, 181, 107, 0.42);
  --color-border-light: rgba(207, 166, 94, 0.14);
  --color-border-muted: rgba(207, 166, 94, 0.10);
  /* brand: gold replaces Bitwarden blue on primary surfaces */
  --color-bg-brand: #c9963f;
  --color-bg-brand-strong: #d8a452;
  --color-bg-brand-medium: #8a6a2f;
  --color-bg-brand-soft: #1b2b42;
  --color-brand-500: #d8a452;
  --color-brand-600: #d8a452;
  --color-brand-700: #c9963f;
  --color-brand-800: #b8863a;
  --color-brand-900: #9a6f2f;
  --color-border-brand: #c9963f;
  --color-border-brand-strong: #d8a452;
  /* left navigation */
  --color-nav-bg-primary: #0a1323;
  --color-nav-bg-primary-strong: #080d17;
  --color-nav-fg-primary: #f2ecdf;
  --color-nav-bg-secondary: #111d30;
  --color-nav-fg-secondary: #d8d2c4;
  --color-nav-border-primary: rgba(207, 166, 94, 0.25);
}
/* the virtual-scroll content pane paints its own white surface */
body:not(.layout_frontend) main,
body:not(.layout_frontend) .cdk-virtual-scrollable {
  background-color: var(--color-bg-primary) !important;
}

/* ---- White Rabbit drawn theme pass (2026-10-19) ----
   Matches the supplied design sheet: eclipse artwork band behind the page header,
   the same artwork bleeding down the left sidebar, gold-outlined active nav item,
   bordered panels. Visual only; scoped to the authenticated shell. */

/* Header band ------------------------------------------------------------- */
body:not(.layout_frontend) header {
  background-image:
    linear-gradient(180deg, rgba(5, 9, 18, 0.68) 0%, rgba(5, 9, 18, 0.92) 100%),
    url('/images/login-background-1920x1080.webp') !important;
  background-size: cover, cover !important;
  background-position: center, center 30% !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(214, 168, 91, 0.30) !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}
body:not(.layout_frontend) header h1,
body:not(.layout_frontend) header h2,
body:not(.layout_frontend) header p {
  color: #f7ead2 !important;
}
body:not(.layout_frontend) header input {
  background: rgba(6, 11, 22, 0.78) !important;
  border: 1px solid rgba(214, 168, 91, 0.30) !important;
  border-radius: 10px !important;
  color: #f2ecdf !important;
}

/* Left sidebar: artwork + gold rail -------------------------------------- */
body:not(.layout_frontend) nav.tw-sticky {
  background-image:
    linear-gradient(180deg, rgba(8, 13, 25, 0.92) 0%, rgba(8, 13, 25, 0.55) 42%, rgba(5, 9, 18, 0.97) 100%),
    url('/images/login-background-1920x1080.webp') !important;
  background-size: auto, cover !important;
  background-position: center, 74% 100% !important;
  background-repeat: no-repeat !important;
  border-right: 1px solid rgba(214, 168, 91, 0.22) !important;
}
body:not(.layout_frontend) nav.tw-sticky .tw-bg-nav {
  background: transparent !important;
}

/* Active nav item: gold outline pill ------------------------------------- */
body:not(.layout_frontend) a[aria-current='page'] {
  background: linear-gradient(90deg, rgba(214, 168, 91, 0.20), rgba(214, 168, 91, 0.04)) !important;
  border: 1px solid rgba(214, 168, 91, 0.55) !important;
  border-radius: 12px !important;
  color: #f6dcab !important;
  box-shadow: inset 3px 0 0 #d8a452;
}

/* Filters panel ---------------------------------------------------------- */
body:not(.layout_frontend) nav.tw-bg-background-alt3 {
  background: rgba(13, 22, 38, 0.94) !important;
  border: 1px solid rgba(214, 168, 91, 0.20) !important;
  border-radius: 12px !important;
}

/* Content surfaces: hairline row separators, gold hover ------------------ */
body:not(.layout_frontend) table tbody tr {
  border-bottom: 1px solid rgba(214, 168, 91, 0.10) !important;
}
body:not(.layout_frontend) table tbody tr:hover {
  background: rgba(214, 168, 91, 0.06) !important;
}

/* Refinement pass (2026-10-19): brighter band, brand mark, inset pill ------ */
body:not(.layout_frontend) header {
  background-image:
    linear-gradient(180deg, rgba(5, 9, 18, 0.42) 0%, rgba(5, 9, 18, 0.86) 100%),
    url('/images/login-background-1920x1080.webp') !important;
  background-position: center, center 42% !important;
}
/* brand: the sidebar logo host is a bit-svg; hide it and paint the wordmark on its wrapper */
body:not(.layout_frontend) nav.tw-sticky bit-svg.tw-max-h-full { display: none !important; }
body:not(.layout_frontend) nav.tw-sticky :has(> bit-svg.tw-max-h-full) {
  background: url('/images/white-rabbit-vault-wordmark.png') no-repeat left center / contain !important;
  min-height: 44px !important;
  width: 224px !important;
}
/* inset the gold pill so the outline sits inside the rail */
body:not(.layout_frontend) a[aria-current='page'] {
  margin: 2px 8px !important;
}

/* Fit corrections v2 (2026-10-19): purpose-sized assets from /root/passwords.zip.
   The header band is 1916x160 (native), the sidebar is a 3:4 portrait shown at
   container width, and the wordmark is the new eclipse lockup. These rules
   supersede the earlier cover-scaled artwork rules above. */
body:not(.layout_frontend) header {
  background-image:
    linear-gradient(180deg, rgba(5, 9, 18, 0.30) 0%, rgba(5, 9, 18, 0.78) 100%),
    url('/images/header-band.webp') !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}
body:not(.layout_frontend) nav.tw-sticky {
  background-image:
    linear-gradient(180deg, rgba(8, 13, 25, 0.98) 0%, rgba(8, 13, 25, 0.94) 26%, rgba(8, 13, 25, 0.55) 58%, rgba(5, 9, 18, 0.32) 100%),
    url('/images/sidebar-rabbit.webp') !important;
  background-size: auto, 100% auto !important;
  background-position: center, center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
}
body:not(.layout_frontend) nav.tw-sticky :has(> bit-svg.tw-max-h-full) {
  background: url('/images/white-rabbit-vault-wordmark.webp') no-repeat left center / 196px auto !important;
  width: 204px !important;
  min-height: 38px !important;
}