/* -- SKELETON SCREENS -- */
.skeleton {
  background: var(--ing-bg2);
  animation: skeleton-pulse 1.4s ease-in-out infinite alternate;
  border-radius: 2px;
}

@keyframes skeleton-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.skeleton-row {
  height: 14px;
  margin-bottom: 10px;
}

.skeleton-row--short { width: 40%; }
.skeleton-row--medium { width: 65%; }
.skeleton-row--full { width: 100%; }

.skeleton-cell {
  height: 12px;
  width: 80%;
}

/* -- VIEWPORT-AWARE TABLE LAYOUT -- */
.table-viewport-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.table-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

.table-footer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex-shrink: 0;
  border-top: 0.5px solid var(--ing-bc);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ing-bg);
  font-family: var(--ing-mono);
  font-size: 11px;
  color: var(--ing-fg3);
}

/* -- DESIGN SYSTEM REUSABLE CONTROLS -- */
#page-content input.ds-input-check {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  border: 1px solid var(--ing-bc2);
  border-radius: 2px;
  accent-color: var(--green, var(--ing-green));
  cursor: pointer;
}

.ds-avatar-square {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  background: var(--green-light, var(--ing-green-s));
  color: var(--green, var(--ing-green));
  font-family: var(--ing-mono, var(--mono));
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-toolbar-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ds-toolbar-compact__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

#page-content .ds-toolbar-compact__actions input,
#page-content .ds-toolbar-compact__actions select,
#page-content .ds-toolbar-compact__actions button {
  width: auto;
  min-width: 0;
}

/* -- PROGRESSIVE DISCLOSURE -- */
.disclosure {
  border-bottom: 0.5px solid var(--ing-bc);
}

.disclosure__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 14px 0;
  font-family: var(--ing-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ing-fg);
  cursor: pointer;
  text-align: left;
}

.disclosure__chevron {
  flex-shrink: 0;
  transition: transform 200ms var(--ing-eo);
  color: var(--ing-fg3);
}

.disclosure[data-open="true"] .disclosure__chevron {
  transform: rotate(180deg);
}

.disclosure__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--ing-eo);
}

.disclosure[data-open="true"] .disclosure__body {
  grid-template-rows: 1fr;
}

.disclosure__inner {
  overflow: hidden;
  padding-bottom: 0;
  transition: padding-bottom 220ms var(--ing-eo);
}

.disclosure[data-open="true"] .disclosure__inner {
  padding-bottom: 16px;
}

/* -- INLINE VALIDATION -- */
.field-error {
  font-family: var(--ing-mono);
  font-size: 11px;
  color: var(--ing-red);
  margin-top: 5px;
  display: none;
}

.field--invalid .field-error { display: block; }
.field--invalid .input { border-color: var(--ing-red); }
.field--valid .input { border-color: var(--ing-green); }

/* -- TRUNCATION WITH TOOLTIP -- */
.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  position: relative;
  cursor: default;
}

.truncate[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--ing-inv);
  color: var(--ing-inv-fg);
  font-family: var(--ing-mono);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  animation: fade-in 120ms var(--ing-eo);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -- RESPONSIVE TABLE -- */
@media (max-width: 768px) {
  .table-responsive thead { display: none; }

  .table-responsive tbody tr {
    display: block;
    border: 0.5px solid var(--ing-bc);
    border-radius: 2px;
    margin-bottom: 8px;
    padding: 12px;
  }

  .table-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border: none;
    font-size: 13px;
  }

  .table-responsive td::before {
    content: attr(data-label);
    font-family: var(--ing-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ing-fg3);
    flex-shrink: 0;
    margin-right: 12px;
  }

  [data-col-priority="low"] { display: none; }
}

/* -- PAGE ENTER ANIMATION -- */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-enter {
  animation: page-enter 220ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* -- OPTIMISTIC UI STATE -- */
[data-optimistic="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 160ms var(--ing-eo);
}

/* -- SCROLL SNAP (for card grids on mobile) -- */
@media (max-width: 768px) {
  .scroll-snap-x {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .scroll-snap-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 85vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--ing-bg2); }

  .disclosure__body,
  .disclosure__inner,
  .disclosure__chevron { transition: none; }

  .page-enter { animation: none; }
}