body[data-theme-light], body[data-theme-light-highcontrast] {
background-image: linear-gradient(90deg, #00b1d5, #00ccf5) !important;
--color-primary: #00bddf;
--color-primary-element: #00bddf;
--color-primary-element-hover: #00aecd;
--color-primary-element-text: #000000;
--color-primary-text: #000000;
}
@media (prefers-color-scheme: light) {
body[data-theme-default] {
background-image: linear-gradient(90deg, #00b1d5, #00ccf5) !important;
--color-primary: #00bddf;
--color-primary-element: #00bddf;
--color-primary-element-hover: #00aecd;
--color-primary-element-text: #000000;
--color-primary-text: #000000;
}
}

body[data-theme-dark], body[data-theme-dark-highcontrast] {
background-image: linear-gradient(90deg, #1c4e5f, #063a4c) !important;
--color-primary: #00bddf;
--color-primary-element: #00bddf;
--color-primary-element-hover: #00aecd;
--color-primary-element-text: #000000;
--color-primary-text: #000000;
}
@media (prefers-color-scheme: dark) {
body[data-theme-default] {
background-image: linear-gradient(90deg, #1c4e5f, #063a4c) !important;
--color-primary: #00bddf;
--color-primary-element: #00bddf;
--color-primary-element-hover: #00aecd;
--color-primary-element-text: #000000;
--color-primary-text: #000000;
}
}

:root{
--block-radius: 12px;
--wrapper-radius: 16px;
--brand-dark: #00B1D5;
--brand-light: #00CCF5;
--nav-active: rgba(0, 179, 243, .4);
}

#app-navigation, #app-navigation-vue, .app-navigation,
#app-content, #app-content-vue, .app-content, aside 
{border-radius: var(--block-radius);}
#content, body > .content { padding: var(--body-container-margin) !important; 
background: var(--color-main-background-blur);
gap: var(--body-container-margin);}
#content .content, body > .content {height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin)*3); 
width: calc(100% - var(--body-container-margin) * 4);
border-radius: 0;
gap: var(--body-container-margin);}
.content .app-navigation--closed, #content-vue .app-navigation--close {
margin-inline-start: calc(-1 * min(308px, var(--app-navigation-max-width))) !important;
}
.app-navigation-toggle-wrapper button {margin-right: -8px}

nav[class*=app-navigation] li.active, nav[class*=app-navigation] .app-navigation-entry.app-navigation-entry--legacy.active, #app-navigation-vue .active,
.list-item__wrapper--active .list-item, .list-item__wrapper.active .list-item {background: var(--nav-active) !important; --color-primary-element-text:var(--color-main-text) !important;}
nav[class*=app-navigation] li.active a, nav[class*=app-navigation] .app-navigation-entry.app-navigation-entry--legacy.active a > *б
.list-item__wrapper--active .list-item, .list-item__wrapper.active .list-item {background: transparent !important; color: var(--color-main-text) !important;}
nav[class*=app-navigation] li.active a > img {filter: var(--background-invert-if-dark) !important;}
nav[class*=app-navigation] li.active a svg {fill: var(--color-main-text); }
nav[class*=app-navigation] li:hover, nav[class*=app-navigation] .app-navigation-entry.app-navigation-entry--legacy:hover {
    --color-primary-element-hover: rgba(0, 179, 243, .4);
}
/* контент = СОЛИД White (lvl3); правые углы скругляет #content-vue */
#app-content, #app-content-vue, .app-content {
  background-color: var(--color-main-background);
}
#app-navigation, #app-navigation-vue, .app-navigation {
  background-color: var(--color-main-background-blur)
}
#header #nextcloud {
  padding-inline-start: 308px;
  height: 100%;
  margin: 0;
}
#header #nextcloud .logo {
  width: 280px;
  top: 0px;
  bottom: 0px;
  inset-inline-start: 8px;
  background-position: left center;
  background-size: auto 146%; /* сплющено: ширина фикс, высота меньше выпирает — как на рисунке */
}
#header .header-start .app-menu {
  margin-inline-start: -8px;
}
.files-list .files-list__row-icon-overlay {--color-primary-element-text:var(--color-background-plain-text);}
/* === Buttons (design doc «Buttons & Navigation»): Brand bg ГРАДИЕНТ, radius .5em ===
   реальный NC33-класс = .button-vue--primary (не --vue-primary!). Текст авто-контраст NC. */
