:is(#extra-specificity-hack, [data-drupal-admin-styles]) .view-content.gin-layer-wrapper,
.view-content.gin-layer-wrapper {
  border: none;
}

/* Node full pages: render blocks as Gin cards. */
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .node--view-mode-full .panel.visato-node-block-card,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .node--view-mode-full .panel.gin-layer-wrapper,
.node--view-mode-full .panel.visato-node-block-card,
.node--view-mode-full .panel.gin-layer-wrapper {
  margin-bottom: var(--gin-spacing-m, 1rem);
  border: 0;
  border-radius: 0;
  background: var(--gin-bg-layer);
  box-shadow: none;
  /* Dropbutton menus in block content must not be clipped by card containers. */
  overflow: visible;
  transition: var(--gin-transition);
}

.node--view-mode-full .panel.visato-node-block-card:hover,
.node--view-mode-full .panel.gin-layer-wrapper:hover {
  background: var(--gin-bg-item-hover);
}

.node--view-mode-full .panel.visato-node-block-card .panel__title,
.node--view-mode-full .panel.gin-layer-wrapper .panel__title {
  margin: 0;
  padding: var(--gin-spacing-m, 1rem) var(--gin-spacing-l, 1.25rem) var(--gin-spacing-s, 0.5rem);
  color: var(--gin-color-text);
  font-size: 0.9375rem;
  font-weight: 700;
  border-bottom: 1px solid var(--gin-border-color);
}

.node--view-mode-full .panel.visato-node-block-card .panel__content,
.node--view-mode-full .panel.gin-layer-wrapper .panel__content {
  padding: var(--gin-spacing-m, 1rem) var(--gin-spacing-l, 1.25rem);
}

/* Fix toolbar appearance Gin Theme – il ::before con background:primary copre il logo.
   Serve la stessa specificità di core_navigation.css che usa :is(#extra-specificity-hack, …). */
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button.current.is-active::before,
:is(#extra-specificity-hack, .gin--core-navigation [data-drupal-admin-styles]) .toolbar-button:has(+ .toolbar-popover__wrapper .is-active)::before {
  background: none;
}

/* Add Gin specific styles for input elements */

.hms-field {
  /* Apply general form element styles from Gin */
  /* Gin variables are defined in web/themes/contrib/gin/dist/css/base/gin.css */
  box-sizing: border-box;
  max-width: 100%;
  min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height)); /* iOS fix */
  padding-block: calc(var(--input-padding-vertical) - 1px); /* Gin specific */
  padding-inline: var(--input-padding-horizontal); /* Gin specific */
  color: var(--gin-color-text); /* Gin specific */
  border: 1px solid var(--gin-border-color-form-element); /* Gin specific */
  border-radius: var(--gin-border-radius-s, 4px); /* Gin specific */
  background-color: var(--gin-bg-input); /* Gin specific */
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  appearance: none;
  vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump */
  transition: var(--gin-transition); /* Gin specific */
}

/* Adjust min-width as needed */
.hms-field {
  min-width: 8.5rem; /* Adjust this value if needed */
}

/* Add states styles */
.hms-field:active {
  border-color: var(--gin-color-text); /* Gin specific */
}

.hms-field:hover {
  border-color: var(--gin-color-text); /* Gin specific */
  box-shadow: inset 0 0 0 1px var(--gin-color-text); /* Gin specific */
}

.hms-field:focus {
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border), /* Gin specific */
    0 0 0 4px var(--gin-color-focus); /* Gin specific */
}

.hms-field:hover:focus {
    box-shadow:
    0 0 0 1px var(--gin-color-focus-border), /* Gin specific */
    0 0 0 4px var(--gin-color-focus); /* Gin specific */
}

.hms-field.error {
    border-width: 2px;  /* Gin specific */
    border-color: var(--gin-color-danger); /* Gin specific */
}

/* Global scrollbar styling using Gin variables (light/dark mode aware).
   Variables on body because Gin defines --gin-color-primary on body, not :root. */
body {
  --sb-size: 12px;
  --sb-size-narrow: 6px;
  --sb-track: var(--gin-bg-layer2);
  --sb-thumb: var(--gin-color-primary-light);
  --sb-thumb-hover: var(--gin-color-primary);
}

/* Main page scrollbar (wider) */
body::-webkit-scrollbar,
.dialog-off-canvas-main-canvas::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

/* All other scrollbars (narrower) */
*::-webkit-scrollbar {
  width: var(--sb-size-narrow);
  height: var(--sb-size-narrow);
}

*::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: var(--sb-size);
}

*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: var(--sb-size);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--sb-thumb) var(--sb-track);
    scrollbar-width: thin;
  }
}

