/* Management Tickets — spreadsheet view of the Automated Sheets replica.
   Reuses Accounting's Tabulator visual language (oa-grid-wrap / oa-state /
   oa-calc-bar / oa-select) so the grid reads as the same spreadsheet widget. */

.mp-main--tickets {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.mt-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
}

.mt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.mt-head__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mt-toolbar,
.mt-toolbar[hidden],
.mt-caption[hidden],
.mt-banner[hidden],
.mt-grid-wrap[hidden],
#mtCalcBar[hidden],
#mtOpenSheets[hidden] {
  display: none;
}

.mt-toolbar:not([hidden]) {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-end;
  min-width: 0;
  overflow-x: auto;
}

.mt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mt-field--expire {
  flex: 0 0 auto;
}

.mt-field__label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mt-select {
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}

.mt-select--file,
#mtFileSelect {
  width: 220px;
  max-width: 220px;
}

.mt-field--job,
.mt-select--job,
#mtTabSelect {
  width: 148px;
  max-width: 148px;
}

.mt-select--status,
#mtActiveFilter {
  width: 132px;
  max-width: 132px;
}

.mt-select--pdf,
#mtPdfFilter {
  width: 128px;
  max-width: 128px;
}

.mt-search-field {
  flex: 0 0 200px;
  width: 200px;
}

/* `.mp-search` is a header control (`flex: 1 1 240px`). Inside this column
   field that basis becomes height and the grow makes width jump on wrap. */
.mt-search.mp-search,
.mt-search {
  flex: none;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  min-height: 0;
  height: auto;
  padding: 0 10px;
  border-radius: 10px;
}

.mt-search input {
  min-height: 0;
  padding: 7px 0;
  font-size: 12.5px;
}

.mt-date-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mt-date-filter input[type="date"] {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 6px;
  background: var(--surface, #fff);
  width: 132px;
}

.mt-caption:not([hidden]),
.mt-banner:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2, #f2f2f2);
  font-size: 12px;
}

.mt-caption__item,
.mt-banner__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mt-caption__label,
.mt-banner__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mt-caption__value,
.mt-banner__value {
  font-weight: 700;
  white-space: nowrap;
}

.mt-grid-wrap {
  flex: 1;
  min-height: 0;
}

.mt-grid-wrap:not([hidden]) {
  display: flex;
  flex-direction: column;
}

#mtGrid {
  flex: 1;
  min-height: 0;
}

.mt-root .tabulator {
  font-size: 12.5px;
  font-family: inherit;
  border: none;
}

.mt-root .tabulator .tabulator-header {
  background: var(--surface2, #f2f2f2);
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 11px;
  color: var(--text);
  min-height: 44px;
}

.mt-root .tabulator .tabulator-col-title {
  white-space: normal;
  line-height: 1.25;
  padding: 6px 4px;
  overflow: visible;
  text-overflow: unset;
}

.mt-root .tabulator .tabulator-col.tabulator-frozen {
  background: var(--surface2, #f2f2f2);
}

.mt-root .tabulator .mt-col-ticket {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.mt-root .tabulator-cell.mt-ticket-clear,
.mt-root .tabulator-row:hover .tabulator-cell.mt-ticket-clear {
  background: #5fd585;
  color: #102416;
  font-weight: 700;
}

.mt-root .mt-pdf-link,
.mt-root .mt-pdf-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 650;
  line-height: 1.35;
}

.mt-root .mt-pdf-link {
  color: var(--accent, #ff5a00);
  text-decoration: underline;
}

.mt-root .tabulator-cell.mt-ticket-clear .mt-pdf-link,
.mt-root .tabulator-row:hover .tabulator-cell.mt-ticket-clear .mt-pdf-link {
  color: #102416;
}

.mt-root .tabulator-row {
  border-bottom: 1px solid var(--border);
}

.mt-root .tabulator-row.tabulator-row-even {
  background: var(--surface, #fff);
}

.mt-root .tabulator-row:hover {
  background: var(--surface2, #f2f2f2) !important;
}

.mt-root .tabulator-row.mt-row-inactive {
  color: var(--text-muted);
  opacity: 0.72;
}

.oa-select {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  background: var(--surface, #fff);
  color: var(--text);
}

.oa-state {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.oa-grid-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #fff);
}

.oa-calc-bar {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .mp-main--tickets {
    overflow: visible;
    height: auto;
  }

  .mt-root {
    flex: none;
  }

  .mp-main--tickets .mp-topbar,
  .mp-main--tickets .mp-eyebrow {
    display: none;
  }

  .mp-main--tickets .mp-title {
    font-size: 1.7rem;
  }

  .mp-main--tickets .mp-subtitle {
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .mt-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .mt-head__actions .mp-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    box-sizing: border-box;
  }

  .mt-toolbar:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 8px;
    align-items: stretch;
    overflow: visible;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface, #fff);
  }

  .mt-field,
  .mt-field--job,
  .mt-field--status,
  .mt-field--pdf,
  .mt-search-field,
  .mt-field--expire,
  .mt-select--file,
  .mt-select--job,
  .mt-select--status,
  #mtFileSelect,
  #mtTabSelect,
  #mtActiveFilter,
  #mtPdfFilter {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .mt-field:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .mt-field--job {
    grid-column: 1;
    grid-row: 2;
  }

  .mt-field--status {
    grid-column: 2;
    grid-row: 2;
  }

  .mt-search-field {
    grid-column: 1 / -1;
    grid-row: 3;
    flex: none;
  }

  .mt-field--expire {
    grid-column: 1 / -1;
    grid-row: 4;
    flex: none;
  }

  .mt-field--pdf {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .mt-search.mp-search,
  .mt-search {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    box-sizing: border-box;
  }

  .oa-select,
  .mt-search input,
  .mt-date-filter input[type="date"] {
    min-height: 44px;
    font-size: 16px;
  }

  .mt-date-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .mt-date-filter > span {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .mt-date-filter input[type="date"] {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 8px 10px;
  }

  .mt-caption:not([hidden]) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }

  .mt-caption__item,
  .mt-banner__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: 100%;
  }

  .mt-caption__label,
  .mt-banner__label {
    font-size: 0.68rem;
    padding-top: 0.15em;
  }

  .mt-caption__value,
  .mt-banner__value {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .mt-grid-wrap:not([hidden]) {
    min-height: 0;
  }

  .oa-grid-wrap {
    overflow: hidden;
  }

  #mtGrid {
    height: min(62vh, 520px);
    min-height: 280px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mt-root .tabulator .tabulator-tableholder {
    -webkit-overflow-scrolling: touch;
  }

  .mt-root .tabulator .tabulator-col-title {
    white-space: normal;
  }

  .mt-root .tabulator .tabulator-cell,
  .mt-root .tabulator .tabulator-col {
    font-size: 13px;
  }

  .mt-root .tabulator-row .tabulator-cell {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}