/* Primero os imports, como no tema eCometaDemo da app tys. */
@import url('./main-layout.css');

/* Tema de la app: hereda del que diga "parent" en theme.json (basic, primary, ecometa, myapp).
   Para probar otro tema, cambia esa palabra y reinicia. Lo de aqui manda sobre el padre. */

html {
  /* Colores que los components/ del tema padre y las plantillas del core llevan escritos a pelo.
     Aqui van con su valor de siempre, asi que en claro no cambia nada; el bloque [theme~="dark"]
     de mas abajo es el que los reapunta para que el texto no se quede casi negro sobre oscuro.
     Viven en el tema de la app y no en el del jar porque el styles.css de un tema empaquetado en
     el jar del core no lo aplica Vaadin, ni usandolo directamente ni heredandolo. */
  --ecometa-form-item-label-color: #000040;
  --ecometa-legend-text-color: #29477d;
  --ecometa-legend-bg: #f9f9f9;
  --ecometa-legend-bg-query: #dbdced;
  /* azul muy claro en lugar del lila de siempre (#e0e4eb / #dbdced) */
  --ecometa-query-block-bg: hsl(214, 45%, 95%);
  /* el panel de la pantalla de query lo pinta la plantilla dynamic-qry-grid-display.ts con un
     estilo en linea, que gana a cualquier CSS: por eso tambien sale por variable */
  --ecometa-query-panel-bg: hsl(214, 45%, 96%);

  /* Las que tiñen desplegable son secciones plegables (<vaadin-side-nav>: MainLayout crea
     new SideNav(optionName) con setCollapsible(true)), non <vaadin-side-nav-item>. O tema pai
     lles pon background: var(--ecometa-side-nav-bg, hsla(0,0%,100%,0.52)), medido en #f9fafb
     sobre o #f3f5f7 do drawer: por eso salían como una pílula mais clara ca resto de opcións.
     Redefinida a transparent, quedan igual que as demas. */
  --ecometa-side-nav-bg: transparent;
  /* O pai tamén lle pinta os items con esta variable; aqui se usa sen fallback (ver abaixo),
     así que se deixa explicito o que xa se medía: sen fondo, o #f3f5f7 do drawer. */
  --ecometa-side-nav-item-bg: transparent;

  /* Desprazamento vertical co que se aliñan as iconas do menu co texto que teñen ao lado. Medido
     en pantalla (medida do bbox do <svg> proxectado a cliente contra a caixa da letra do titulo,
     Range.getClientRects co mesmo tipo de letra): sen desprazamento, o centro da tinta da icona
     cae 0,59px por debaixo do centro da caixa do texto nas filas (warning, cube, user...) e
     0,66px nas cabeceras (file-text-o, bar-chart). users, cart-o e exchange debuxan ademas outros
     0,5px mas abaixo dentro do seu cadro, así que esas tres levan o dobre. O centro da caixa e o
     mesmo para todas as etiquetas (mesma letra e tamaño), polo que aliñarse a el e o que fai que a
     columna de iconas se vexa recta. */
  --ecometa-menu-icon-shift-y: -0.6px;

  /* O numero unico do menu, para que cabeceras, opcions e fillas compartan corpo de letra,
     sangria e ritmo vertical: 30px de sangria medidos en Imagen de Codex 1.png (alii as opcions
     comezan en x=34 e as fillas en x=64); 4px e o marxe que xa levan os items, así entre duas
     filas hai sempre 8px. */
  --ecometa-menu-font-size: 13px;
  --ecometa-menu-child-indent: 30px;
  --ecometa-menu-gap: 4px;
  /* altura minima do corpo da fila (sen os 5px+5px de padding de arriba e de abaixo): 24px e o
     valor de Lumo --lumo-icon-size-m, que e o ritmo que xa teñen as fillas e o que se quer e
     xeralizar. Con el, cada fila mide 34px e con 4px+4px de marxe o paso entre filas e de 42px. */
  --ecometa-menu-row-min-height: 24px;
  /* sangria do enlace dentro da fila: de aqui sae o punto (medido en x=33/34) */
  --ecometa-menu-link-indent: 10px;
  /* o filete que main-layout.css lle pon ao scroller cando hai scroll (mismo valor medido que
     no tema eCometaDemo da app tys) */
  --ecometa-border-soft: #dddddf;

  /* Tamanos del tema padre, que se pierden al no aplicarse su styles.css. Sin ellos los campos
     miden 36px y se salen de la fila de 35px que fija vaadin-form-item: por eso los combos
     invadian la linea de abajo. */
  --lumo-line-height-m: 1.4;
  --lumo-line-height-s: 1.2;
  --lumo-line-height-xs: 1.1;
  --lumo-size-xl: 3rem;
  --lumo-size-l: 2.5rem;
  --lumo-size-m: 2rem;
  --lumo-size-s: 1.75rem;
  --lumo-size-xs: 1.5rem;
  --lumo-space-xl: 1.875rem;
  --lumo-space-l: 1.25rem;
  --lumo-space-m: 0.625rem;
  --lumo-space-s: 0.3125rem;
  --lumo-space-xs: 0.1875rem;
  --top-for-before-leggend-form-layout: -12px;

  /* ---------- demo: aspecto moderno, con la gama de e-Cometa ---------- */
  /* el azul de "COMETA" */
  --marca-azul: hsl(214, 65%, 53%);
  /* el naranja de la "E" */
  --marca-naranja: hsl(37, 88%, 57%);
  /* el azul rebajado, para fondos */
  --marca-azul-palido: hsl(214, 55%, 93%);

  /* esquinas redondeadas: es lo que mas separa el aspecto "de ahora" del de escritorio */
  --lumo-border-radius-s: 6px;
  --lumo-border-radius-m: 10px;
  --lumo-border-radius-l: 16px;

  /* Marco das tres áreas da pantalla: o panel de busqueda (#divQuery), o listado
     (<dynamic-grid>) e a ficha (#divDisplay). Os tres levan o mesmo marxe, o mesmo filete e o
     mesmo redondeo. As tres están dentro da shadow root de <dynamic-qry-grid-display>, así que
     lles se dá polas variables que a plantilla pide nos seus estilos, en
     ecometa-core/src/main/resources/META-INF/frontend/views/generic/layout/dynamic-qry-grid-display.ts. */
  --ecometa-content-margin: 4px;
  /* O marxe dereita da zona de busqueda va solo maior (o de abaixo, o listado, leva split e por
     eso esta mas metido a la izquierda): 9px para que as duas columnas cuadren. */
  --ecometa-content-margin-right: 9px;
  --ecometa-panel-border: 1px solid #68b7f0;
  --ecometa-panel-radius: 7px;

  /* el panel de busqueda: a plantilla ponlle o fondo, o filete e o radio por estilo en linea
     cun var(), así que a estes tres chega cambialos so co token, sen regra ningunha. */
  --ecometa-query-panel-border: var(--ecometa-panel-border, 1px solid #68b7f0);
  --ecometa-query-panel-radius: var(--ecometa-panel-radius, 7px);

  /* Botóns de icona (a lupa, o ollo e engadir/quitar fila): fondo branco cun filete moi fino e
     as esquinas só lixeiramente comidas, segundo BtnDeseados.png. O filete é moito máis suave ca
     o das tres áreas; medido na maqueta queda en #e2e9f3. Léos en
     components/vaadin-button.css, que e onde vive o estilo dos vaadin-button. */
  --ecometa-icon-btn-bg: #ffffff;
  --ecometa-icon-btn-border: 1px solid #e2e9f3;
  --ecometa-icon-btn-radius: 4px;
  /* Cor da icona dos botóns de icona (antes rgb(40,105,189), o acento de Lumo). Lése en
     components/vaadin-button.css, na regra :host([theme~="icon"]). */
  --ecometa-icon-btn-color: #3177bd;
  /* Cadradro dos botóns de icona: 32x32 (antes 28 de ancho x 32 de alto, Lumo daba o alto e
     nosoutros o ancho). Lese en components/vaadin-button.css. O tamaño da icona de dentro va
     aparte, porque Lumo lles pon --lumo-icon-size-m (1.5em ~ 21px) e un padding de .25em co
     box-sizing en border-box, así que a tinta queda en ~14px. Subida a 23px a tinta pasa a
     ~16px, que sigue dentro ben dentro do cadrado de 32 co filete de 1px. */
  --ecometa-icon-btn-size: 32px;
  --ecometa-icon-btn-icon-size: 23px;

  /* Desprazamento vertical co que se centra a icona dentro do botón: medida en pantalla, sen el
     o cadro de 23 cae 1px por debaixo do centro (boxOffY +1.00 en todos los botones). Ponilo a
     0 desfa o axuste para poder comparalo. Lese en components/vaadin-button.css. */
  --ecometa-icon-btn-shift-y: -1px;

  /* acento: el azul del logo */
  --lumo-primary-color: var(--marca-azul);
  --lumo-primary-color-50pct: hsla(214, 65%, 53%, 0.5);
  --lumo-primary-color-10pct: hsla(214, 65%, 53%, 0.12);
  --lumo-primary-text-color: hsl(214, 65%, 45%);
  --lumo-primary-contrast-color: #ffffff;

  /* cabecera y pie del grid: fondo azul rebajado y el filete en el naranja de la "E", que es
     lo que ata los dos colores del logo sin que el naranja invada la pantalla */
  --ecometa-grid-header-bg: var(--marca-azul-palido);
  --ecometa-grid-footer-bg: hsl(214, 50%, 89%);
  --ecometa-grid-header-color: hsl(214, 60%, 28%);
  --ecometa-grid-header-line: var(--marca-naranja);
  /* la fila seleccionada, en el naranja rebajado: con azul se confundia con la cabecera */
  --ecometa-grid-row-selected: hsl(37, 90%, 85%);

  /* cajas de entrada de la zona de busqueda */
  --ecometa-query-input-bg: #ffffff;
  --ecometa-query-input-border: hsla(214, 30%, 50%, 0.25);
  --ecometa-query-input-color: hsl(214, 30%, 20%);
}

[theme~="dark"] {
  --ecometa-form-item-label-color: var(--lumo-body-text-color);
  --ecometa-legend-text-color: var(--lumo-body-text-color);
  --ecometa-legend-bg: var(--lumo-contrast-5pct);
  --ecometa-legend-bg-query: var(--lumo-contrast-10pct);
  /* azul oscuro en vez de --lumo-contrast-10pct: ese gris sobre el fondo se veia lila */
  --ecometa-query-block-bg: hsl(214, 30%, 17%);
  --ecometa-query-panel-bg: hsl(214, 30%, 17%);
  /* o mesmo marco das tres áreas, neste caso cun azul aclarado para que non se apague sobre o
     fondo escuro; grosor e radio os mesmos, ver arriba */
  --ecometa-panel-border: 1px solid hsla(214, 85%, 72%, 0.6);
  /* os botóns de icona, no escuro, son unha superficie lixeiramente elevada sobre o panel cun
     filete aclarado: se lles deixase o branco do tema claro apagarian co fondo */
  --ecometa-icon-btn-bg: hsl(214, 26%, 23%);
  --ecometa-icon-btn-border: 1px solid hsla(214, 45%, 62%, 0.38);
  /* No escuro repítese o valor que xa tiña (o texto de acento aclarado), porque #3177bd sobre o
     fondo escuro apagaba. Deixase explicito aqui para que o token se va a par de os outros. */
  --ecometa-icon-btn-color: hsl(214, 75%, 72%);

  /* Lumo redefine sus colores dentro de este mismo selector, asi que el acento hay que repetirlo
     aqui: en html no ganaria. Sobre fondo oscuro el azul se aclara para que el boton no se
     apague, y su texto se queda en blanco. */
  --lumo-primary-color: hsl(214, 70%, 58%);
  --lumo-primary-color-50pct: hsla(214, 70%, 58%, 0.5);
  --lumo-primary-color-10pct: hsla(214, 70%, 58%, 0.15);
  --lumo-primary-text-color: hsl(214, 75%, 72%);
  --lumo-primary-contrast-color: #0c1420;

  --ecometa-grid-header-bg: hsl(214, 40%, 22%);
  --ecometa-grid-footer-bg: hsl(214, 40%, 17%);
  --ecometa-grid-header-color: hsl(214, 60%, 82%);
  --ecometa-grid-header-line: var(--marca-naranja);
  --ecometa-grid-row-selected: hsla(37, 85%, 55%, 0.25);

  /* la caja sigue clara sobre el panel oscuro, y por eso su texto va en oscuro */
  --ecometa-query-input-bg: hsl(210, 25%, 96%);
  --ecometa-query-input-border: hsla(214, 40%, 70%, 0.35);
  --ecometa-query-input-color: hsl(214, 35%, 18%);
}

/* El logo de la cabecera lo crea MainLayout con un maximo de 100px de alto, que para un logo
   apaisado es demasiado. Se limita aqui en vez de reescalar el png, que mide 308x56 y perderia
   nitidez en pantallas de alta densidad. */
[slot="drawer"] img[alt="logo"] {
	max-height: 40px;
	width: auto;
}

/* Las cajas de entrada claras de la zona de busqueda estan en
   components/vaadin-input-container.css: el formulario de busqueda vive dentro del shadow DOM
   de generated-query y desde aqui no se le llega. */

/* ---------- menu ---------- */
vaadin-side-nav-item {
	background: var(--ecometa-side-nav-item-bg) !important;
	border-radius: var(--lumo-border-radius-m);
	/* mas aire entre opciones: os mesmos 4px por lado que levan as cabeceras, así entre duas
	   filas do menu hai sempre 8px, sexan opcions, cabeceras ou fillas */
	margin: var(--ecometa-menu-gap, 4px) 6px;
	font-size: var(--ecometa-menu-font-size, 13px);
	/* sangria dos subnodos: o oco que usa Lumo ([part='link'] suma --_child_indent ao seu
	   padding-inline-start), no mesmo valor que a sangria das fillas dunha seccion */
	--vaadin-side-nav-child-indent: var(--ecometa-menu-child-indent, 30px);
	/* el filete de la izquierda aparece solo en la opcion activa, ver mas abajo */
	border-left: 3px solid transparent;
	transition: background 120ms ease-in-out;
}

/* A caixa da fila das opcions (min-height, paddings) e o seu punto decorativo movéronse a
   components/vaadin-side-nav-item.css: [part='link'] vive dentro da shadow root do item e alí
   as regras do documento perden contra as de Lumo, que é o que facia que as filas de arriba e
   as fillas teñen alturas distintas. Aliñas, o oco entre o punto e o texto deixamos que o dea o
   gap de Lumo (--lumo-space-xs) para que cabeceras e opcions o compartan tal cal. */

/* el boton de desplegar, discreto y siempre a la derecha */
vaadin-side-nav-item::part(toggle-button) {
	margin-left: auto;
	opacity: 0.6;
}

/* As cabeceras das secciones (as que levan o boton de desplegar) levan o seu color, o seu punto,
   o seu padding e o hover en components/vaadin-side-nav.css: [part='label'] vive dentro da shadow
   root do <vaadin-side-nav> e alí as regras do documento PERDEN contra as do tree interno (contra
   o "button { padding: 0; font: inherit }" dos estilos base de Lumo), así que escrito desde aqui
   non se aplicaba nada. O que si ten que estar no documento e o marxe vertical do host, que el
   si e un elemento do light DOM: 4px por lado, os mesmos que levan os items, para que entre
   filas haxa sempre 8px (o de cabecera a filla conséguen os 4px do [part='children'] do
   ficheiro de componente, somados aos 4px do marxe do item).
   A sangria dos subnodos xa non vai aqui: faiuse con --vaadin-side-nav-child-indent, no mesmo
   valor que a sangria das fillas dunha seccion, na regra de vaadin-side-nav-item de arriba. */
vaadin-side-nav {
	margin: var(--ecometa-menu-gap, 4px) 0;
}

vaadin-side-nav-item:hover {
	background: var(--lumo-primary-color-10pct) !important;
}

vaadin-side-nav-item[active] {
	/* el tema padre lo pintaba de rojo */
	background: var(--lumo-primary-color-10pct) !important;
	border-left-color: var(--lumo-primary-color);
	font-weight: 600;
}

/* As iconas das filas normais levan un circulo gris, e non e do compoñente nin de Lumo: ponollo o
   tema pai que trae o core en ecometa-core/src/main/resources/META-INF/frontend/themes/basic/
   components/vaadin-side-nav.css:9, que lle da ao envoltorio do prefixo `background:
   var(--lumo-contrast-60pct)`, `border-radius: 30px`, `width/height: 12px` e `padding: 3px`.
   As cabeceras despregables non o levan porque a súa icona vai ao slot="label", e aquela regra
   só mira o [slot="prefix"]. Desface-se aqui, no noso tema, e non no ficheiro do core: ese
   ficheiro compartiren os demais temas (o tys-, por exemplo), e eses si deben seguir co circulo.
   O resultado e que as dúas iconas quedan identicas: sen fondo, sen radio, co mesmo padding e a
   mesma cor que a regra de enriba. */
vaadin-side-nav-item > [slot='prefix'] {
	box-sizing: border-box;
	width: var(--lumo-icon-size-m); /* non "auto": o :host do vaadin-icon de Lumo levan width/height e o SVG de dentro vai a width:100%, asi que con "auto" colapsaba a 0 e a icona desaparecia */
	height: var(--lumo-icon-size-m);
	padding: 0.1em;
	background: transparent;
	border-radius: 0;
	color: var(--lumo-contrast-60pct);
	/* Co texto ao lado: a tinta da icona cae ~0,6px por debaixo do centro da caixa da letra (ver
	   --ecometa-menu-icon-shift-y). Translate, non marxe: non altera o centrado do flex do [part]. */
	translate: 0 var(--ecometa-menu-icon-shift-y, -0.6px);
}

/* Icona das cabeceras despregables: MainLayout engade un <vaadin-icon slot="label"> ao light DOM
   do host (ver addMenuIcon en coop/intergal/primary/views/MainLayout.java), e aqui dáselle o
   mesmo tamaño, separacion e cor que teñen as iconas do prefixo nas filas normais. Va no
   documento -e non en components/vaadin-side-nav.css- porque a icona e un nodo do light DOM do
   host: desde a shadow root do <vaadin-side-nav> non se lle chega sen ::slotted(), e o ::slotted()
   resultou pouco fiable na tentativa anterior. Sen o atributo menu-icon (cabeceras sen valor de
   icona na metadata) esta regra non pinta nada novo. */
vaadin-side-nav[menu-icon] > vaadin-icon[slot='label'] {
	align-self: center;
	flex: 0 0 auto;
	padding: 0.1em;
	color: var(--lumo-contrast-60pct);
	/* Mesma correccion que nas filas: 0,66px de desviacion medidos en file-text-o e bar-chart.
	   Nuns casos o titulo cabe nunha liña e noutros en duas ("Herramientas e-Cometa"), e cando
	   van duas a icona queda centrada no bloque enteiro, que e o correcto: a conta de 0,66 é
	   sobre as cabeceras dunha soa liña. */
	translate: 0 var(--ecometa-menu-icon-shift-y, -0.6px);
}

/* As iconas do menu van no light DOM (slot=prefix nas filas, slot=label nas cabeceras), así que
   tamén se lle chega desde aqui. O desprazamento comun xa as trae ao centro da caixa do texto,
   pero tres debuxan dentro do seu cadro medio pixel mas abaixo que as demas: medido co bbox do
   <svg>, users +0,48, cart-o +0,53 e exchange +0,53, mentras que warning, cube, user, bar-chart
   e cog-o dan 0,00. Esas tres levan medio pixel extra, que e o que se aprecia cando as filas van
   unhas en cima das outras. Non se lle mete a todas: as que xa salen centradas moverias era
   estragalas. */
vaadin-side-nav-item > [slot='prefix'][icon='vaadin:users'],
vaadin-side-nav-item > [slot='prefix'][icon='vaadin:cart-o'],
vaadin-side-nav-item > [slot='prefix'][icon='vaadin:exchange'] {
	translate: 0 calc(var(--ecometa-menu-icon-shift-y, -0.6px) - 0.5px);
}

/* Los botones estan en components/vaadin-button.css: los de la barra los declara la
   plantilla form-buttons-bar dentro de su shadow DOM y desde aqui no se les llega. */

/* ---------- query / listado / ficha ---------- */
/* O panel de busqueda (#divQuery), o listado (<dynamic-grid>) e a ficha (#divDisplay) non se
   poden estilizar desde este ficheiro: os tres son elementos que arma a plantilla
   dynamic-qry-grid-display.ts dentro da SUA shadow root, e o seu contedor
   (<dynamic-qry-grid-display>) herda de LitElement a secas (node_modules/lit, sen ThemableMixin).
   As regras de aqui non entran nesa root, e os ficheiros components/<etiqueta>.css tampouco
   valen, que eses inxectanse con registerStyles(), que solo consumen os elementos que extenden
   ThemableMixin (ver node_modules/@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js).
   O que si entra son as variables que a plantilla pide cun var(), y esas pidenas esta na plantilla
   en
   ecometa-core/src/main/resources/META-INF/frontend/views/generic/layout/dynamic-qry-grid-display.ts
   (--ecometa-content-margin, --ecometa-panel-border e --ecometa-panel-radius, co valor que tiñan
   antes como fallback, para que a app tys siga vendo igual). Por eso as tres areas desta pantalla
   se definen arriba coas variables e non con regras: non intentar estilizarlas desde aqui. */