/* ============================================================
   Document Vault (shared) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary/.btn--outline from
   elements.css.

   SHARED page: desk staff (light) and participants (citizen dark) render
   the same markup. This stylesheet references only --t-* semantic tokens,
   which app/theme.css rebinds per theme, so the page reskins without any
   role-specific color rules here. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page header: heading block beside the upload action. */
  .documents__intro { display: flex; flex-wrap: wrap; align-items: flex-start;
                      justify-content: space-between; gap: var(--mea-space-4); }
  .documents__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .documents__title, .documents__subtitle { margin: 0; }
  .documents__upload { flex-shrink: 0; white-space: nowrap; }

  /* Toolbar: filter chips and a search field. */
  .documents-toolbar { display: grid; gap: var(--mea-space-3); }
  .doc-filters { display: flex; flex-wrap: wrap; gap: var(--mea-space-2);
                 margin: 0; padding: 0; list-style: none; }
  .doc-filters > li { display: inline-flex; margin: 0; }
  .filter-chip { display: inline-flex; align-items: center; min-height: var(--t-target-min, 44px);
                 padding: var(--mea-space-2) var(--mea-space-4); border: 0;
                 border-radius: var(--mea-radius-pill); cursor: pointer; white-space: nowrap; }
  .doc-search { display: flex; align-items: center; gap: var(--mea-space-2);
                margin: 0; padding: var(--mea-space-2) var(--mea-space-3);
                border-radius: var(--mea-radius-md); }
  .doc-search__input { flex: 1; min-height: var(--t-target-min, 44px);
                       border: 0; background: transparent; padding: 0; }

  /* Action error live region — hidden until toggled visible. */
  .doc-action-error { margin: 0; padding: var(--mea-space-3) var(--mea-space-4);
                      border-radius: var(--mea-radius-md); display: none; }
  .doc-action-error.is-visible { display: block; }

  /* Document list: responsive grid of cards. */
  .documents-list { display: grid; gap: var(--mea-space-4); }
  .doc-grid { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none;
              grid-template-columns: 1fr; }
  @container (min-width: 34rem) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
  @container (min-width: 54rem) { .doc-grid { grid-template-columns: repeat(3, 1fr); } }

  .doc-card { display: grid; gap: var(--mea-space-2); align-content: start;
              padding: var(--mea-space-4); border-radius: var(--mea-radius-xl); }
  .doc-card__name, .doc-card__type, .doc-card__uploaded, .doc-card__status,
  .doc-card__size, .doc-card__author { margin: 0; }
  .doc-type { display: inline-flex; align-items: center;
              padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-pill);
              text-transform: capitalize; }
  .doc-card__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2);
                       margin-block-start: var(--mea-space-2); }

  /* Proof-token ledger (participant only). */
  .documents-proofs { display: grid; gap: var(--mea-space-4);
                      padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .documents-proofs__header { display: flex; align-items: baseline; }
  .documents-proofs__title { margin: 0; }
  .documents-proofs__body { display: grid; gap: var(--mea-space-3); }
  .doc-proofs-empty { margin: 0; }
  .proof-token-list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .proof-token { display: grid; grid-template-columns: auto 1fr auto; gap: var(--mea-space-3);
                 align-items: center; padding: var(--mea-space-3); border-radius: var(--mea-radius-lg); }
  .proof-token__marker { display: inline-flex; align-items: center; justify-content: center;
                         inline-size: 2rem; block-size: 2rem; border-radius: var(--mea-radius-circle); }
  .proof-token__body { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .proof-token__name, .proof-token__date { margin: 0; }
  .proof-token__proof { display: grid; gap: var(--mea-space-1); justify-items: end; text-align: end; }
  .proof-token__hash, .proof-token__state { margin: 0; max-inline-size: 100%; }
  .proof-token__badge { display: inline-flex; }
  @container (max-width: 30rem) {
    .proof-token { grid-template-columns: auto 1fr; }
    .proof-token__proof { grid-column: 1 / -1; justify-items: start; text-align: start; }
  }

  /* Upload + preview modals. */
  .doc-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                       padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .doc-modal-overlay[hidden] { display: none; }
  .doc-modal-overlay__backdrop { position: absolute; inset: 0; }
  .doc-modal { position: relative; inline-size: 100%; max-inline-size: 32rem; max-block-size: 90vh;
               display: grid; grid-template-rows: auto 1fr; border-radius: var(--mea-radius-2xl);
               overflow: hidden; }
  .doc-modal__header { display: flex; align-items: center; justify-content: space-between;
                       gap: var(--mea-space-3); padding: var(--mea-space-4) var(--mea-space-5); }
  .doc-modal__title { margin: 0; }
  .doc-modal__close { display: inline-flex; align-items: center; justify-content: center;
                      min-height: var(--t-target-min, 44px); inline-size: var(--t-target-min, 44px);
                      border: 0; background: transparent; cursor: pointer; }
  .doc-modal__body { display: grid; gap: var(--mea-space-4); align-content: start;
                     padding: var(--mea-space-5); overflow-y: auto; }

  .doc-upload-form { display: grid; gap: var(--mea-space-4); }
  .doc-field { display: grid; gap: var(--mea-space-2); margin: 0; }
  .doc-field__label { margin: 0; }
  .doc-field__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                      padding: var(--mea-space-3); border-radius: var(--mea-radius-md); }
  textarea.doc-field__input { min-height: 4rem; resize: vertical; }
  .doc-upload-error { margin: 0; display: none; }
  .doc-upload-error.is-visible { display: block; }
  .doc-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mea-space-3); }

  /* Preview body. */
  .doc-preview__img { inline-size: 100%; block-size: auto; border-radius: var(--mea-radius-md); }
  .doc-preview__iframe { inline-size: 100%; block-size: 60vh; border: 0; border-radius: var(--mea-radius-md); }
  .doc-preview__fallback { display: grid; gap: var(--mea-space-3); justify-items: center;
                           text-align: center; padding: var(--mea-space-6) var(--mea-space-4); }
  .doc-preview__icon, .doc-preview__heading, .doc-preview__desc { margin: 0; }
}

