/*************************************************************
 * LORDPASS THEME v8
 * Vaultwarden Web-Vault 2.0 (2026.x)
 * Datei: custom.css
 * Ablage: /var/lib/vaultwarden/web-vault/custom.css
 *************************************************************/

/* =========================================================
   LOGO – Sidebar
   Ersetzt den eingebetteten "Vaultwarden Password Manager"
   SVG durch das LordPass-Logo (PNG aus images/)
========================================================= */

bit-nav-logo svg,
bit-nav-logo bit-svg {
    display: none !important;
}

bit-nav-logo a {
    background-image: url("images/lordpass_logo.png") !important;
    background-repeat: no-repeat !important;
    background-size: 180px auto !important;
    background-position: center center !important;
    height: 148px !important;
    display: block !important;
    padding: 0 !important;
}

/* Höhe des Logo-Containers anpassen */
bit-nav-logo .tw-h-\[73px\] {
    height: 148px !important;
}

/* =========================================================
   PRIMÄRFARBE – CSS-Variablen (wirkt auf Tailwind-Klassen
   wie tw-bg-primary-600, tw-text-primary-600 usw.)
   Vaultwarden 2.0 nutzt CSS Custom Properties.
========================================================= */

:root {
    --color-primary-300: 149 220 80;   /* Helles Grün für Focus-Rings */
    --color-primary-600: 93 201 1;     /* LordPass-Grün #5DC901        */
    --color-primary-700: 74 170 0;     /* Dunkleres Grün für Hover     */
}

/* =========================================================
   DARK MODE – Hintergrund & Text
========================================================= */

html.theme_dark,
html.theme_dark body {
    background-color: #222020 !important;
    color: #E6E6E6 !important;
}

/* Hauptcontent-Bereich */
html.theme_dark .tw-bg-background {
    background-color: #222020 !important;
}

/* Alt-Hintergrund (Panels, Filter-Header) */
html.theme_dark .tw-bg-background-alt {
    background-color: #2A2828 !important;
}

html.theme_dark .tw-bg-background-alt3 {
    background-color: #2A2828 !important;
}

/* =========================================================
   DARK MODE – Sidebar
========================================================= */

html.theme_dark .tw-bg-bg-sidenav {
    background-color: #111010 !important;
}

html.theme_dark .tw-text-fg-sidenav-text,
html.theme_dark .tw-fill-fg-sidenav-text {
    color: #E6E6E6 !important;
    fill: #E6E6E6 !important;
}

/* Aktives Sidebar-Item */
html.theme_dark .tw-bg-bg-sidenav-active-item {
    background-color: rgba(93, 201, 1, 0.22) !important;
}

/* =========================================================
   LIGHT MODE – Sidebar
========================================================= */

html.theme_light .tw-bg-bg-sidenav {
    background-color: #F4F4F4 !important;
}

html.theme_light .tw-text-fg-sidenav-text,
html.theme_light .tw-fill-fg-sidenav-text,
html.theme_light nav .tw-text-fg-sidenav-text,
html.theme_light bit-side-nav .tw-text-fg-sidenav-text,
html.theme_light bit-nav-item a,
html.theme_light bit-nav-item span,
html.theme_light bit-nav-item i,
html.theme_light bit-nav-group a,
html.theme_light bit-nav-group span {
    color: #111111 !important;
    fill: #111111 !important;
}

/* Aktives Sidebar-Item */
html.theme_light .tw-bg-bg-sidenav-active-item {
    background-color: rgba(93, 201, 1, 0.18) !important;
}

/* =========================================================
   LINKS (tw-text-fg-brand = "brand colored text links")
   Betrifft vault-Eintrags-Links, Sidebar-Hilfelinks etc.
========================================================= */

.tw-text-fg-brand {
    color: #5DC901 !important;
}

.tw-text-fg-brand:hover,
.hover\:tw-text-fg-brand-strong:hover,
.tw-text-fg-brand-strong {
    color: #4AAA00 !important;
}

/* =========================================================
   BUTTONS – Primary (tw-bg-primary-600)
   "+ New" Button und alle anderen primary-Buttons
========================================================= */

/* Primär-Button: Hintergrund & Border */
.tw-bg-primary-600 {
    background-color: #5DC901 !important;
}
.tw-border-primary-600 {
    border-color: #5DC901 !important;
}

/* Hover-Zustand */
.hover\:tw-bg-primary-700:hover {
    background-color: #4AAA00 !important;
}
.hover\:tw-border-primary-700:hover {
    border-color: #4AAA00 !important;
}

/* Focus-Ring */
.focus-visible\:tw-ring-primary-600:focus-visible {
    --tw-ring-color: #5DC901 !important;
}

/* Text auf Primary-Button bleibt weiß/contrast */
.tw-bg-primary-600 .tw-text-contrast,
.tw-bg-primary-600,
[class*="tw-bg-primary-600"] {
    color: #ffffff !important;
}

/* =========================================================
   CHECKBOXEN – checked state
========================================================= */

