/*
 * TOÁN TIN Core Component Primitives — BUILD 7 UI-FND-1
 * Các class .tt-ui-* là API trình bày dùng chung. Không chứa business rule.
 */

.tt-ui-card,
.tt-ui-panel {
  background:var(--tt-color-surface);
  border:1px solid var(--tt-color-border);
  border-radius:var(--tt-radius-lg);
  box-shadow:var(--tt-shadow-sm);
}

.tt-ui-panel { padding:var(--tt-space-5); }

.tt-ui-icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--tt-touch-target);
  min-width:var(--tt-touch-target);
  height:var(--tt-touch-target);
  min-height:var(--tt-touch-target);
  padding:0;
  border-radius:var(--tt-radius-md);
}

.tt-ui-action-group {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--tt-space-2);
}
.tt-ui-action-group > .btn,
.tt-ui-action-group > button,
.tt-ui-action-group > a {
  min-height:var(--tt-touch-target);
}
.tt-ui-action-group--primary-first > :first-child { order:-1; }
.tt-ui-action-group__status { margin-inline-end:auto; }
.tt-ui-action-group__overflow { flex:0 0 auto; }

.tt-ui-page-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--tt-space-4);
}
.tt-ui-page-header__context { min-width:0; }
.tt-ui-page-title {
  margin:0;
  color:var(--tt-color-text);
  line-height:var(--tt-line-height-tight);
}
.tt-ui-breadcrumb {
  min-width:0;
  color:var(--tt-color-text-muted);
}

.tt-ui-state {
  display:grid;
  gap:var(--tt-space-2);
  align-content:center;
  justify-items:start;
  min-height:7rem;
  padding:var(--tt-space-5);
  border:1px dashed var(--tt-color-border-strong);
  border-radius:var(--tt-radius-lg);
  background:var(--tt-color-surface-soft);
  color:var(--tt-color-text-muted);
}
.tt-ui-state--loading { color:var(--tt-color-info); }
.tt-ui-state--empty { color:var(--tt-color-text-muted); }
.tt-ui-state--error { color:var(--tt-color-danger); background:var(--tt-color-danger-soft); }
.tt-ui-state--success { color:var(--tt-color-success); background:var(--tt-color-success-soft); }

.tt-ui-responsive-table {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

.tt-ui-form-control,
.tt-ui-form-select {
  min-height:var(--tt-touch-target);
}
.tt-ui-form-help { color:var(--tt-color-text-muted); font-size:var(--tt-font-size-sm); }
.tt-ui-form-error { color:var(--tt-color-danger); font-size:var(--tt-font-size-sm); }

.tt-ui-tabs {
  display:flex;
  gap:var(--tt-space-2);
  overflow-x:auto;
  scrollbar-width:thin;
}
.tt-ui-tabs > * { flex:0 0 auto; }

/* Operational mobile-header primitive. Existing shell classes remain authoritative for routing/behavior. */
.tt-business-shell .tt-ui-operational-header {
  isolation:isolate;
}
.tt-business-shell .tt-ui-operational-header-actions {
  min-width:0;
}
.tt-business-shell .tt-ui-operational-page-context {
  min-width:0;
}

@media (max-width:767.98px) {
  .tt-ui-page-header { flex-direction:column; align-items:stretch; }
  .tt-ui-action-group { width:100%; }
  .tt-ui-action-group > .btn,
  .tt-ui-action-group > button,
  .tt-ui-action-group > a { min-height:var(--tt-touch-target); }

  .tt-ui-responsive-table { border-radius:var(--tt-radius-md); }

  .tt-business-shell .tt-ui-operational-header-actions {
    display:flex;
    align-items:center;
    gap:var(--tt-space-2);
  }
}

@media (max-width:430px) {
  .tt-ui-action-group { gap:var(--tt-space-1); }
  .tt-ui-panel { padding:var(--tt-space-4); }
}

@media (prefers-reduced-motion:reduce) {
  .tt-ui-card,
  .tt-ui-panel,
  .tt-ui-icon-button,
  .tt-ui-action-group * {
    transition-duration:1ms !important;
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
  }
}