/* =============================================================================
   AIsapiens/static/css/applications/legal.css

   PURPOSE:
   - Backend legal management page styles.
   - Centralize page-specific styles moved from templates.
   ============================================================================= */

/* SECTION MAP
   1) Scoped legal utility helpers
   2) Legal forms and layout containers
   3) Legal dashboard/cards/tables
*/

/* JS hook note
   `legal_document_edit.js` initializes TinyMCE via `textarea.tinymce`. */
/* COMPONENT USAGE NOTES
   - Shared components: `c-card`, `c-data-table`, `c-badge`, `c-action-buttons`, `c-modal*`.
   - Shared utilities: `u-text-*`, `u-*` spacing/layout helpers and `is-*` states.
   - App-specific requirements:
     1) Keep legal management and document workflow styling under `.page--backend .legal-page`.
     2) Keep legal-only badges and status variants mapped to shared badge tokens.
   - Documentation:
     1) `_Technical/Guidelines/UI_Guidelines.md`
     2) `static/css/components.css`
*/

/* ============================================================================
   0. Public legal document pages (terms/privacy/disclaimer/document)
   ========================================================================== */

.c-legal-document {
  max-width: calc(var(--space-1) * 250);
  margin: var(--space-lg) auto;
  padding: var(--space-xl);
  background: var(--color-surface-1);
  border: var(--space-0-25) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.c-legal-document__topnav {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: var(--space-0-25) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.c-legal-document__topnav-actions.c-action-buttons {
  --c-action-row-gap: var(--space-sm);
  --c-action-row-wrap: wrap;
  --c-action-row-justify: flex-end;
}

.c-legal-document__header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--space-0-25) solid var(--color-border);
}

.c-legal-document__kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.c-legal-document__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.c-legal-document__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.c-legal-document__meta-separator {
  color: var(--color-text-muted);
}

.c-legal-document__meta .nav-divider {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-inline: var(--space-1);
  background: var(--color-border);
  align-self: center;
}

.c-legal-document__version,
.c-legal-document__date {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.c-legal-document__languages {
  margin-top: var(--space-sm);
  display: inline-flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: center;
}

.c-legal-document__language {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-base);
  border: var(--space-0-25) solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.c-legal-document__language:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.c-legal-document__language.is-active {
  background: var(--color-surface-3);
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
  font-weight: var(--font-weight-semibold);
}

.c-legal-document__notice {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.c-legal-document__content {
  line-height: 1.75;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.c-legal-document__content :is(h2, h3, h4) {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.c-legal-document__content p {
  margin-bottom: var(--space-md);
}

.c-legal-document__content ul,
.c-legal-document__content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-md);
}

.c-legal-document__content li {
  margin-bottom: var(--space-xs);
}

.c-legal-document__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: var(--font-size-sm);
}

.c-legal-document__content :is(th, td) {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: var(--space-0-25) solid var(--color-border);
}

.c-legal-document__content th {
  background: var(--color-surface-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.c-legal-document__content a {
  color: var(--color-accent-blue);
}

.c-legal-document__content a:hover {
  color: var(--color-accent-blue-dark);
}

.c-legal-document__placeholder {
  padding: var(--space-md);
  border: var(--space-0-25) dashed var(--color-border);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}

.c-legal-document__footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--space-0-25) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.c-legal-document__actions {
  display: flex;
  gap: var(--space-sm);
}

.c-legal-document__updated {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-draft-preview-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-alert-warning) 100%);
  color: var(--color-text-primary);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-base);
  border: var(--space-0-25) solid var(--color-alert-warning);
  box-shadow: var(--shadow-floating);
}

.c-draft-preview-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: calc(var(--space-1) * 300);
  margin: 0 auto;
}