/* NC33 имеет ДВА класса primary: --primary и --vue-primary — покрываем оба */
.button-vue--primary,
.button-vue--vue-primary,
button.primary {
  background-image: linear-gradient(90deg, var(--brand-dark), var(--brand-light)) !important;
  border-radius: .5em; 
  transition: filter ease-out .3s !important;
  border-width: 0px !important;
  --color-primary-element-text: var(--color-background-plain-text);
}
.button-vue--primary:hover:not(:disabled),
.button-vue--vue-primary:hover:not(:disabled) { filter: brightness(1.1); }
.button-vue--primary:active:not(:disabled),
.button-vue--vue-primary:active:not(:disabled) { filter: brightness(.9); }
.button-vue--primary:disabled,
.button-vue--vue-primary:disabled { opacity: .3; filter: saturate(.7); }
@media screen and (max-width:640px) {
  #header #nextcloud { padding-inline-start: 120px; }
  /* contain: лого реально УМЕНЬШАЕТСЯ (иначе auto 150% только обрезает по ширине) */
  #header #nextcloud .logo {
    left: -157px;
  }
}
#content-vue.app-mail #app-content-vue > .app-content-wrapper {
border-start-start-radius: inherit;
}
#content-vue > div:empty, #content-vue > div:not(:has(*))  {display: none;}
.button-vue--tertiary .button-vue__text {font-weight: 300 !important}
/* ============================= login page */
.guest-box {
  width: 360px !important;
  padding: 24px;
  background: transparent;
  box-shadow: none;
  --color-main-text: #fff;
  --color-main-background: transparent;
  --color-primary-element: #fff;
  --color-primary-element-light-hover: var(--nav-active);
  --color-background-hover: #ffffff42;
  --color-border-maxcontrast: #fff;
  --color-main-background: #00bae0;
  --color-text-maxcontrast: #ffffffb5;
  --color-text-error: #e20000;
  --color-border-error: #ff1919;
}
.header-guest > .logo {background-position: 50% 90% !important; width: 220px !important; height: 24vh !important;}
.guest-box .input-field__input {
  border-color: var(--color-border-maxcontrast) !important;
  border-width: 1px;
  box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 4px var(--color-main-background) !important;
}
.guest-box .button-vue--vue-primary {--color-primary-element-text: #fff;
  border: #ffffff8c 1px solid !important;
  filter: brightness(1.1);
}
.guest-box .button-vue--vue-primary:hover {filter: brightness(1.16)}

#body-user.onlyoffice-inline #content-vue {
  padding-block: 0 !important;
  height: calc(100% - var(--header-height));
}

#body-public:has(iframe[name="frameEditor"]) #content.app-public {
  padding-block: 0 !important;
}

#body-public:has(iframe[name="frameEditor"]) #app > iframe[name="frameEditor"] {
  height: calc(100dvh - var(--header-height));
}

