/* ===========================================================================
   🌾 AGRICULTURAL FIELD MANAGEMENT SYSTEM – PRODUCTION MASTER
   - Table: full width, rounded corners, beveled cells, responsive scroll
   - Image column: hidden header, image pulls up, drop shadow
   - Environment column: hidden header, cell pulls up, pale yellow background
   - App version, Activation key, Expiry date: width:1%, 4px padding – shrink to content
   - Instance name column: expands to fill remaining width
   - ICON GRID: hover lift + shadow + zoom – FORCED with !important
   - ENVIRONMENT HEADER: hidden with maximum CSS force
   =========================================================================== */

/* ---------- Colour & Design Tokens ---------- */
:root {
  --ag-header-dark: #1b5e20;
  --ag-header-mid: #2e7d32;
  --ag-header-light: #66bb6a;
  --ag-border: #dcedc8;
  --ag-hover: #f1f8e9;
  --ag-radius: 8px;
  --ag-shadow: 0 2px 6px rgba(0,0,0,0.05);
  --ag-header-border: rgba(255, 255, 255, 0.5);
  --ag-bevel-light: rgba(255, 255, 255, 0.5);
  --ag-bevel-dark: rgba(0, 0, 0, 0.1);
  --ag-header-height: 45px;
  --ag-environment-bg: #fff9c4;
}

