/* Data table + pagination -- design-handoffs/asportal-public/design-guide/
   {Portal_Table,Portal_Pagination}.css. Row heights/padding/colors at
   PC+Tablet match admin's table.css/pagination values exactly; the real
   differences are breakpoint-specific and called out below. Reassuringly,
   the table does NOT turn into a card list at any breakpoint -- Tablet
   keeps a fixed table width and scrolls horizontally below that, Mobile
   drops to its own smaller fixed width and scrolls horizontally past
   that -- both are exactly the mechanism admin's .table-scroll already
   provides.

   Per-column widths below are 패키지 현황's own real per-screen export
   (`design-handoffs/asportal-public/license status/{T),M)}Portal_패키지
   현황.css`), not this guide's generic 1000px placeholder the base build
   originally shipped with -- No/OS/패키지명/상태/만료일/다운로드 (80/168/
   509/161/161/161 = 1240px total PC+Tablet, confirmed identical between
   those two tiers both by the export's own "PC, Tablet" font-label
   grouping -- no separate PC export exists -- and by Tablet's own PNG
   showing the same unshrunk 1240px table PC's .content-inner already
   caps at). Mobile gets its own smaller set (66/80/181/161/161/161 =
   810px) confirmed via direct pixel-measurement against the Mobile PNG
   (No/OS/패키지명's boundaries) since the last three columns scroll
   off-screen in that export's own viewport-clipped canvas and can't be
   read from the PNG directly -- their 161px figures come from the CSS
   dump instead, cross-checked internally (the group header spanning all
   three is exactly 483px = 161*3, no rounding needed). `table-layout:
   fixed` + `<colgroup>` (packages/list.html) is what makes these
   authoritative instead of the browser auto-sizing columns by content. */

.table-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.table-scroll {
  overflow-x: auto;
}

.table-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.data-table {
  width: 100%;
  table-layout: fixed;
  min-width: 1240px;
  border-collapse: collapse;
  border-top: 1px solid var(--color-text-faint);
  background: var(--color-surface);
}

.col-no {
  width: 80px;
}

.col-os {
  width: 168px;
}

.col-package-name {
  width: 509px;
}

.col-status,
.col-end-date,
.col-download {
  width: 161px;
}

.data-table th {
  box-sizing: border-box;
  padding: 8px 16px;
  height: 40px;
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-muted);
  text-align: left;
  white-space: nowrap;
}

.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button.sort-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
}

.sort-link .icon {
  color: var(--color-text-placeholder);
}

.sort-link.active {
  color: var(--color-text-primary);
  font-weight: 700;
}

.sort-link.active .icon {
  color: var(--color-text-muted);
}

.data-table th a {
  color: inherit;
}

.data-table td {
  box-sizing: border-box;
  padding: 8px 16px;
  height: 44px;
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  /* Short fixed-vocabulary cell content (라이선스 상태 badges, dates, No/OS)
     shouldn't wrap at any width -- caught on Portal 패키지 현황's mobile
     render, where "만료 예정" broke onto two lines inside a narrow column.
     .ellipsis-cell (패키지명, the one genuinely long value) overrides this
     with its own nowrap+ellipsis rule already, so this is safe app-wide. */
  white-space: nowrap;
}

.data-table a {
  color: var(--color-link);
  text-decoration: none;
}

@media (hover: hover) {
  .data-table tbody tr:not(.empty-row):hover {
    background: var(--color-table-hover);
  }
}

.data-table tbody tr.selected {
  background: var(--color-table-selected);
}

.data-table .empty-row td {
  text-align: center;
  color: var(--color-text-faint);
  padding: 40px 16px;
}

.data-table .col-group-divider {
  border-left: 1px solid var(--color-border-light);
}

/* Long package names are ellipsized at rest. router.js measures the full
   label on hover and widens this *actual column* (rather than letting text
   paint over the status cell), then restores the original width on leave. */
.ellipsis-cell {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.data-table.package-name-expanded {
  min-width: var(--package-name-expanded-table-width);
}

.data-table.package-name-expanded .col-package-name {
  width: var(--package-name-expanded-width);
}

.data-table.package-name-expanded .ellipsis-cell {
  max-width: none;
  overflow: visible;
}

.icon-action-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
}

.icon-action-btn:active {
  background: var(--color-surface-muted);
}

@media (hover: hover) {
  .icon-action-btn:hover {
    background: var(--color-surface-muted);
  }
}

/* Tablet needs no separate rule here -- the base .data-table/.col-* values
   above already are the PC+Tablet values (confirmed identical, see the
   file-level comment); narrower viewports below 1240px just scroll
   .table-scroll horizontally instead of squishing the table's columns. */

/* Mobile (<=767px): its own smaller fixed column widths (see file-level
   comment) and a smaller 810px floor, not the PC/Tablet 1240px one --
   both header/data rows also shrink to a uniform 40px with 14px text,
   distinct from Tablet, which keeps the PC row heights. */
@media (max-width: 767px) {
  .data-table {
    min-width: 810px;
  }

  .col-no {
    width: 66px;
  }

  .col-os {
    width: 80px;
  }

  .col-package-name {
    width: 181px;
  }

  .data-table th,
  .data-table td {
    height: 40px;
    font-size: 14px;
  }
}

/* ---- Pagination ---- */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0 8px;
}

.pagination a:active {
  background: var(--color-surface-muted);
}

@media (hover: hover) {
  .pagination a:hover {
    background: var(--color-surface-muted);
  }
}

.pagination .page-num {
  width: 28px;
  min-width: 28px;
  padding: 0;
}

.pagination .current {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  font-weight: 700;
}

.pagination .disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

/* Portal_Pagination.css: Mobile drops the "이전"/"다음" text label
   entirely, showing bare prev/next icon buttons -- PC/Tablet keep the
   icon+text combination. .pagination-label wraps just the text part so
   it (not the icon) is what mobile hides; page-number squares are
   unchanged at every breakpoint. Selector is `.pagination
   .pagination-label`, not the bare class -- `.pagination a, .pagination
   span` above also matches this same nested span (it's a span inside
   .pagination) and its `display: flex` outranks a same-specificity bare
   `.pagination-label` rule regardless of media query or source order, so
   the label silently never actually hid on mobile until this was scoped
   to win that specificity comparison. */
@media (max-width: 767px) {
  .pagination .pagination-label {
    display: none;
  }
}