/* tab-content.css — WI-219
 *
 * Shared styling for drawer tab bodies (OpsDrawer / SidePanel). The owner's
 * standard, after WI-196 shipped with "Loading..." stuck states: EVERY drawer
 * tab gets loading skeletons, empty-states, error-states, sectioned cards,
 * and tables rendered with this stylesheet.
 *
 * Visual language is NOT redesigned here — it codifies what the existing
 * Profiles drawer already does (gradient header lives in side-panel.css,
 * 2-column grid sections, muted uppercase labels, compact tables, icon +
 * title section headers).
 *
 * Dependency order in the page: booking-links.css (tokens) → side-panel.css
 * → ops-drawer.css → tab-content.css → page-specific stylesheet.
 */

/* ========================================================================
   .tab-content-section — card section with icon + title + optional Edit
   (mirrors .profile-section from profiles.css)
   ======================================================================== */

.tab-content-section {
  margin-bottom: var(--spacing-lg, 24px);
  padding-bottom: var(--spacing-lg, 24px);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.tab-content-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tab-content-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  margin-bottom: var(--spacing-md, 16px);
}

.tab-content-section-header .material-icons {
  color: var(--color-primary, #2b6cb0);
  font-size: 20px;
}

.tab-content-section-header h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: var(--color-text-primary, #2d3748);
}

.tab-content-section-header .tab-section-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  color: var(--color-text-secondary, #718096);
  cursor: pointer;
  font-family: inherit;
}

.tab-content-section-header .tab-section-edit-btn:hover {
  background: var(--color-bg-page, #f7fafc);
  color: var(--color-text-primary, #2d3748);
}

.tab-content-section-header .tab-section-edit-btn .material-icons {
  font-size: 14px;
  color: inherit;
}

/* 2-column data grid used inside sections (mirrors .profile-fields-grid
   and .agency-info-grid — both survive as aliases below). */
.tab-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}

.tab-content-grid .tab-content-grid-full {
  grid-column: span 2;
}

/* ========================================================================
   .tab-form-row — label + input + hint (Personal Information layout)
   ======================================================================== */

.tab-form-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tab-form-row > label,
.tab-form-row .tab-form-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text-secondary, #718096);
  opacity: 0.8;
  display: block;
}

.tab-form-row .tab-form-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary, #2d3748);
}