.c-draft-preview-banner__icon {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.c-draft-preview-banner__text {
  flex: 1;
}

.c-draft-preview-banner__text p {
  margin: 0;
  font-size: var(--font-size-sm);
  opacity: 0.9;
  color: var(--color-text-primary);
}

.c-legal-error {
  max-width: calc(var(--space-1) * 180);
  margin: var(--space-xl) auto;
  padding: var(--space-xl);
  background: var(--color-surface-1);
  border: var(--space-0-25) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.c-legal-error__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.c-legal-error__actions {
  margin-top: var(--space-md);
}

.c-legal-footer-link-modal {
  cursor: pointer;
}

.c-btn.c-btn--link {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--color-accent-blue);
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  border-radius: 0;
}

.c-btn.c-btn--link:hover {
  color: var(--color-accent-blue-dark);
}

@media (max-width: 768px) {
  .c-legal-document {
    padding: var(--space-lg);
    margin: var(--space-md);
  }

  .c-legal-document__topnav-actions.c-action-buttons {
    --c-action-row-justify: flex-start;
  }

  .c-legal-document__meta {
    flex-direction: column;
  }

  .c-draft-preview-banner__content {
    flex-direction: column;
  }

  .c-legal-document__title {
    font-size: var(--font-size-xl);
  }

  .c-legal-document__content table {
    font-size: var(--font-size-sm);
  }

  .c-legal-document__content :is(th, td) {
    padding: var(--space-sm);
  }
}

@media print {
  .c-draft-preview-banner,
  .c-legal-document__actions {
    display: none;
  }

  :is(.c-legal-document, .c-legal-error) {
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
}

/* ============================================================================
   1. Utilities (scoped to legal pages)
   ========================================================================== */

.page--backend .legal-page .legal-space-bottom-lg {
  margin-bottom: var(--space-lg);
}

.page--backend .legal-page .legal-space-bottom-md {
  margin-bottom: var(--space-md);
}

.page--backend .legal-page .legal-space-top-lg {
  margin-top: var(--space-lg);
}

.page--backend .legal-page .legal-space-top-md {
  margin-top: var(--space-md);
}

.page--backend .legal-page .legal-hr-spacing {
  margin: var(--space-xl) 0;
}

.page--backend .legal-page .legal-inline-form {
  display: inline;
}

/* ============================================================================
   2. Shared form styling
   ========================================================================== */


.page--backend .legal-page .c-form-row {
  --c-form-row-display: grid;
  --c-form-row-grid-columns: 1fr 1fr;
  --c-form-row-gap: var(--space-lg);
  --c-form-row-margin-bottom: var(--space-md);
  --c-form-row-margin-top: 0;
  --c-form-row-bg: transparent;
  --c-form-row-padding: 0;
  --c-form-row-radius: 0;
  --c-form-row-align: stretch;
}


@media (max-width: 768px) {
  .page--backend .legal-page .c-form-row {
    --c-form-row-grid-columns: 1fr;
  }
}

.page--backend .legal-page .c-form-group {
  --c-form-group-margin-bottom: var(--space-md);
}

.page--backend .legal-page .c-form-group label {
  --c-form-label-display: block;
  --c-form-label-margin-bottom: var(--space-xs);
  --c-form-label-font-weight: var(--font-weight-semibold);
  --c-form-label-color: var(--color-text-primary);
}

.page--backend .legal-page .c-form-control {
  --c-form-control-width: 100%;
}

.page--backend .legal-page .form-help {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.page--backend .legal-page .form-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-error);
}

.page--backend .legal-page .form-check-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page--backend .legal-page .form-check-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.page--backend .legal-page :is(.form-actions, .form-actions.c-form-actions) {
  --c-form-actions-display: flex;
  --c-form-actions-gap: var(--space-md);
  --c-form-actions-wrap: wrap;
  --c-form-actions-justify: flex-start;
}

/* ============================================================================
   3. Card header/body mapping (`c-card__header` structure)
   ========================================================================== */

.page--backend .legal-page .monitoring-card {
  background: var(--color-surface-1);
  border: var(--space-0-25) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

.page--backend .legal-page .monitoring-card > .c-card__header {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--space-0-25) solid var(--color-border);
  background: var(--color-surface-2);
  gap: var(--space-3);
}

.page--backend .legal-page .monitoring-card > .c-card__header :is(h2, h3, h4) {
  margin: 0;
  color: var(--color-text-primary);
}

.page--backend .legal-page .monitoring-card > .card-body {
  padding: var(--space-5);
}

/* Keep analytics metric cards compact. */
.page--backend .legal-analytics .metric-card > .card-body {
  padding: var(--space-md);
}

@media (max-width: 768px) {
  .page--backend .legal-page .monitoring-card > .c-card__header,
  .page--backend .legal-page .monitoring-card > .card-body {
    padding: var(--space-4);
  }
}

/* ============================================================================
   4. Badges and inline code
   ========================================================================== */


.page--backend .legal-page code {
  background: var(--color-surface-3);
  padding: 2px 6px;
  border-radius: 4px;
}

.page--backend .legal-page .actions-cell {
  white-space: nowrap;
}

.page--backend .legal-page .actions-cell form {
  margin: 0;
}

/* ============================================================================
   4. Overview (dashboard)
   ========================================================================== */

.page--backend .legal-overview .nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page--backend .legal-overview .nav-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.page--backend .legal-overview .nav-list li:last-child {
  border-bottom: none;
}

.page--backend .legal-overview .nav-list a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.page--backend .legal-overview .nav-list a:hover {
  color: var(--color-accent-primary);
}

.page--backend .legal-overview .activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
}