/* ---------- 0. WRAPPER – FULL WIDTH, SCROLL IF NEEDED ---------- */
.view-system-information .gin-table-scroll-wrapper {
  display: block !important;
  width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 1. TABLE – FULL WIDTH, CONTROLLED COLUMNS ---------- */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table {
  display: table !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: white;
  border-radius: var(--ag-radius);
  overflow: hidden;
  box-shadow: var(--ag-shadow);
}

/* ---------- 2. HEADER – GRADIENT, RADIUS, HIDDEN CELLS ---------- */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead {
  display: table-header-group !important;
}

.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead tr {
  display: table-row !important;
  position: static !important;
  background: linear-gradient(
    145deg,
    var(--ag-header-dark) 0%,
    var(--ag-header-mid) 60%,
    var(--ag-header-light) 100%
  ) !important;
  height: var(--ag-header-height) !important;
}

/* 🖼️ IMAGE HEADER CELL – HIDDEN, ZERO HEIGHT, NO SPACE */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead th:first-child {
  visibility: hidden !important;
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  width: auto !important;
  overflow: hidden !important;
}

/* 🧪 ENVIRONMENT HEADER CELL – MAXIMUM FORCE: HIDDEN, ZERO HEIGHT, NO TRACE */
html body .view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead tr th#view-environment-table-column {
  visibility: hidden !important;
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  width: auto !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
  opacity: 0 !important;
  color: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* 📏 REMAINING HEADERS – DEFAULT 16px PADDING (INSTANCE NAME, APP VERSION, etc.) */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead th:not(:first-child):not(#view-environment-table-column) {
  display: table-cell !important;
  background: transparent !important;
  color: white !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
  font-size: 0.95rem;
  line-height: var(--ag-header-height) !important;
  height: var(--ag-header-height) !important;
  text-align: left !important;
  border: 1px solid var(--ag-header-border) !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

/* 🔥 TIGHT COLUMNS – SHRINK TO CONTENT WIDTH (APPLICATION VERSION, ACTIVATION KEY, EXPIRY DATE) */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead th#view-application-version-table-column,
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead th#view-activation-key-table-column,
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead th#view-expiry-date-table-column {
  padding-left: 4px !important;
  padding-right: 4px !important;
  width: 1% !important;
  white-space: nowrap !important;
}

/* 🟢 ROUNDED CORNERS – FIRST VISIBLE HEADER IS INSTANCE NAME (3RD CHILD) */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead th:nth-child(3) {
  border-top-left-radius: var(--ag-radius) !important;
}
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table thead th:last-child {
  border-top-right-radius: var(--ag-radius) !important;
}

/* ---------- 3. BODY – BEVELS, HOVER, PULLED-UP CELLS, TIGHT COLUMNS ---------- */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody {
  display: table-row-group !important;
}

.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody tr {
  display: table-row !important;
}

.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td {
  display: table-cell !important;
  border-bottom: 1px solid var(--ag-border) !important;
  vertical-align: middle;
  box-shadow: 
    inset 0.1em 0.1em 0.2em var(--ag-bevel-light),
    inset -0.05em -0.05em 0.1em var(--ag-bevel-dark) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  white-space: nowrap;
}

/* 🔥 TIGHT COLUMNS – SHRINK BODY CELLS TO CONTENT WIDTH (MATCH HEADER) */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td[headers="view-application-version-table-column"],
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td[headers="view-activation-key-table-column"],
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td[headers="view-expiry-date-table-column"] {
  padding-left: 4px !important;
  padding-right: 4px !important;
  width: 1% !important;
  white-space: nowrap !important;
}

/* 💛 ENVIRONMENT CELL – PALE YELLOW BACKGROUND, TIGHT PADDING (ALL ROWS) */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td[headers="view-environment-table-column"] {
  background-color: var(--ag-environment-bg, #fff9c4) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* 🧪 FIRST ROW ENVIRONMENT CELL – PULL UP INTO HEADER (EXACTLY LIKE IMAGE) */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody tr:first-child td[headers="view-environment-table-column"] {
  transform: translateY(calc(-1 * var(--ag-header-height) + 10px)) !important;
  position: relative !important;
  z-index: 10 !important;
  background-color: var(--ag-environment-bg, #fff9c4) !important;
  box-shadow: none !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: top !important;
}

/* 🖼️ IMAGE CELL – CONTAINER (NATURAL WIDTH, PULLED UP) */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td:first-child {
  vertical-align: top !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  width: auto !important;
}

/* 🖼️ IMAGE – NATURAL SIZE */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td:first-child img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 🖼️ HERO EFFECT – FIRST ROW IMAGE PULLS UP */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody tr:first-child td:first-child img {
  transform: translateY(calc(-1 * var(--ag-header-height) + 10px)) !important;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

/* 📏 INSTANCE NAME BODY CELL – DEFAULT PADDING, EXPANDS */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td[headers="view-instance-name-table-column"] {
  padding: 12px 16px !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* SUBSEQUENT ROWS – NORMAL ALIGNMENT FOR IMAGE COLUMN */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody tr:not(:first-child) td:first-child {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  vertical-align: middle !important;
}

/* SUBSEQUENT ROWS – NORMAL ALIGNMENT FOR ENVIRONMENT COLUMN */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody tr:not(:first-child) td[headers="view-environment-table-column"] {
  transform: none !important;
  position: static !important;
  top: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  vertical-align: middle !important;
  box-shadow: 
    inset 0.1em 0.1em 0.2em var(--ag-bevel-light),
    inset -0.05em -0.05em 0.1em var(--ag-bevel-dark) !important;
  border-bottom: 1px solid var(--ag-border) !important;
}

/* ROW HOVER */
.view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody tr:hover {
  background-color: var(--ag-hover) !important;
}

/* ---------- 4. RESPONSIVE – HORIZONTAL SCROLL, DISABLE PULL-UPS ---------- */
@media (max-width: 768px) {
  .view-system-information .gin-table-scroll-wrapper {
    overflow-x: auto !important;
  }
  .view-system-information .gin-table-scroll-wrapper .views-table.views-view-table {
    min-width: 80ch;
  }
  .view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td:first-child img {
    transform: none !important;
    filter: none !important;
  }
  .view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody td:first-child {
    padding: 4px 16px !important;
  }
  .view-system-information .gin-table-scroll-wrapper .views-table.views-view-table tbody tr:first-child td[headers="view-environment-table-column"] {
    transform: none !important;
    position: static !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ===========================================================================
   🌟 ICON GRID – HOVER ANIMATION (100% FORCED – PAYROLL STYLE)
   Your HTML uses .views-view-responsive-grid__item – this is exact.
   =========================================================================== */
.views-view-responsive-grid__item {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: white;
  padding: 20px;
  text-align: center;
}

.views-view-responsive-grid__item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
  border-color: #4caf50 !important;
}

.views-view-responsive-grid__item:hover .views-field-field-menu-icon img {
  transform: scale(1.05) !important;
  transition: transform 0.2s ease !important;
}