/* =========================================================
   DYNAMIC GRID - MATERIAL AZZURRA
   ========================================================= */

.material-grid {
  --grid-primary: #1c74d5;
  --grid-primary-hover: #2880e2;
  --grid-primary-dark: #1968be;

  --grid-surface: #ffffff;
  --grid-surface-soft: #f5f8fc;
  --grid-surface-hover: #edf4fc;
  --grid-surface-selected: #dcecff;

  --grid-border: #d8e0e8;
  --grid-border-strong: #c3ced9;

  --grid-text: #263238;
  --grid-text-secondary: #607d8b;

  --grid-radius: 8px;
  --grid-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);

  background: var(--grid-surface);
  border: 1px solid var(--grid-border);
  border-radius: var(--grid-radius);
  box-shadow: var(--grid-shadow);
  overflow: hidden;
}

/* Elimina bordi e sfondi ExtJS esterni */
.material-grid.x-panel,
.material-grid>.x-panel-bodyWrap,
.material-grid .x-panel-body-default {
  background: var(--grid-surface);
  border-color: var(--grid-border);
}

/* =========================================================
   GROUPING PANEL
   ========================================================= */

.material-grid .x-grid-group-panel-body {
  background: var(--grid-surface-soft);
  border: 0;
  border-bottom: 1px solid var(--grid-border);
}

.material-grid .x-grid-group-panel-body .x-panel-header,
.material-grid .x-grid-group-panel-body .x-panel-body {
  background: transparent;
  border: 0;
}