.tab-form-row .tab-form-hint {
  font-size: 11px;
  color: var(--color-text-secondary, #718096);
  margin-top: 4px;
}

.tab-form-row input.tab-form-input,
.tab-form-row textarea.tab-form-input,
.tab-form-row select.tab-form-input {
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--color-border-input, #cbd5e0);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-input, #ffffff);
  color: var(--color-text-primary, #2d3748);
}

.tab-form-row input.tab-form-input:focus,
.tab-form-row textarea.tab-form-input:focus {
  outline: none;
  border-color: var(--color-primary, #2b6cb0);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.12);
}

/* ========================================================================
   .tab-section-title — icon + bold text (for inline subtitles)
   ======================================================================== */

.tab-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--color-text-primary, #2d3748);
}

.tab-section-title .material-icons {
  font-size: 18px;
  color: var(--color-primary, #2b6cb0);
}

/* ========================================================================
   .tab-empty-state — the thing WI-219 was opened to fix
   Centered content, muted, optional CTA button.
   ======================================================================== */

.tab-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-secondary, #718096);
  gap: 10px;
}

.tab-empty-state .tab-empty-icon {
  font-size: 48px;
  color: var(--color-text-light, #a0aec0);
  opacity: 0.9;
  margin-bottom: 2px;
}

.tab-empty-state .tab-empty-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary, #2d3748);
  margin: 0;
}

.tab-empty-state .tab-empty-body {
  font-size: 13px;
  color: var(--color-text-secondary, #718096);
  max-width: 360px;
  line-height: 1.5;
}

.tab-empty-state .tab-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary, #2b6cb0);
  background: var(--color-primary, #2b6cb0);
  color: #ffffff;
  border-radius: var(--radius-sm, 4px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.tab-empty-state .tab-empty-cta:hover {
  background: var(--color-primary-hover, #2563eb);
  border-color: var(--color-primary-hover, #2563eb);
}

.tab-empty-state .tab-empty-cta .material-icons {
  font-size: 16px;
}

/* ========================================================================
   .tab-loading-skeleton — shimmer rows
   Controlled by inline style --skeleton-rows or JS helper (renderLoadingSkeleton).
   ======================================================================== */

.tab-loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}

.tab-loading-skeleton .tab-skeleton-row {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #eef2f7 0%,
    #f7fafc 50%,
    #eef2f7 100%
  );
  background-size: 200% 100%;
  animation: tabSkeletonShimmer 1.6s ease-in-out infinite;
}

.tab-loading-skeleton .tab-skeleton-row-sm { height: 10px; }
.tab-loading-skeleton .tab-skeleton-row-lg { height: 22px; }

.tab-loading-skeleton .tab-skeleton-row-width-60 { width: 60%; }
.tab-loading-skeleton .tab-skeleton-row-width-75 { width: 75%; }
.tab-loading-skeleton .tab-skeleton-row-width-90 { width: 90%; }

.tab-loading-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  padding: 16px 0;
}

@keyframes tabSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================================================
   .tab-error-state — error icon + message + retry
   ======================================================================== */

.tab-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 10px;
  color: #742a2a;
}

.tab-error-state .tab-error-icon {
  font-size: 40px;
  color: #e53e3e;
}

.tab-error-state .tab-error-headline {
  font-size: 15px;
  font-weight: 600;
  color: #742a2a;
  margin: 0;
}

.tab-error-state .tab-error-body {
  font-size: 13px;
  color: #9b2c2c;
  max-width: 420px;
  line-height: 1.5;
}

.tab-error-state .tab-error-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 16px;
  border: 1px solid #e53e3e;
  background: #ffffff;
  color: #c53030;
  border-radius: var(--radius-sm, 4px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.tab-error-state .tab-error-retry:hover {
  background: #fef5f5;
}

.tab-error-state .tab-error-retry .material-icons {
  font-size: 16px;
}

/* ========================================================================
   .tab-table — consistent drawer tables
   Dense rows, hover, clickable row affordance, keyboard focus.
   ======================================================================== */

.tab-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
}

.tab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tab-table th,
.tab-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #edf2f7;
  vertical-align: top;
}

.tab-table thead th {
  background: #f7fafc;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #4a5568;
}

.tab-table tbody tr {
  transition: background 0.1s ease;
}

.tab-table tbody tr:hover {
  background: #f7fafc;
}

.tab-table tbody tr.tab-table-row-clickable {
  cursor: pointer;
}

.tab-table tbody tr.tab-table-row-clickable:focus-visible {
  outline: 2px solid var(--color-primary, #2b6cb0);
  outline-offset: -2px;
  background: #ebf3fc;
}

.tab-table tbody tr:last-child td {
  border-bottom: none;
}

.tab-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 0;
  font-size: 12px;
  color: var(--color-text-secondary, #718096);
}

.tab-table-pagination .tab-table-pagination-info {
  font-size: 12px;
  color: var(--color-text-secondary, #718096);
}

.tab-table-pagination .tab-table-pagination-btn {
  padding: 4px 10px;
  border: 1px solid var(--color-border, #e2e8f0);
  background: #ffffff;
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.tab-table-pagination .tab-table-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-table-pagination .tab-table-pagination-btn:not(:disabled):hover {
  background: #f7fafc;
}

/* ========================================================================
   .tab-badge — status-style pills, 5 kinds
   ======================================================================== */

.tab-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #e2e8f0;
  color: #4a5568;
  white-space: nowrap;
}

.tab-badge--info    { background: #bee3f8; color: #2a4365; }
.tab-badge--success { background: #c6f6d5; color: #22543d; }
.tab-badge--warning { background: #feebc8; color: #7b341e; }
.tab-badge--danger  { background: #fed7d7; color: #742a2a; }
.tab-badge--neutral { background: #e2e8f0; color: #4a5568; }

/* ========================================================================
   Legacy aliases — makes existing classnames continue to render via the
   shared stylesheet, so adopters can migrate incrementally. Mirrors the
   exact current sizing used in profiles.css + agencies.css.
   ======================================================================== */

.profile-tab-content .profile-section,
.ops-drawer-body .profile-section {
  /* already defined in profiles.css, kept here so pages adopting
     tab-content.css without profiles.css still get a sectioned look */
}

/* Help callers that copy the Agency drawer's info grid alias. */
.agency-info-grid,
.profile-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}

.agency-info-grid .detail-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 4px;
  font-weight: 600;
  display: block;
}

/* ========================================================================
   Responsive
   ======================================================================== */

@media (max-width: 640px) {
  .tab-content-grid,
  .tab-loading-skeleton-grid,
  .agency-info-grid,
  .profile-fields-grid {
    grid-template-columns: 1fr;
  }

  .tab-empty-state {
    padding: 32px 16px;
  }

  .tab-error-state {
    padding: 32px 16px;
  }
}