.checked\:before\:tw-bg-primary-600:checked::before {
    background-color: #5DC901 !important;
}
.checked\:before\:tw-border-primary-600:checked::before {
    border-color: #5DC901 !important;
}
.indeterminate\:before\:tw-bg-primary-600:indeterminate::before {
    background-color: #5DC901 !important;
}

/* =========================================================
   BADGE "Me" (Owner-Badge in der Vault-Liste)
   Wird per inline-style gesetzt; zusätzlich als Fallback
========================================================= */

html.theme_dark [bitbadge].tw-bg-primary-100 {
    background-color: rgba(93, 201, 1, 0.20) !important;
    border-color: #5DC901 !important;
    color: #5DC901 !important;
}

html.theme_light [bitbadge].tw-bg-primary-100 {
    background-color: rgba(93, 201, 1, 0.15) !important;
    border-color: #4AAA00 !important;
    color: #3A8800 !important;
}

/* =========================================================
   INPUTS – Dark Mode
========================================================= */

html.theme_dark input,
html.theme_dark textarea,
html.theme_dark select {
    background-color: #2E2C2C !important;
    border-color: #4A4848 !important;
    color: #E6E6E6 !important;
}

html.theme_dark input::placeholder,
html.theme_dark textarea::placeholder {
    color: #888888 !important;
}

/* Focus-Border für Inputs */
html.theme_dark input:focus,
html.theme_dark textarea:focus {
    border-color: #5DC901 !important;
}

/* =========================================================
   INPUTS – Light Mode
========================================================= */

html.theme_light input,
html.theme_light textarea,
html.theme_light select {
    background-color: #FFFFFF !important;
    border-color: #CFCFCF !important;
    color: #111111 !important;
}

html.theme_light input:focus,
html.theme_light textarea:focus {
    border-color: #5DC901 !important;
}

/* =========================================================
   DROPDOWNS – ng-select (Timeout, Language, Theme etc.)
   appendTo="body" → Panel hat keinen Theme-Kontext.
   Neutraler Stil der in Light und Dark lesbar ist.
========================================================= */

/* Trigger-Feld: angezeigter Wert (im Theme-Kontext) */
html.theme_light .ng-select .ng-select-container,
html.theme_light .ng-select .ng-select-container .ng-value-container,
html.theme_light .ng-select .ng-value-label,
html.theme_light .ng-select .ng-placeholder {
    color: #111111 !important;
    background-color: transparent !important;
}
html.theme_light .ng-select .ng-input input {
    color: #111111 !important;
    background-color: transparent !important;
}

html.theme_dark .ng-select .ng-select-container,
html.theme_dark .ng-select .ng-select-container .ng-value-container,
html.theme_dark .ng-select .ng-value-label,
html.theme_dark .ng-select .ng-placeholder {
    color: #E6E6E6 !important;
    background-color: transparent !important;
}
html.theme_dark .ng-select .ng-input input {
    color: #E6E6E6 !important;
    background-color: transparent !important;
}

/* Panel: immer hell – Light Mode perfekt, Dark Mode akzeptabel */
.ng-dropdown-panel {
    background-color: #F4F4F4 !important;
    border: 1px solid #CFCFCF !important;
    color: #111111 !important;
}

.ng-dropdown-panel .ng-option {
    background-color: #F4F4F4 !important;
    color: #111111 !important;
}

.ng-dropdown-panel .ng-option.ng-option-hover,
.ng-dropdown-panel .ng-option:hover {
    background-color: rgba(93, 201, 1, 0.25) !important;
    color: #111111 !important;
}

.ng-dropdown-panel .ng-option.ng-option-selected,
.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked {
    background-color: rgba(93, 201, 1, 0.35) !important;
    color: #111111 !important;
}

/* =========================================================
   FILTER-PANEL (linke Spalte) & TABELLEN
========================================================= */

/* Dark Mode: Filter-Panel Rahmen */
html.theme_dark .tw-border-secondary-300 {
    border-color: #3A3838 !important;
}

html.theme_dark .tw-border-secondary-100 {
    border-color: #333131 !important;
}

/* Dark Mode: Tabellenzeilen-Hover */
html.theme_dark .hover\:tw-bg-hover-default:hover {
    background-color: rgba(93, 201, 1, 0.08) !important;
}

/* Light Mode: Tabellenzeilen-Hover */
html.theme_light .hover\:tw-bg-hover-default:hover {
    background-color: rgba(93, 201, 1, 0.07) !important;
}

/* =========================================================
   SIDEBAR – Item Hover (beide Themes)
========================================================= */

.hover\:tw-bg-bg-sidenav-item-hover:hover {
    background-color: rgba(93, 201, 1, 0.18) !important;
}

/* =========================================================
   SPINNER – Primärfarbe
========================================================= */

.tw-stroke-primary-600 {
    stroke: #5DC901 !important;
}

/* =========================================================
   TRENNLINIE in der Sidebar (Divider)
========================================================= */

html.theme_dark .tw-bg-secondary-300 {
    background-color: #3A3838 !important;
}

/* =========================================================
   SONSTIGES
========================================================= */

/* Verhindert transparente Texte (Tailwind-Artefakt) */
.tw-text-transparent {
    color: currentColor !important;
}