.material-grid .x-grid-group-panel-hint {
  min-height: 36px;
  padding: 9px 14px;
  color: var(--grid-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

/* Icona configurazione del grouping panel */
.material-grid .x-grid-group-panel-body .x-tool {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.material-grid .x-grid-group-panel-body .x-tool:hover {
  background: rgba(28, 116, 213, 0.1);
}

.material-grid .x-grid-group-panel-body .x-tool-img {
  background-color: transparent;
  color: var(--grid-primary);
}

/* =========================================================
   HEADER COLONNE
   ========================================================= */

.material-grid .x-grid-header-ct {
  background: var(--grid-primary);
  border: 0;
  border-bottom: 1px solid var(--grid-primary-dark);
}

.material-grid .x-column-header {
  background: var(--grid-primary);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transition: background-color 150ms ease;
}

.material-grid .x-column-header:last-child {
  border-right: 0;
}

.material-grid .x-column-header-over,
.material-grid .x-column-header:hover {
  background: var(--grid-primary-hover);
}

.material-grid .x-column-header-sort-ASC,
.material-grid .x-column-header-sort-DESC {
  background: var(--grid-primary-dark);
}

.material-grid .x-column-header-inner {
  min-height: 40px;
  padding: 11px 10px;
}

.material-grid .x-column-header-text,
.material-grid .x-column-header-text-inner {
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 18px;
  text-transform: uppercase;
}

/* Trigger del menu colonna */
.material-grid .x-column-header-trigger {
  width: 28px;
  background-color: rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.material-grid .x-column-header-trigger:hover {
  background-color: rgba(0, 0, 0, 0.16);
}

/* Indicatori ordinamento */
.material-grid .x-column-header-sort-ASC .x-column-header-text-inner::after,
.material-grid .x-column-header-sort-DESC .x-column-header-text-inner::after {
  margin-left: 6px;
  color: #ffffff;
}

/* =========================================================
   CORPO DELLA GRID
   ========================================================= */

.material-grid .x-grid-view {
  background: var(--grid-surface);
}

.material-grid .x-grid-table {
  border-collapse: separate;
  border-spacing: 0;
}

.material-grid .x-grid-item {
  background: var(--grid-surface);
  border-color: var(--grid-border);
  color: var(--grid-text);
  transition:
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.material-grid .x-grid-item:nth-child(even) {
  background: #fafcff;
}

.material-grid .x-grid-item-over,
.material-grid .x-grid-item:hover {
  background: var(--grid-surface-hover);
}

/* Riga selezionata */
.material-grid .x-grid-item-selected {
  background: var(--grid-surface-selected) !important;
  color: var(--grid-text);
  box-shadow: inset 4px 0 0 var(--grid-primary);
}

.material-grid .x-grid-item-selected .x-grid-cell {
  background: transparent !important;
}

/* Riga focalizzata da tastiera */
.material-grid .x-grid-item-focused {
  background: var(--grid-surface-hover);
}

.material-grid .x-grid-item-focused .x-grid-cell-inner::before {
  border: 2px solid var(--grid-primary);
}

/* =========================================================
   CELLE
   ========================================================= */

.material-grid .x-grid-cell {
  background: transparent;
  border-color: var(--grid-border);
  color: var(--grid-text);
}

.material-grid .x-grid-cell-inner {
  min-height: 38px;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 20px;
}

/* Celle numeriche */
.material-grid .x-grid-cell-numbercolumn {
  color: #37474f;
  font-variant-numeric: tabular-nums;
}

/* Colonna azioni */
.material-grid .x-action-col-icon {
  margin: 0 4px;
  color: var(--grid-primary);
  opacity: 0.78;
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    color 150ms ease;
}

.material-grid .x-action-col-icon:hover {
  color: var(--grid-primary-dark);
  opacity: 1;
  transform: scale(1.12);
}

/* =========================================================
   GRUPPI
   ========================================================= */

.material-grid .x-grid-group-hd {
  background: #eef4fa;
  border-color: var(--grid-border);
}

.material-grid .x-grid-group-title {
  padding: 10px 12px;
  color: var(--grid-primary-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.material-grid .x-grid-group-hd-collapsible {
  cursor: pointer;
}

.material-grid .x-grid-group-hd-collapsible:hover {
  background: #e4effa;
}

/* =========================================================
   TOOLBAR E PAGINAZIONE
   ========================================================= */

.material-grid .x-toolbar {
  min-height: 44px;
  padding: 5px 8px;
  background: var(--grid-surface-soft);
  border-color: var(--grid-border);
}

.material-grid .x-toolbar-docked-top {
  border-bottom: 1px solid var(--grid-border);
}

.material-grid .x-toolbar-docked-bottom {
  border-top: 1px solid var(--grid-border);
}

/* Pulsanti toolbar */
.material-grid .x-toolbar .x-btn-default-toolbar-small {
  min-width: 32px;
  min-height: 32px;
  padding: 4px;
  background: transparent;
  background-image: none;
  border-color: transparent;
  border-radius: 4px;
  box-shadow: none;
}

.material-grid .x-toolbar .x-btn-default-toolbar-small:hover,
.material-grid .x-toolbar .x-btn-over.x-btn-default-toolbar-small {
  background: rgba(28, 116, 213, 0.1);
  background-image: none;
  border-color: transparent;
}

.material-grid .x-toolbar .x-btn-pressed.x-btn-default-toolbar-small {
  background: rgba(28, 116, 213, 0.18);
  background-image: none;
  border-color: transparent;
}

.material-grid .x-toolbar .x-btn-icon-el,
.material-grid .x-toolbar .x-btn-inner {
  color: var(--grid-primary);
}

/* Campi presenti nella toolbar */
.material-grid .x-toolbar .x-form-text {
  min-height: 30px;
  padding: 5px 8px;
  background: #ffffff;
  border: 1px solid var(--grid-border-strong);
  border-radius: 4px;
  color: var(--grid-text);
}

.material-grid .x-toolbar .x-form-item-focus .x-form-text,
.material-grid .x-toolbar .x-form-text:focus {
  border-color: var(--grid-primary);
  box-shadow: 0 0 0 2px rgba(28, 116, 213, 0.14);
}

/* Testo della paginazione */
.material-grid .x-toolbar-text {
  color: var(--grid-text-secondary);
  font-size: 12px;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

.material-grid ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.material-grid ::-webkit-scrollbar-track {
  background: #f1f4f7;
}

.material-grid ::-webkit-scrollbar-thumb {
  background: #b6c3cf;
  border: 2px solid #f1f4f7;
  border-radius: 8px;
}

.material-grid ::-webkit-scrollbar-thumb:hover {
  background: #8fa2b3;
}

/* =========================================================
   EDITING E VALIDAZIONE
   ========================================================= */

.material-grid .x-grid-editor {
  border-radius: 4px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.material-grid .x-grid-editor .x-form-text {
  border-color: var(--grid-primary);
  border-radius: 4px;
}

.material-grid .x-grid-dirty-cell::after {
  border-top-color: #ff9800;
}

/* =========================================================
   STATO VUOTO E LOADING
   ========================================================= */

.material-grid .x-grid-empty {
  padding: 32px 16px;
  color: var(--grid-text-secondary);
  font-size: 13px;
  text-align: center;
}

.material-grid .x-mask {
  background: rgba(245, 248, 252, 0.78);
}

.material-grid .x-mask-msg {
  padding: 12px 16px;
  background: #ffffff;
  border: 0;
  border-radius: 6px;
  box-shadow: var(--grid-shadow);
  color: var(--grid-text);
}

/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */

.material-grid .x-column-header:focus,
.material-grid .x-grid-item:focus {
  outline: none;
}

.material-grid .x-column-header.x-column-header-focus {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {

  .material-grid *,
  .material-grid *::before,
  .material-grid *::after {
    transition: none !important;
  }
}