.page--backend .legal-overview .activity-list li {
  padding: var(--space-xs) 0;
}

/* ============================================================================
   5. Document cards (terms/disclaimers)
   ========================================================================== */

.page--backend .legal-page .document-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: var(--space-md);
  background: var(--color-surface-3);
}

.page--backend .legal-page .document-card.c-card {
  box-shadow: none;
  transition: none;
}

.page--backend .legal-page .document-card.c-card:hover {
  transform: none;
  box-shadow: none;
}

.page--backend .legal-page .document-card:last-child {
  margin-bottom: 0;
}

.page--backend .legal-page .document-card.is-active {
  border-color: var(--color-success);
  border-width: 2px;
}


.page--backend .legal-page .draft-card {
  border-color: var(--color-warning);
}

.page--backend .legal-page .doc-info h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-text-primary);
}

.page--backend .legal-page .doc-info p {
  margin: var(--space-xs) 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.page--backend :is(.legal-page .doc-actions, .legal-document-list .c-filter-section) {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


.page--backend .legal-page .empty-state {
  --c-empty-state-align: center;
  --c-empty-state-padding: var(--space-xl);
  --c-empty-state-color: var(--color-text-muted);
  --c-empty-state-icon-size: var(--space-12);
  --c-empty-state-icon-margin: var(--space-md);
  --c-empty-state-text-margin: 0 0 var(--space-md) 0;
}

.page--backend .legal-page .u-text-success {
  color: var(--color-success);
}

.page--backend .legal-page .u-text-warning {
  color: var(--color-warning);
}

/* ============================================================================
   6. Document list
   ========================================================================== */

.page--backend .legal-document-list .actions-cell {
  white-space: nowrap;
}

.page--backend .legal-document-list .actions-cell form {
  margin: 0;
}

/* ============================================================================
   7. Document edit
   ========================================================================== */

.page--backend .legal-document-edit :is(.translation-section, .translation-card__body) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.page--backend .legal-document-edit .translation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.page--backend .legal-document-edit .translation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.page--backend .legal-document-edit .translation-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-3);
  padding: var(--space-lg);
}

.page--backend .legal-document-edit .translation-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.page--backend .legal-document-edit .translation-card__title {
  margin: 0;
  color: var(--color-text-primary);
}

/* ============================================================================
   8. Document preview
   ========================================================================== */

.page--backend .legal-document-preview .preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.page--backend .legal-document-preview .meta-item {
  color: var(--color-text-secondary);
}

