// Browsers give form/table elements (button, input, select, table) their own default UI font
// instead of inheriting from ancestors, unlike plain text elements - so this screen's own
// <table>/<button>/checkboxes were rendering off the project's common font (Inter, set project-wide
// in gbcommonstyle.scss, but only for Material-based elements via ::ng-deep .mat-mdc-*, which
// doesn't reach these plain native elements) even though the shared gb-input/gb-date/gb-combobox/
// gb-newpicklist controls already matched it correctly.
:host {
  font-family: 'Inter', sans-serif;

  button,
  input,
  select,
  table,
  a {
    font-family: inherit;
  }
}
.grid-link {
  color: var(--action-primary-default);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
// ---- Task Name lightbox backdrop (same overlay pattern as taskview.component.scss) - centers
// its content (app-tasklightbox's own .MMLightBox) instead of just being a full-bleed backdrop
// the content stretches to fill, which is what made the lightbox look "full screen" before. ----
.LightBoxmodal {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}

.workbench-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 20px;
}

// ---- Call mode filter row: Status/Alloted Type/Alloted To/Call Type, laid out like a compact
// inline form rather than gb-filter's own dynamic criteria chip. ----
.call-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}

.call-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.call-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

// ---- Toolbar row: Tasks/Calls toggle, Filter chip, Select/Deselect all, Update/Clear ----
.toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0 16px;
  flex-wrap: wrap;
}

.type-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-subtle);
  border-radius: 20px;
  padding: 3px;
}

.toggle-btn {
  border: none;
  background: transparent;
  padding: 6px 16px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--action-primary-default);
  cursor: pointer;

  &.active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }
}

.filter-chip-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.filter-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 7px;
  pointer-events: none;
}

