/* ADATASK_THEME_DARK_V1 — dark mode for the whole system (owner request, 1405/07/17).
   Adatask has dozens of modules with their own fixed colours, so one curated layer on the root element turns the whole
   app dark at once: colours are inverted and rotated back to their own hue (the brand purple stays purple, teal stays
   teal), blacks are softened and whites dimmed for comfortable reading. On the root element this filter does not
   change how fixed headers and modals are positioned. Photos, videos, maps, embedded pages and inline background
   images are turned back to their true colours, and a few brand surfaces (CRM top bar, splash) keep their own design.
   The switch lives in the top bar (adatask-theme-v1.js); the choice is a per-device preference. */
html[data-adatask-theme="dark"]{
  filter:invert(1) hue-rotate(180deg) brightness(.94) contrast(.92);
  background:#fff;
  color-scheme:light;
}
/* true colours for media and pictures */
html[data-adatask-theme="dark"] :is(img,video,picture,iframe,embed,object,[style*="url("],.adatask-theme-keep-v1):not(:is([style*="url("],.adatask-theme-keep-v1,#adatask-splash-v3156,.crm2.crm-reference .app-bar) *){
  filter:invert(1) hue-rotate(180deg);
}
/* the startup splash and the CRM brand bar keep their own dark design */
html[data-adatask-theme="dark"] #adatask-splash-v3156,
html[data-adatask-theme="dark"] .crm2.crm-reference .app-bar{
  filter:invert(1) hue-rotate(180deg);
}
/* shadows read as glows once inverted; keep them subtle */
html[data-adatask-theme="dark"] ::selection{background:#c9b6f0;color:#111}
html[data-adatask-theme="dark"] ::-webkit-scrollbar-thumb{background:#c4ccd8}

/* the switch itself */
.adatask-theme-toggle-v1{
  position:relative;flex-shrink:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #D7E2EE;border-radius:12px;background:#fff;color:#203A66;cursor:pointer;padding:0;overflow:hidden;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.adatask-theme-toggle-v1:hover{background:#F3F6FB;border-color:#C7D4E4}
.adatask-theme-toggle-v1:active{transform:scale(.94)}
.adatask-theme-toggle-v1:focus-visible{outline:2px solid #9759E7;outline-offset:2px}
.adatask-theme-toggle-v1 svg{position:absolute;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.adatask-theme-toggle-v1 .att-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.adatask-theme-toggle-v1 .att-moon{opacity:1;transform:none}
html[data-adatask-theme="dark"] .adatask-theme-toggle-v1 .att-sun{opacity:1;transform:none}
html[data-adatask-theme="dark"] .adatask-theme-toggle-v1 .att-moon{opacity:0;transform:rotate(90deg) scale(.5)}
.adatask-claude-mobile-topbar-v1 .adatask-theme-toggle-v1{width:34px;height:34px;border-radius:10px}
.adatask-claude-mobile-topbar-v1 .adatask-theme-toggle-v1 svg{width:17px;height:17px}

/* a circular reveal from the switch when the browser supports view transitions */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.adatask-theme-toggle-v1 svg{transition:none}}
/* modal backdrops darken the page in dark mode too (a light tint reads as dark after the root filter) */
html[data-adatask-theme="dark"] .crm2.crm-reference .overlay{background:rgba(214,224,236,.55)}