.page--backend :is(.legal-document-preview .language-selector, .legal-consent-history .consent-pagination__controls) {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.page--backend .legal-document-preview .preview-summary {
  padding: var(--space-md);
  background: var(--color-surface-3);
  border-radius: 4px;
  margin-bottom: var(--space-lg);
}

.page--backend .legal-document-preview .preview-content {
  padding: var(--space-lg);
  background: var(--color-bg-base);
  border-radius: 4px;
  max-height: 600px;
  overflow-y: auto;
}

.page--backend .legal-document-preview .legal-content {
  line-height: 1.6;
  color: var(--color-text-primary);
}

.page--backend .legal-document-preview .legal-content :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

.page--backend .legal-document-preview .legal-content p {
  margin-bottom: var(--space-md);
}

.page--backend .legal-document-preview .legal-content :is(ul, ol) {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.page--backend .legal-document-preview .legal-content li {
  margin-bottom: var(--space-sm);
}

.page--backend .legal-document-preview .legal-content a {
  color: var(--color-accent-primary);
}

.page--backend .legal-document-preview .legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
}

.page--backend .legal-document-preview .legal-content :is(th, td) {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  text-align: left;
}

.page--backend .legal-document-preview .legal-content th {
  background: var(--color-surface-3);
}

/* ============================================================================
   9. Analytics
   ========================================================================== */

.page--backend .legal-analytics .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
}

.page--backend .legal-analytics .metric-card .card-body {
  text-align: center;
  padding: var(--space-md);
}


.page--backend .legal-analytics .metric-card {
  --c-metric-value-size: 1.6rem;
  --c-metric-value-weight: 700;
  --c-metric-value-color: var(--color-accent-primary);
  --c-metric-value-line-height: 1;
  --c-metric-label-margin-top: var(--space-xs);
  --c-metric-label-color: var(--color-text-secondary);
  --c-metric-label-size: 0.8rem;
}

.page--backend .legal-analytics .consent-bar-item {
  margin-bottom: var(--space-lg);
}

.page--backend .legal-analytics .consent-bar-item:last-child {
  margin-bottom: 0;
}

.page--backend .legal-analytics .consent-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.page--backend .legal-analytics .consent-type-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.page--backend .legal-analytics .consent-stats {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.page--backend .legal-analytics .consent-bar-track {
  height: 8px;
  background: var(--color-surface-3);
  border-radius: 4px;
  overflow: hidden;
}

.page--backend .legal-analytics .consent-bar-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0;
}

.page--backend .legal-analytics .consent-actions {
  margin-top: var(--space-md);
  display: flex;
  justify-content: flex-end;
}

.page--backend .legal-analytics .consent-timeline {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-base);
  padding: var(--space-md);
}

.page--backend .legal-analytics .consent-timeline canvas {
  width: 100%;
  height: 260px;
  display: block;
}

.page--backend .legal-analytics .consent-timeline-legend {
  margin-top: var(--space-sm);
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.page--backend .legal-analytics .legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.page--backend .legal-analytics .legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.page--backend .legal-analytics .legend-grant {
  background: var(--color-success);
}

.page--backend .legal-analytics .legend-withdraw {
  background: var(--color-warning);
}

/* ============================================================================
   10. Consent history
   ========================================================================== */

.page--backend .legal-consent-history .c-filter-section .c-form-row {
  --c-form-row-grid-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
}

.page--backend .legal-consent-history .consent-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
}

.page--backend .legal-consent-history .consent-pagination__info {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.page--backend .legal-consent-history .consent-pagination__disabled {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ============================================================================
   11. Consent types list
   ========================================================================== */

.page--backend .legal-consent-types .metric-value {
  --c-metric-value-weight: var(--font-weight-semibold);
  --c-metric-value-color: var(--color-accent-primary);
}

/* ============================================================================
   PHASE 2 - CANONICAL BADGE/CHIP NORMALIZATION
   ----------------------------------------------------------------------------
   Consolidate legal page badge colors to canonical semantic pairs.
   ========================================================================== */

.page--backend .legal-page .c-badge.is-success {
  --c-badge-success-bg: var(--color-success-light);
  --c-badge-success-color: var(--color-success-dark);
}

.page--backend .legal-page .c-badge.is-warning {
  --c-badge-warning-bg: var(--color-warning-light);
  --c-badge-warning-color: var(--color-warning-dark);
}

.page--backend .legal-page .c-badge.is-info {
  --c-badge-info-bg: var(--color-info-light);
  --c-badge-info-color: var(--color-info-dark);
}

.page--backend .legal-page .c-badge.is-neutral {
  --c-badge-secondary-bg: var(--color-surface-3);
  --c-badge-secondary-color: var(--color-text-muted);
}