#body-user.onlyoffice-inline .onlyoffice-iframe-container {
  overflow: clip;
}
body[data-theme-light], body[data-theme-light-highcontrast] {
#header { background: transparent !important; background-image: none !important; }

/* lvl3 База = solid White → контент, СТРОКИ файлов, модалки, поповеры — БЕЛЫЕ */
--color-main-background: #FFFFFF;
--color-main-background-blur: rgba(255, 255, 255, .6);

/* lvl4 */
--nav-active: rgba(0, 179, 243, .4);
--color-background-dark: #EBF5F8;
--color-background-darker: #DEEBF0;
--color-background-hover: rgba(0, 179, 243, .1);
--color-primary-element-light: rgba(0, 179, 243, .12);
--color-primary-element-light-hover: rgba(0, 179, 243, .2);
--color-primary-element-light-text: #004B67;
--color-main-text: #004B67;
--color-text-maxcontrast: #3C85A0;
--color-border: #AFCFDB;      /* Neutral-200 PRIMARY border — разделители списков */
--color-border-dark: #AFCFDB;
--color-border-maxcontrast: #3C85A0; /* Neutral-400 — контуры полей */
--color-error: #F30000;
--color-success: #4BFAB4;
/* контент стыкуется с nav ВСТЫК — без скругления слева (внешние углы клипует #content-vue)
#app-content, #app-content-vue, .app-content { border-radius: 0 !important; } */

/* active nav pill: в светлом макете БЛЕДНАЯ (Brand dark .1), не солидный primary */
/* .app-navigation-entry.active {
  background: rgba(0, 179, 243, .12) !important;
}
.app-navigation-entry.active * {
  color: #004B67 !important;
} */
--color-primary-light: rgba(0, 179, 243, .1);
--color-primary-light-text: #004B67;
/* thead underline: в макете светлая, не цвета текста */
.files-list__thead, .files-list__table thead, thead { border-bottom-color: #AFCFDB !important; }

/* header icons: белые SVG на циан-градиенте — ОТКЛЮЧИТЬ invert */
--background-image-invert-if-bright: no;
--color-background-plain-text: #FFFFFF;
#header .app-menu-icon, #header .header-menu__trigger, #header .unified-search__trigger-icon { filter: none !important; }
}
@media (prefers-color-scheme: light) {
body[data-theme-default] {
#header { background: transparent !important; background-image: none !important; }

/* lvl3 База = solid White → контент, СТРОКИ файлов, модалки, поповеры — БЕЛЫЕ */
--color-main-background: #FFFFFF;
--color-main-background-blur: rgba(255, 255, 255, .6);

/* lvl4 */
--nav-active: rgba(0, 179, 243, .4);
--color-background-dark: #EBF5F8;
--color-background-darker: #DEEBF0;
--color-background-hover: rgba(0, 179, 243, .1);
--color-primary-element-light: rgba(0, 179, 243, .12);
--color-primary-element-light-hover: rgba(0, 179, 243, .2);
--color-primary-element-light-text: #004B67;
--color-main-text: #004B67;
--color-text-maxcontrast: #3C85A0;
--color-border: #AFCFDB;      /* Neutral-200 PRIMARY border — разделители списков */
--color-border-dark: #AFCFDB;
--color-border-maxcontrast: #3C85A0; /* Neutral-400 — контуры полей */
--color-error: #F30000;
--color-success: #4BFAB4;
/* контент стыкуется с nav ВСТЫК — без скругления слева (внешние углы клипует #content-vue)
#app-content, #app-content-vue, .app-content { border-radius: 0 !important; } */

/* active nav pill: в светлом макете БЛЕДНАЯ (Brand dark .1), не солидный primary */
/* .app-navigation-entry.active {
  background: rgba(0, 179, 243, .12) !important;
}
.app-navigation-entry.active * {
  color: #004B67 !important;
} */
--color-primary-light: rgba(0, 179, 243, .1);
--color-primary-light-text: #004B67;
/* thead underline: в макете светлая, не цвета текста */
.files-list__thead, .files-list__table thead, thead { border-bottom-color: #AFCFDB !important; }

/* header icons: белые SVG на циан-градиенте — ОТКЛЮЧИТЬ invert */
--background-image-invert-if-bright: no;
--color-background-plain-text: #FFFFFF;
#header .app-menu-icon, #header .header-menu__trigger, #header .unified-search__trigger-icon { filter: none !important; }
}
}

body[data-theme-dark], body[data-theme-dark-highcontrast] {
#header { background: transparent !important; background-image: none !important; } /* шапка = Page bg #103643 (бирюза), НЕ чёрная */

--color-main-background: #051016;
--color-main-background-blur: rgba(5, 16, 22, .4);

--color-background-dark: #0a2028;
--color-background-darker: #030b10;
--color-background-hover: rgba(0, 224, 255, .1);
--color-primary-element-light: rgba(0, 224, 255, .12);
--color-primary-element-light-hover: rgba(0, 224, 255, .2);
--color-primary-element-light-text: #FFFFFF;
--color-main-text: #e3f6ff;
--color-text-maxcontrast: #AFCFDB;
--color-border: #14424f;
--color-border-dark: #0e3540;
--color-error: #F30000;
--color-success: #4BFAB4;
/* контент стыкуется с nav ВСТЫК — без скругления слева (внешние углы клипует #content-vue)
#app-content, #app-content-vue, .app-content { border-radius: 0 !important; } */

/* active pill gradient: активный пункт nav = яркий Brand bg градиент (макет dark) */
/* .app-navigation-entry.active { background-image: linear-gradient(90deg, #00B3F3, #00E0FF) !important; } */

/* header icons: белые SVG — ОТКЛЮЧИТЬ invert (NC включал его из-за светлого primary → чёрные иконки на тёмной шапке) */
--background-image-invert-if-bright: no;
--color-background-plain-text: #FFFFFF;
#header .app-menu-icon, #header .header-menu__trigger, #header .unified-search__trigger-icon { filter: none !important; }
}
@media (prefers-color-scheme: dark) {
body[data-theme-default] {
#header { background: transparent !important; background-image: none !important; } /* шапка = Page bg #103643 (бирюза), НЕ чёрная */

--color-main-background: #051016;
--color-main-background-blur: rgba(5, 16, 22, .4);

--color-background-dark: #0a2028;
--color-background-darker: #030b10;
--color-background-hover: rgba(0, 224, 255, .1);
--color-primary-element-light: rgba(0, 224, 255, .12);
--color-primary-element-light-hover: rgba(0, 224, 255, .2);
--color-primary-element-light-text: #FFFFFF;
--color-main-text: #e3f6ff;
--color-text-maxcontrast: #AFCFDB;
--color-border: #14424f;
--color-border-dark: #0e3540;
--color-error: #F30000;
--color-success: #4BFAB4;
/* контент стыкуется с nav ВСТЫК — без скругления слева (внешние углы клипует #content-vue)
#app-content, #app-content-vue, .app-content { border-radius: 0 !important; } */

/* active pill gradient: активный пункт nav = яркий Brand bg градиент (макет dark) */
/* .app-navigation-entry.active { background-image: linear-gradient(90deg, #00B3F3, #00E0FF) !important; } */

/* header icons: белые SVG — ОТКЛЮЧИТЬ invert (NC включал его из-за светлого primary → чёрные иконки на тёмной шапке) */
--background-image-invert-if-bright: no;
--color-background-plain-text: #FFFFFF;
#header .app-menu-icon, #header .header-menu__trigger, #header .unified-search__trigger-icon { filter: none !important; }
}
}