/* ============================================================
   MNIT VAULT THEME v2
   Palette officielle My New IT :
     base       #0d0d0d   border      #222222
     text       #e8e8e8   muted       #888888   faint #444
     green      #3DB52C   green-neon  #00ff88
     cyan       #06b6d4   amber       #f59e0b
   Fonts : Outfit (sans), JetBrains Mono (mono)
   Cible : Vaultwarden timshel web-vault_override
   ============================================================ */

:root {
  --mnit-bg:          #0d0d0d;
  --mnit-bg-alt:      #131313;
  --mnit-bg-alt2:     #1a1a1a;
  --mnit-bg-card:     #141414;
  --mnit-border:      #222222;
  --mnit-border-soft: #2a2a2a;
  --mnit-text:        #e8e8e8;
  --mnit-muted:       #888888;
  --mnit-faint:       #555555;
  --mnit-green:       #3DB52C;
  --mnit-green-neon:  #00ff88;
  --mnit-cyan:        #06b6d4;
  --mnit-amber:       #f59e0b;
  --mnit-red:         #ef4444;
  --mnit-font-sans:   'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mnit-font-mono:   'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --mnit-shadow-soft: 0 6px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35);
  --mnit-shadow-glow: 0 0 24px rgba(0,255,136,0.18), 0 0 6px rgba(61,181,44,0.45);
}

/* === 1. Override CSS variables Vaultwarden (Bitwarden Tailwind tokens) === */
html.theme_dark,
html.theme_light,
html.mnit-vault,
:root {
  --color-background:         13 13 13 !important;
  --color-background-alt:     19 19 19 !important;
  --color-background-alt2:    20 20 20 !important;
  --color-background-alt3:    26 26 26 !important;
  --color-background-alt4:    10 10 10 !important;
  --color-shadow:             0 255 136 !important;
  --color-transparent-hover:  rgb(0 255 136 / 0.06) !important;
  --color-primary-100:        219 247 226 !important;
  --color-primary-300:        100 220 130 !important;
  --color-primary-600:        61 181 44 !important;
  --color-primary-700:        47 140 33 !important;
  --color-secondary-100:      36 36 36 !important;
  --color-secondary-300:      136 136 136 !important;
  --color-secondary-500:      170 170 170 !important;
  --color-secondary-600:      232 232 232 !important;
  --color-secondary-700:      255 255 255 !important;
  --color-info-100:           7 25 47 !important;
  --color-info-600:           6 182 212 !important;
  --color-info-700:           4 138 161 !important;
  --color-warning-100:        50 31 8 !important;
  --color-warning-600:        245 158 11 !important;
  --color-warning-700:        180 110 6 !important;
  --color-danger-100:         50 13 13 !important;
  --color-danger-600:         239 68 68 !important;
  --color-danger-700:         180 40 40 !important;
  --color-success-100:        12 41 25 !important;
  --color-success-600:        0 255 136 !important;
  --color-success-700:        47 140 33 !important;
  --color-text-main:          232 232 232 !important;
  --color-text-muted:         136 136 136 !important;
  --color-text-contrast:      13 13 13 !important;
  --color-text-alt2:          255 255 255 !important;
  --color-text-code:          0 255 136 !important;
  --color-marketing-logo:     232 232 232 !important;
  --color-art-primary:        61 181 44 !important;
  --color-art-accent:         0 255 136 !important;
}

/* === 2. Body / layout frontend === */
html, html.theme_light, html.theme_dark, html.mnit-vault {
  color-scheme: dark;
  background: var(--mnit-bg);
}
/* CRITIQUE : kill min-width 1010px hardcode par Vaultwarden styles.css
   = condition sine qua non pour avoir un layout responsive sur < 1010px */
html, body {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
body, html.theme_light body, html.theme_dark body {
  background-color: var(--mnit-bg) !important;
  color: var(--mnit-text) !important;
  font-family: var(--mnit-font-sans) !important;
}
body.layout_frontend,
html.theme_light body.layout_frontend,
html.theme_dark body.layout_frontend {
  background-color: var(--mnit-bg) !important;
  color: var(--mnit-text) !important;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(61,181,44,0.10) 0%, transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(0,255,136,0.07) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.018) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.018) 39px 40px);
  background-attachment: fixed;
}

/* === 3. Auth anon layout (login/SSO/signup) === */
auth-anon-layout, auth-anon-layout main {
  background-color: transparent !important;
}
.tw-bg-background-alt2,
[class*="tw-bg-background-alt2"] {
  background-color: var(--mnit-bg-alt) !important;
  border: 1px solid var(--mnit-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--mnit-shadow-soft) !important;
}
.tw-bg-background,
.tw-bg-background-alt,
[class*="tw-bg-background"]:not([class*="alt2"]):not([class*="alt3"]):not([class*="alt4"]) {
  background-color: transparent !important;
}

