// ============================================================================
// Shift Master — no-scroll grid layout (2-div version)
// ----------------------------------------------------------------------------
// Structure is now: .shift-layout (main) > .shift-group-a, .shift-group-b
// (the only two sub-divs). No per-field wrapper divs — the gb-* elements
// are direct grid children of whichever group div they sit in.
//
// Each group uses grid-auto-flow: column with a fixed 3-row template, so
// fields wrap into a new column after 3 rows instead of growing the div
// taller (which is what caused the original scroll).
//
// NOTE ON ::ng-deep SELECTORS BELOW:
// I don't have access to the compiled internal markup of the gb-* component
// library from here, so the ::ng-deep selectors targeting label/description
// nodes are written against the most common naming convention
// (.gb-field-label / .gb-field-description / .field-description etc).
// Open devtools on one field and confirm the actual class names gb-input /
// gb-time / gb-newpicklist emit, and adjust the selectors in the
// "internal gb-* overrides" block below if they don't match first try.
// ============================================================================

:host {
  --gbsm-gap: 14px;
  --gbsm-row-min: 68px;
  --gbsm-border: #e0e3e8;
  --gbsm-label-color: #55606b;
  --gbsm-bg: #ffffff;
  --gbsm-accent: #6b46c1;
  --gbsm-tooltip-bg: #2b2f38;
  --gbsm-tooltip-fg: #f5f6f7;

  display: block;
}

// Dark theme overrides — matches the token pattern used on the Production
// Entry Screen (`.dark-theme` ancestor class toggled at the app shell level).
:host-context(.dark-theme) {
  --gbsm-border: #3a3f4a;
  --gbsm-label-color: #b7bec7;
  --gbsm-bg: #1e2129;
  --gbsm-accent: #a78bfa;
  --gbsm-tooltip-bg: #f5f6f7;
  --gbsm-tooltip-fg: #22252c;
}

.shift-header-actions {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px 0 0;

  .action-panel-trigger {
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gbsm-label-color);

    &:hover {
      background: rgba(107, 70, 193, 0.08);
    }
  }
}

// Main wrapper: the two groups sit side by side. No overflow/scroll here —
// see the group divs below for how the no-scroll behaviour is enforced.
.shift-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 20px 20px;
  overflow: visible;

  @media (max-width: 1100px) {
    flex-direction: column;
  }
}

// Shared behaviour for both groups: grid-auto-flow: column with a fixed
// 3-row template. Ratio between the two groups (3fr : 5fr) roughly matches
// their field counts (8 fields vs 13 fields) so column widths stay even.
%shift-group-base {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(var(--gbsm-row-min), auto));
  grid-auto-columns: minmax(150px, 1fr);
  gap: var(--gbsm-gap) 16px;
  align-items: end;

  @media (max-width: 1100px) {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.shift-group-a {
  @extend %shift-group-base;
  flex: 3 1 0;
}

.shift-group-b {
  @extend %shift-group-base;
  flex: 5 1 0;
}

// ----------------------------------------------------------------------------
// Internal gb-* overrides
// ----------------------------------------------------------------------------
// gb-* components render their own label + (optional) description + control
// markup and set their own widths inline based on the metaform Width /
// LabelWidth props — both fights we need to win to make the grid track the
// single source of truth for sizing, since there's no wrapper div per field
// to constrain width on anymore.
::ng-deep {
  .shift-group-a,
  .shift-group-b {
    gb-input,
    gb-time,
    gb-newpicklist,
    gb-checkbox,
    gb-combobox,
    gb-textarea {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      display: block;
    }

    // Force the field's own width/label-width inline styles to yield to
    // the grid track instead of the fixed pixel widths coming from the
    // metaform JSON (Width / LabelWidth).
    .gb-field-wrapper,
    .field-wrapper,
    .gb-form-field {
      width: 100% !important;
    }

    .gb-field-label,
    .field-label,
    label {
      color: var(--gbsm-label-color);
      font-size: 12.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    // The description paragraph that used to sit under the label,
    // eating 2-3 lines of vertical space per field. Collapsed to an
    // info icon + hover popover instead.
    .gb-field-description,
    .field-description,
    [class*='description'] {
      position: relative;
      display: inline-flex;
      width: 14px;
      height: 14px;
      margin-left: 2px;
      font-size: 0; // hide the raw text node visually...
      color: transparent;
      cursor: help;
      flex: 0 0 auto;

      &::before {
        content: '\e88e'; // Material "info" glyph
        font-family: 'Material Icons';
        font-size: 14px;
        line-height: 14px;
        color: var(--gbsm-accent);
        display: inline-block;
      }

      // ...and surface it again as a proper tooltip on hover/focus.
      &:hover::after,
      &:focus-within::after {
        content: attr(data-full-text);
        position: absolute;
        bottom: 130%;
        left: 0;
        z-index: 20;
        width: max-content;
        max-width: 260px;
        padding: 6px 10px;
        border-radius: 6px;
        background: var(--gbsm-tooltip-bg);
        color: var(--gbsm-tooltip-fg);
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
      }
    }

    input,
    textarea,
    .mat-select-value,
    .mat-mdc-select-value {
      font-size: 13px;
    }
  }

  // Remarks (gb-textarea) needs real height, unlike every other field —
  // let it span the full 3-row height of its column instead of being
  // squeezed to one row's min-height.
  .shift-group-b gb-textarea {
    grid-row: span 3;

    textarea {
      min-height: 100% !important;
      resize: vertical;
    }
  }

  // Checkboxes: kill the fixed width the gb-checkbox host sets, keep them
  // left-aligned and pinned to the bottom of their track so they line up
  // with adjacent text-input baselines instead of floating high.
  gb-checkbox {
    width: auto !important;
  }
}