/* =====================================================================
   DARK 360 — bază pentru modul întunecat + butonul de comutare
   ---------------------------------------------------------------------
   Culorile pentru restul interfeței sunt generate de theme360.js din
   regulile existente (vezi comentariul de acolo). Aici: doar fundalul
   paginii, schema nativă (scrollbar, controale), foaia albă a
   documentelor și butonul. Nimic din tema luminoasă nu se schimbă.
   ===================================================================== */

:root{
  --ico-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z'/%3E%3C/svg%3E");
  --ico-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7'/%3E%3C/svg%3E");
}

@media screen{

/* Bază: fundal de pagină cel mai închis (cardurile sunt un ton mai deschise) */
:root[data-theme="dark"]{color-scheme:dark;background:#0b1118}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .support-app-viewport360{background:#0b1118!important}
:where(:root[data-theme="dark"]) body{color:#dbe4ee}

/* Documentele generate rămân pe „hârtie” albă */
:where(:root[data-theme="dark"]) :where(.generated-document,.canonical-preview-page,.sample-pdf-preview-page){color:#17212b;color-scheme:light}

/* ---------------------------------------------------------------------
   Butonul de comutare (header + varianta plutitoare pentru paginile fără header)
   --------------------------------------------------------------------- */
/* !important: regulile generale pentru butoane din app.css (fundal violet, padding,
   lățime minimă) ar transforma iconița într-un buton plin. Elementul e nou, deci nu
   suprascrie nimic existent. */
.theme-toggle360,
.support-app-viewport360 .app-header .top .theme-toggle360{
  display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;
  color:var(--primary,#1f4e79)!important;font-size:0!important;cursor:pointer;transform:none!important;
}
.theme-toggle360::before{
  content:"";flex:0 0 18px;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--ico-moon) center/18px no-repeat;mask:var(--ico-moon) center/18px no-repeat;
}
.theme-toggle360:hover,
.support-app-viewport360 .app-header .top .theme-toggle360:hover{background:#eef2f7!important;color:var(--text-strong,#102c46)!important}
.theme-toggle360:focus-visible{outline:2px solid #6f45e8;outline-offset:2px}
.theme-toggle360.theme-toggle360-floating{
  position:fixed!important;top:12px;right:12px;z-index:1000;
  background:#fff!important;border:1px solid #cfd9e4!important;border-radius:999px!important;box-shadow:0 1px 3px rgba(16,44,70,.12)!important;
}

/* Telefon: header-ul are două rânduri (design360.css ≤640px). Butonul stă în colțul
   primului rând, ca rândul de acțiuni să rămână exact ca înainte. */
@media (max-width:640px){
  .support-app-viewport360 .app-header > div:first-of-type{padding-right:40px}
  .support-app-viewport360 .app-header .top .theme-toggle360{position:absolute!important;top:12px;right:12px}
}

:root[data-theme="dark"] .theme-toggle360,
:root[data-theme="dark"] .support-app-viewport360 .app-header .top .theme-toggle360{color:#c9b8ff!important}
:root[data-theme="dark"] .theme-toggle360::before{-webkit-mask-image:var(--ico-sun);mask-image:var(--ico-sun)}
:root[data-theme="dark"] .theme-toggle360:hover,
:root[data-theme="dark"] .support-app-viewport360 .app-header .top .theme-toggle360:hover{background:#1c2836!important;color:#fff!important}
:root[data-theme="dark"] .theme-toggle360.theme-toggle360-floating{background:#141d28!important;border-color:#2c3a4a!important}

}

@media print{
  .theme-toggle360{display:none!important}
}