/* === 4. HIDE Vaultwarden top-left wordmark + inject MNIT logo === */
auth-anon-layout main > a > bit-icon svg,
auth-anon-layout main > a bit-icon svg[viewBox="0 0 290 60"] {
  display: none !important;
}
auth-anon-layout main > a {
  display: block !important;
  width: 240px !important;
  height: 56px !important;
  background-image: url("images/logo-white.svg?v=men182") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  margin-bottom: 32px !important;
}
auth-anon-layout main > a bit-icon {
  display: none !important;
}

/* === 5. Auth section icon (cloud/key) - tint to MNIT green === */
auth-anon-layout main > div > div > bit-icon svg .tw-fill-art-primary,
bit-icon svg .tw-fill-art-primary {
  fill: var(--mnit-green-neon) !important;
}
auth-anon-layout main > div > div > bit-icon svg .tw-fill-art-accent,
bit-icon svg .tw-fill-art-accent {
  fill: var(--mnit-green) !important;
}

/* === 6. Headings (page title) === */
h1, h2, h3, h4, h5,
.tw-text-main,
[class*="tw-text-main"] {
  color: var(--mnit-text) !important;
  font-family: var(--mnit-font-sans) !important;
}
auth-anon-layout h1 {
  color: var(--mnit-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}
auth-anon-layout h1::before {
  content: "[ ";
  color: var(--mnit-green-neon);
  font-family: var(--mnit-font-mono);
  font-weight: 400;
  margin-right: 4px;
  font-size: 0.85em;
}
auth-anon-layout h1::after {
  content: " ]";
  color: var(--mnit-green-neon);
  font-family: var(--mnit-font-mono);
  font-weight: 400;
  margin-left: 4px;
  font-size: 0.85em;
}

/* === 7. Inputs === */
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
.bit-input,
bit-input input,
bit-form-field input {
  background-color: var(--mnit-bg-alt2) !important;
  color: var(--mnit-text) !important;
  border: 1px solid var(--mnit-border) !important;
  border-radius: 8px !important;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, bit-input input:focus, bit-form-field input:focus {
  border-color: var(--mnit-green) !important;
  box-shadow: 0 0 0 2px rgba(0,255,136,0.18) !important;
  outline: none !important;
}
::placeholder { color: var(--mnit-faint) !important; }

/* === 8. Buttons === */
.btn-primary,
button.btn-primary,
button[type="submit"].btn-primary,
button.tw-bg-primary-600,
[class*="tw-bg-primary-600"]:not(input):not(div) {
  background: linear-gradient(180deg, var(--mnit-green) 0%, #2f8c21 100%) !important;
  border: 1px solid var(--mnit-green) !important;
  color: #0d0d0d !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  box-shadow: 0 4px 18px rgba(61,181,44,0.30) !important;
  transition: transform .08s, box-shadow .15s, background .15s !important;
}
.btn-primary:hover, button.btn-primary:hover {
  background: linear-gradient(180deg, var(--mnit-green-neon) 0%, var(--mnit-green) 100%) !important;
  box-shadow: 0 6px 28px rgba(0,255,136,0.50) !important;
}
.btn-outline-primary, button.btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--mnit-border) !important;
  color: var(--mnit-text) !important;
}
.btn-outline-primary:hover {
  border-color: var(--mnit-green) !important;
  color: var(--mnit-green-neon) !important;
  background: rgba(0,255,136,0.06) !important;
}
.btn-secondary, button.btn-secondary {
  background-color: var(--mnit-bg-alt2) !important;
  border: 1px solid var(--mnit-border) !important;
  color: var(--mnit-text) !important;
}
.btn-danger {
  background: linear-gradient(180deg, var(--mnit-red), #b62a2a) !important;
  border-color: var(--mnit-red) !important;
  color: #fff !important;
}

/* === 9. Links === */
a, a:not(.btn):not(.btn-primary):not(.btn-secondary) {
  color: var(--mnit-green-neon) !important;
}
a:hover { color: #4dffae !important; text-decoration: underline; }

/* === 10. Topbar / nav (post-login) === */
.navbar, header,
.tw-bg-background-alt3,
[class*="tw-bg-background-alt3"] {
  background-color: #0a0a0a !important;
  border-bottom: 1px solid var(--mnit-border) !important;
}
bit-nav, bit-nav-logo {
  background-color: #0a0a0a !important;
  border-right: 1px solid var(--mnit-border) !important;
}
bit-nav-item a, bit-nav-item button {
  color: var(--mnit-muted) !important;
  border-radius: 8px !important;
  margin: 2px 6px !important;
  transition: all .12s !important;
}
bit-nav-item a:hover, bit-nav-item button:hover,
bit-nav-item[active] a, bit-nav-item.active a {
  background: rgba(0,255,136,0.08) !important;
  color: var(--mnit-green-neon) !important;
  border-left: 2px solid var(--mnit-green) !important;
}

/* === 11. Cards / list items (post-login) === */
.bit-list-item, bit-item {
  background-color: var(--mnit-bg-alt) !important;
  border: 1px solid var(--mnit-border) !important;
  border-radius: 12px !important;
  transition: border-color .12s !important;
}
.bit-list-item:hover, bit-item:hover {
  border-color: var(--mnit-green) !important;
  box-shadow: 0 4px 16px rgba(0,255,136,0.08) !important;
}

/* === 12. Tables === */
table, .table {
  background-color: transparent !important;
  color: var(--mnit-text) !important;
}
table th, .table th {
  background-color: var(--mnit-bg-alt2) !important;
  color: var(--mnit-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: .5px !important;
  border-bottom: 1px solid var(--mnit-border) !important;
}
table td { border-top: 1px solid var(--mnit-border) !important; }
table tr:hover { background-color: rgba(0,255,136,0.03) !important; }

/* === 13. Modal === */
.modal-content, bit-dialog, [role="dialog"] {
  background-color: var(--mnit-bg-card) !important;
  border: 1px solid var(--mnit-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--mnit-shadow-soft) !important;
}
.modal-header, .modal-footer { border-color: var(--mnit-border) !important; }

/* === 14. Tooltips / dropdown === */
.tooltip-inner, .popover, .dropdown-menu, bit-menu {
  background-color: var(--mnit-bg-alt2) !important;
  border: 1px solid var(--mnit-border) !important;
  color: var(--mnit-text) !important;
}

/* === 15. Code === */
code, pre, .bit-code-block {
  font-family: var(--mnit-font-mono) !important;
  background-color: #0a0a0a !important;
  border: 1px solid var(--mnit-border) !important;
  color: var(--mnit-green-neon) !important;
  border-radius: 6px !important;
}

/* === 16. Spinners === */
.bwi-spinner { color: var(--mnit-green-neon) !important; }

/* === 17. SSO button === */
button[class*="sso"], .sso-login, .btn-sso,
button.btn-block:has(i.bwi-discord) {
  background: linear-gradient(180deg, #5865F2 0%, #4752c4 100%) !important;
  color: white !important;
  border: 1px solid #5865F2 !important;
  font-weight: 600 !important;
}

/* === 18. FOOTER : style Vaultwarden legal notice ultra discret === */
footer.tw-text-center,
footer[class*="tw-mt"] {
  opacity: 0.35 !important;
  font-size: 10px !important;
  margin-top: 40px !important;
  filter: grayscale(1);
}
footer .!tw-text-sm, footer * {
  color: var(--mnit-faint) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

/* === 19. Brand stamp footer (page chrome) === */
body.layout_frontend::before {
  content: "MY NEW IT VAULT";
  position: fixed;
  top: 22px;
  right: 24px;
  font-family: var(--mnit-font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--mnit-faint);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
  padding: 4px 10px;
  border: 1px solid var(--mnit-border);
  border-radius: 4px;
}
body.layout_frontend::after {
  content: ">> zero-knowledge password manager // chiffrement local // self-hosted";
  position: fixed;
  bottom: 16px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--mnit-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--mnit-faint);
  text-transform: lowercase;
  pointer-events: none;
  z-index: 1;
}

/* === 20. Scrollbar === */
* { scrollbar-width: thin; scrollbar-color: #2a2a2a #0d0d0d; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #0d0d0d; }
*::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--mnit-green); }

/* === 21. Selection === */
::selection { background: rgba(0,255,136,0.30); color: var(--mnit-text); }

/* === 22. Defensive === */
.text-muted { color: var(--mnit-muted) !important; }
.toast { background-color: var(--mnit-bg-card) !important; border-left: 3px solid var(--mnit-green-neon) !important; }

/* ============================================================
   === 23. RESPONSIVE BREAKPOINTS ===
   Cible : tablet (max 1024px), mobile (max 768px), small mobile (max 480px)
   But  : neutraliser les pseudo-elements decoratifs qui se superposent
          au contenu sur petits ecrans + adapter le wordmark MNIT.
   ============================================================ */

/* --- Tablet & below : reduire densite des pseudo-elements fixes --- */
@media (max-width: 1024px) {
  body.layout_frontend::before {
    top: 12px;
    right: 12px;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 3px 7px;
  }
  body.layout_frontend::after {
    font-size: 8px;
    letter-spacing: 1px;
    bottom: 10px;
    padding: 0 12px;
  }
  auth-anon-layout main > a {
    width: 200px !important;
    height: 46px !important;
    margin-bottom: 28px !important;
  }
}

/* --- Mobile : cacher pseudo-elements decoratifs pour ZERO overlap
       avec le wordmark MNIT top-left et le footer legal Vaultwarden.
       Sur mobile l'espace est trop precieux, on garde uniquement
       le wordmark cliquable + le contenu. --- */
@media (max-width: 768px) {
  body.layout_frontend::before,
  body.layout_frontend::after {
    display: none !important;
  }

  /* Wordmark plus compact pour ne pas dominer l'ecran */
  auth-anon-layout main > a {
    width: 170px !important;
    height: 40px !important;
    margin-bottom: 24px !important;
  }

  /* Padding main reduit + permet le centrage sur petits ecrans */
  auth-anon-layout main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 24px !important;
  }

  /* Titre h1 plus modeste sur mobile */
  auth-anon-layout h1 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  /* Boutons largeur 100% (deja le cas mais on force) */
  auth-anon-layout button.btn-primary,
  auth-anon-layout button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Small mobile (iPhone SE etc.) --- */
@media (max-width: 480px) {
  auth-anon-layout main > a {
    width: 150px !important;
    height: 36px !important;
  }
  auth-anon-layout h1 {
    font-size: 1.2rem !important;
  }
  auth-anon-layout main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* === MEN-180 : Remplacer le center cloud icon par MNIT shield (v2, 14/05/2026) ===
   Vraie structure DOM: auth-anon-layout > main > DIV > DIV > BIT-ICON > SVG
   Donc selectors DESCENDANT (non child) requis. On cible UNIQUEMENT le bit-icon
   contenant le cloud (viewBox 0 0 120 100) pour ne PAS toucher au wordmark. */
auth-anon-layout main bit-icon:has(svg[viewBox="0 0 120 100"]),
auth-anon-layout main bit-icon:has(svg[viewBox="0 0 100 100"]) {
  display: inline-block !important;
  width: 128px !important;
  height: 128px !important;
  background-image: url("images/icon-white.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  filter: drop-shadow(0 0 24px rgba(0,255,136,0.25)) !important;
  position: relative !important;
}
auth-anon-layout main bit-icon:has(svg[viewBox="0 0 120 100"]) svg,
auth-anon-layout main bit-icon:has(svg[viewBox="0 0 100 100"]) svg {
  display: none !important;
}
/* Fallback sans :has() : tous les SVG cloud sont caches puis on injecte le shield
   via le SVG existant (en background sur le SVG lui-meme). */
auth-anon-layout main svg[viewBox="0 0 120 100"],
auth-anon-layout main svg[viewBox="0 0 100 100"] {
  background: url("images/icon-white.svg") center/contain no-repeat !important;
  filter: drop-shadow(0 0 24px rgba(0,255,136,0.25));
}
auth-anon-layout main svg[viewBox="0 0 120 100"] > *,
auth-anon-layout main svg[viewBox="0 0 100 100"] > * {
  display: none !important;
}

/* === MEN-181 : Rebrand footer Vaultwarden -> My New IT (14/05/2026) ===
   Footer DOM :
     <footer class="tw-text-center tw-mt-4 sm:tw-mt-6">
       <environment-selector>...</environment-selector>
       <div bittypography="body2" class="!tw-text-sm">Vaultwarden Web</div>   <- line 1
       <div bittypography="body2" class="!tw-text-sm">2025.5.1</div>           <- line 2
       <br>
       <div bittypography="helper" id="vw-disclaimer" class="!tw-text-xs">    <- legal AGPL
         A modified version of the Bitwarden® Web Vault...
       </div>
     </footer>
   On replace via CSS content (no JS needed pour le footer). */

/* Hide les 2 lignes "Vaultwarden Web" + "2025.5.1" originales */
auth-anon-layout footer > div[bittypography="body2"] {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/* Cache aussi le <br> entre les 2 sections */
auth-anon-layout footer > br {
  display: none !important;
}

/* Inject "My New IT - Password Manager" en remplacement, AVANT le disclaimer */
auth-anon-layout footer > #vw-disclaimer::before {
  content: "My New IT — Password Manager" !important;
  display: block !important;
  visibility: visible !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--mnit-text, #e8e8e8) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 14px !important;
  text-shadow: 0 0 18px rgba(0,255,136,0.10);
}

/* Le disclaimer legal reformule : reduit a 9px / 0.30 opacite (clause AGPL respectee) */
auth-anon-layout footer > #vw-disclaimer {
  font-size: 9px !important;
  line-height: 1.4 !important;
  opacity: 0.28 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  letter-spacing: 0.2px !important;
}