/* Fix admin-toolbar footer hidden on mobile devices */
/* On mobile browsers, 100vh includes the area behind the address/search bar. */
/* The admin-toolbar (position:fixed, height:100vh) extends beyond the visible area, */
/* pushing the footer section off-screen with no way to scroll to it. */
/* Fix: use 100dvh (dynamic viewport height) which matches the actual visible area. */
/* Specificity (1,2,1) beats core/Gin (1,1,0) without needing !important. */
#admin-toolbar.admin-toolbar[data-drupal-admin-styles] {
  height: 100dvh;
  block-size: 100dvh;
}

@supports not (height: 100dvh) {
  #admin-toolbar.admin-toolbar[data-drupal-admin-styles] {
    height: -webkit-fill-available;
    block-size: -webkit-fill-available;
  }
}

/* Fix dropbutton --extrasmall/--small su dispositivi touch (mobile).
   Claro definisce il toggle sizing sotto .no-touchevents (vedi
   core/themes/claro/css/components/dropbutton.css righe 181-194).
   Su touch/mobile quella classe non esiste, quindi il toggle resta
   a 2.75rem (da Gin :where(*) .dropbutton__toggle) dentro un
   contenitore di ~1.5rem (da Claro .dropbutton--extrasmall), causando
   overflow visibile.
   Questo fix replica le regole di Claro senza il vincolo .no-touchevents.
   Specificità (0,2,0) batte Gin :where(*) .dropbutton__toggle (0,1,0)
   e viene sovrascritta su desktop da Claro .no-touchevents ... (0,3,0). */

/* --- Toggle sizing per extrasmall (tutte le piattaforme) --- */
.dropbutton--extrasmall .dropbutton__toggle {
  width: var(--dropbutton-extrasmall-toggle-size, 1.5rem);
  height: var(--dropbutton-extrasmall-toggle-size, 1.5rem);
}

/* --- Toggle sizing per small (tutte le piattaforme) --- */
.dropbutton--small .dropbutton__toggle {
  width: var(--dropbutton-small-toggle-size, 2rem);
  height: var(--dropbutton-small-toggle-size, 2rem);
}

/* --- Freccia ridotta nei variant compatti --- */
.dropbutton--small .dropbutton__toggle::before,
.dropbutton--extrasmall .dropbutton__toggle::before {
  width: 0.75rem;
}

/* --- Margine primo item: adattato al toggle compatto ---
   Claro default usa calc(3rem + 1px) per tutti i variant su touch.
   Qui riduciamo per extrasmall e small. Specificità (0,3,0) batte
   Claro .dropbutton--multiple .dropbutton__item:first-of-type (0,2,0). */
.dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
  margin-inline-end: calc(var(--dropbutton-extrasmall-toggle-size, 1.5rem) + var(--dropbutton-toggle-size-spacing, 1px));
}

.dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
  margin-inline-end: calc(var(--dropbutton-small-toggle-size, 2rem) + var(--dropbutton-toggle-size-spacing, 1px));
}

/* --- Primo item (link/button): padding e font compatto ---
   Claro: .no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > *
   (core/themes/claro/css/components/dropbutton.css righe 268-273).
   Su touch questo non si applica, il link resta con padding/font di default.
   Specificità (0,2,1) batte Gin :where(*) .dropbutton__item:first-of-type > * (0,1,1)
   e su desktop viene sovrascritta da Claro .no-touchevents ... (0,3,1). */
.dropbutton--extrasmall .dropbutton__item:first-of-type > * {
  padding-block: calc(var(--dropbutton-extrasmall-spacing-size, 0.375rem) - var(--dropbutton-border-size, 1px));
  font-size: var(--dropbutton-extrasmall-font-size, 0.79rem);
  line-height: var(--dropbutton-extrasmall-line-height, 0.75rem);
}

.dropbutton--small .dropbutton__item:first-of-type > * {
  padding-block: calc(var(--dropbutton-small-spacing-size, 0.5rem) - var(--dropbutton-border-size, 1px));
  font-size: var(--dropbutton-small-font-size, 0.79rem);
  line-height: var(--dropbutton-small-line-height, 0.75rem);
}

/* --- Item secondari (dropdown): padding e font compatto ---
   Claro: .no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a
   (core/themes/claro/css/components/dropbutton.css righe 400-406).
   Stessa logica: su touch gli item nel dropdown restano a dimensione piena. */
.dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
  padding-block: var(--dropbutton-extrasmall-spacing-size, 0.375rem);
  font-size: var(--dropbutton-extrasmall-font-size, 0.79rem);
  line-height: var(--dropbutton-extrasmall-line-height, 0.75rem);
}

.dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
  padding-block: var(--dropbutton-small-spacing-size, 0.5rem);
  font-size: var(--dropbutton-small-font-size, 0.79rem);
  line-height: var(--dropbutton-small-line-height, 0.75rem);
}