.text-link {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

// ---- Common button style, matching gb-formaction's own .savebutton/.addnewbutton (same theme
// tokens - Angular component styles are view-encapsulated, so the class itself can't be reused
// directly, but the design tokens driving it can). ----
.btn-primary {
  background-color: var(--button-primary-bg-default);
  color: var(--button-primary-text-default);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: -1px 2px 2px 0px #00000026;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--button-secondary-border-default);
  color: var(--button-secondary-text-default);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.toolbar-spacer {
  flex: 1;
}

// ---- Grid (plain table + shared form controls) ----
.grid-scroll {
  width: 100%;
  max-height: 480px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-sizing: border-box;

  // The native horizontal scrollbar is a decoration pinned to this box's own bottom edge -
  // regardless of vertical scroll position, that put it on top of whichever row happened to
  // render at the viewport's bottom edge, silently swallowing clicks meant for that row's
  // controls (e.g. the Status combobox never opening). Splitting horizontal/vertical scroll onto
  // separate elements would dodge that, but mat-select's CDK overlay positioning gets confused by
  // nested scrollable ancestors and stops opening its panel for any row past the first - so
  // instead, suppress only the horizontal scrollbar's own paint/space here. Scrolling
  // horizontally still works (trackpad, Shift+wheel, click-drag) - only the bar itself no longer
  // renders, so there's nothing left to overlap a row.
  &::-webkit-scrollbar:horizontal {
    display: none;
    height: 0;
  }
}

.workbench-grid {
  width: 100%;
  // border-collapse:collapse + position:sticky thead is a known rendering quirk (Chrome/Edge)
  // that shifts the sticky header out of alignment with the scrolling body - separate collapses
  // that by giving header/body borders their own box instead of a shared collapsed edge.
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;

  th,
  td {
    padding: 4px 10px;
    text-align: left;
    white-space: nowrap;
    font-size: 13px;
    vertical-align: middle;
    // Hard clip - whatever a shared control renders internally, it physically cannot spill past
    // its own cell into a neighboring row/column. This is the actual fix for the overlap; the
    // sizing rules below are just to make the clipped content look reasonable, not load-bearing.
    overflow: hidden;
  }

  // border-collapse: separate (above) means a border set directly on <tr> is never painted by the
  // browser - only borders on the cells themselves render under this model. The row divider line
  // has to live here, not on tbody tr below.
  tbody td {
    border-bottom: 1px solid var(--border-default);
  }

  thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
  }

  // Generous row height, matching the shared controls' own NATURAL (unforced) size, rather than
  // squeezing them down to a compact pixel height - every previous attempt at compacting them
  // (34px, 36px, 44px...) fought Material's own internal box model closely enough that something
  // always ended up a few px taller than intended and got clipped by this cell's own
  // overflow: hidden, which is what was silently breaking the Status combobox click for any row
  // whose control rendered even slightly outside the too-tight box. Give it real headroom instead
  // of chasing the exact right number.
  tbody tr {
    height: 64px;

    &:hover {
      background-color: var(--bg-selected, #F3EEFB);
    }

    // Checked (via the row checkbox, or auto-checked by editing any cell) - stays highlighted
    // regardless of hover so it's obvious which rows are queued for the next Update.
    &.row-selected {
      background-color: var(--bg-selected, #F3EEFB);
    }
  }

  .num-col {
    text-align: right;
  }

  .muted-cell {
    color: var(--text-secondary);
  }

  .no-data {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px;
  }

  // ---- Fixed per-column widths ----
  .col-checkbox {
    width: 36px;
  }

  .col-status {
    width: 110px;
  }

  .col-allocation {
    width: 90px;
  }

  .col-allocsplit {
    width: 190px;
  }

  .col-no {
    width: 100px;
  }

  .col-name {
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .col-seq {
    width: 80px;
  }

  .col-person {
    width: 170px;
  }

  .col-hours {
    width: 100px;
  }

  .col-date {
    width: 140px;
  }

  .col-remarks {
    width: 170px;
  }

  .col-refnum {
    width: 130px;
  }

  .col-parent {
    width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // ---- Call mode's own, simpler column set ----
  .col-call-name {
    width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .col-call-person {
    width: 160px;
  }

  .col-call-type {
    width: 140px;
  }
}

.grid-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  background: var(--bg-surface);
}

.grid-input-narrow {
  padding: 5px 4px;
  text-align: center;
}

.grid-link {
  color: var(--action-primary-default);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

// ---- Shared Material-based controls (gb-input/gb-date/gb-combobox) inside grid cells. All
// three share the same internal structure: an always-rendered ".formlabel" div (empty text here,
// hidden below) plus a "mat-form-field.Mat_Form_Field" that renders at its own natural height -
// deliberately not forced to a specific pixel height here (see tbody tr above for why). Scoped to
// this screen's table only, not the shared components' own stylesheets. ----
.workbench-grid td {
  gb-input, gb-date, gb-combobox, gb-newpicklist {
    display: block;
    width: 100%;
  }

  ::ng-deep .formlabel {
    display: none !important;
  }

  // No forced height on the Mat_Form_Field/text-field-wrapper/form-field-infix chain - every
  // attempt at compacting them down to a specific pixel height (34px, 36px, 44px) ended up
  // slightly mismatched against Material's own internal box model, and the overflow got clipped
  // by this cell's overflow: hidden, silently breaking that row's click target. Let each control
  // render at its own natural height instead (tbody tr above has real headroom for it) - only
  // trim font-size/subscript space, which don't affect the box height Material itself computes.
  ::ng-deep .mat-mdc-form-field-subscript-wrapper {
    display: none !important;
  }

  ::ng-deep .Mat_Form_Field,
  ::ng-deep .mdc-text-field__input,
  ::ng-deep input.mat-mdc-input-element,
  ::ng-deep .mat-mdc-select-value,
  ::ng-deep .mat-mdc-select-value-text,
  ::ng-deep .mat-mdc-select-min-line {
    font-size: 12px !important;
  }

  ::ng-deep .mat-mdc-select-arrow svg {
    width: 14px;
  }

  // gb-newpicklist renders NONE of the mat-form-field markup above when used in "grid mode"
  // (GridIndex != -1, our case for Allocation Split/Assignee/Incharge/Parent) - it's a plain
  // <input class="form_input"> + sibling <mat-icon> chevron instead, so it needs its own,
  // completely separate compact rule.
  gb-newpicklist {
    ::ng-deep .form_input {
      font-size: 12px !important;
      height: 28px !important;
      line-height: 28px !important;
    }

    ::ng-deep mat-icon {
      font-size: 18px !important;
      width: 18px !important;
      height: 18px !important;
      line-height: 18px !important;
    }
  }
}

// ---- Footer ----
.footer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 14px;
}

.footer-count,
.footer-selected {
  font-size: 12px;
  color: var(--text-secondary);
}

.footer-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-page-indicator {
  font-size: 12px;
  color: var(--text-secondary);
}

// These 3 rules have no preceding scoped ancestor before ::ng-deep, so Angular can't scope them -
// they apply globally, app-wide, for the lifetime of the session once this component has loaded
// once (cdk-overlay-container is portaled to <body>, outside this component's own DOM, so a truly
// scoped version would never match it anyway). Pushing that shared CDK layer to an extreme
// z-index for every screen in the app is a real risk on its own, and is removed here rather than
// just turned down - if a genuine stacking conflict shows up on this screen specifically, it needs
// a fix scoped to what's actually on this page, not a blanket global override.