@layer design {
  .documents__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                      font-weight: var(--mea-w-bold); color: var(--t-text); }
  .documents__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Filter chips — .is-active is the JS-toggled state. */
  .filter-chip { background: var(--t-bg-recessed); color: var(--t-text-secondary);
                 font-family: var(--mea-font-citizen); font-size: var(--mea-text-sm);
                 font-weight: var(--mea-w-semibold);
                 transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .filter-chip:hover { background: var(--t-bg-active); }
  .filter-chip.is-active { background: var(--t-accent); color: var(--t-accent-text); }

  .doc-search { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .doc-search__icon { color: var(--t-text-muted); }
  .doc-search__input { color: var(--t-text); font-size: var(--mea-text-md); }
  .doc-search__input::placeholder { color: var(--t-text-muted); }
  .doc-search:focus-within { border-color: var(--t-border-focus); }

  .doc-action-error { background: var(--t-error-bg, var(--t-bg-recessed)); color: var(--t-error-text);
                      border: 1px solid var(--t-error); font-size: var(--mea-text-sm);
                      font-weight: var(--mea-w-semibold); }

  .doc-card { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
              box-shadow: var(--mea-shadow-sm); transition: box-shadow var(--mea-dur-fast); }
  .doc-card:hover { box-shadow: var(--mea-shadow-md); }
  .doc-card__name { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                    font-weight: var(--mea-w-bold); color: var(--t-text); }
  .doc-card__uploaded { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .doc-card__size { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .doc-card__author { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  .doc-type { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
              background: var(--t-bg-recessed); color: var(--t-text-secondary); }
  .doc-type--compliance_proof { background: var(--t-success-bg); color: var(--t-success-text); }
  .doc-type--court_filing { background: var(--t-accent); color: var(--t-accent-text); }
  .doc-type--identity { background: var(--t-warning-bg); color: var(--t-warning-text); }
  .doc-type--other { background: var(--t-bg-recessed); color: var(--t-text-secondary); }

  /* Proof-token ledger. */
  .documents-proofs { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                      box-shadow: var(--mea-shadow-sm); }
  .documents-proofs__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                             font-weight: var(--mea-w-bold); color: var(--t-text); }
  .doc-proofs-empty { font-size: var(--mea-text-md); color: var(--t-text-muted); }

  .proof-token { background: var(--t-bg-recessed); border: 1px solid var(--t-border); }
  .proof-token__marker { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold);
                         color: var(--t-accent-text); }
  .proof-token--verified .proof-token__marker { background: var(--t-success); }
  .proof-token--pending .proof-token__marker { background: var(--t-warning); }
  .proof-token__name { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                       font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .proof-token__date { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .proof-token__hash { font-family: var(--mea-font-mono); font-size: var(--mea-text-xs);
                       color: var(--t-text-muted); word-break: break-all; }
  .proof-token__badge { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); }
  .proof-token__badge--verified { color: var(--t-success-text); }
  .proof-token__badge--pending { color: var(--t-warning-text); }

  /* Modals. */
  .doc-modal-overlay__backdrop { background: var(--t-bg-active); }
  .doc-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
               box-shadow: var(--mea-shadow-lg); }
  .doc-modal__header { border-block-end: 1px solid var(--t-border); }
  .doc-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                      font-weight: var(--mea-w-bold); color: var(--t-text); }
  .doc-modal__close { color: var(--t-text-muted); font-size: var(--mea-text-xl);
                      line-height: 1; border-radius: var(--mea-radius-md);
                      transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .doc-modal__close:hover { background: var(--t-bg-recessed); color: var(--t-text); }

  .doc-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .doc-field__input { background: var(--t-bg-elevated); color: var(--t-text);
                      border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .doc-field__input:focus { outline: none; border-color: var(--t-border-focus); }
  .doc-upload-error { color: var(--t-error-text); font-size: var(--mea-text-sm);
                      font-weight: var(--mea-w-semibold); }

  .doc-preview__icon { font-size: var(--mea-text-3xl); line-height: 1; color: var(--t-text-muted); }
  .doc-preview__heading { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                          font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .doc-preview__desc { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
}