/* KUMAI header v9. Load after the existing header/module styles.
   The source logo is 280:90; 198 px is 1.5 times its current 132 px width.
   Keep these selectors inside header.top so authentication logos are untouched. */
header.top {
  position: sticky !important;
  top: 0 !important;
  height: auto !important;
  min-height: 88px;
}

header.top > .topin {
  height: auto !important;
  min-height: 87px;
  grid-template-columns: 198px minmax(0, 1fr) minmax(0, max-content) !important;
  grid-template-rows: auto !important;
  gap: 8px 22px !important;
  padding: 10px 44px !important;
}

header.top > .topin > * {
  min-width: 0;
}

header.top .brand img {
  display: block !important;
  width: 198px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

header.top .emp {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

header.top .right {
  flex-wrap: wrap;
  gap: 8px 12px !important;
}

header.top .right > * {
  max-width: 100%;
}

header.top .right > button {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Give the employee name its own row while the logo and actions share a row. */
@media (max-width: 1100px) {
  header.top > .topin {
    grid-template-columns: 198px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 18px !important;
    padding: 10px 16px !important;
  }

  header.top .brand {
    grid-column: 1;
    grid-row: 1;
  }

  header.top .right {
    grid-column: 2;
    grid-row: 1;
  }

  header.top .emp {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Keep all account/planning actions available below the larger mobile logo. */
@media (max-width: 640px) {
  header.top > .topin {
    grid-template-columns: minmax(0, 198px) minmax(0, 1fr) !important;
    gap: 8px 12px !important;
  }

  header.top .emp {
    grid-column: 2;
    grid-row: 1;
    text-align: right !important;
    font-size: 18px !important;
  }

  header.top .right {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 8px !important;
  }
}