/* ============================================================
   Tenant Billing (desk/admin) page.
   Structure in @layer layout, paint in @layer design.
   ============================================================ */

@layer layout {
  .admin-billing__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mea-space-3);
  }
  .admin-billing__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .admin-billing__title, .admin-billing__subtitle { margin: 0; }
  .admin-billing__actions { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); flex-shrink: 0; }

  .billing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mea-space-4);
  }

  .billing-panel {
    display: grid;
    align-content: start;
    border-radius: var(--mea-radius-xl);
    overflow: hidden;
  }
  .billing-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mea-space-3);
    padding: var(--mea-space-4) var(--mea-space-5);
  }
  .billing-panel__title { margin: 0; }
  .billing-panel__body { display: grid; gap: var(--mea-space-4); min-inline-size: 0; }

  .billing-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mea-space-3);
    padding: var(--mea-space-5);
  }
  .billing-summary__metric { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .billing-summary__label, .billing-summary__value { overflow-wrap: anywhere; }

  .billing-table__scroll { overflow-x: auto; }
  .billing-table { inline-size: 100%; border-collapse: collapse; }
  .billing-table th {
    text-align: start;
    padding: var(--mea-space-3) var(--mea-space-5);
    white-space: nowrap;
  }
  .billing-table td {
    padding: var(--mea-space-3) var(--mea-space-5);
    vertical-align: middle;
  }

  .billing-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--mea-space-1) var(--mea-space-3);
    border-radius: var(--mea-radius-pill);
    white-space: nowrap;
  }

  .billing-load-error {
    display: grid;
    gap: var(--mea-space-3);
    justify-items: start;
    padding: var(--mea-space-6);
  }
  .billing-load-error__title, .billing-inline-error { margin: 0; }

  .billing-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--mea-space-4);
    z-index: var(--mea-z-modal, 1000);
  }
  .billing-modal {
    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;
  }
  .billing-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);
  }
  .billing-modal__title { margin: 0; min-inline-size: 0; }
  .billing-form {
    display: grid;
    gap: var(--mea-space-4);
    padding: var(--mea-space-5);
    overflow-y: auto;
  }
  .billing-form__msg:empty { display: none; }
  .billing-field { display: grid; gap: var(--mea-space-2); }
  .billing-field__control {
    inline-size: 100%;
    min-height: var(--t-target-min, 44px);
    padding: var(--mea-space-2) var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    font: inherit;
  }

  @container (max-width: 48rem) {
    .billing-grid { grid-template-columns: 1fr; }
    .billing-summary { grid-template-columns: 1fr; }
    .billing-table thead {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .billing-table, .billing-table tbody, .billing-table tr, .billing-table td {
      display: block;
      inline-size: 100%;
    }
    .billing-table tr { padding: var(--mea-space-3) 0; }
    .billing-table td {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: var(--mea-space-3);
      align-items: center;
      padding: var(--mea-space-2) var(--mea-space-4);
      overflow-wrap: anywhere;
      white-space: normal;
    }
    .billing-table td::before { content: attr(data-label); }
  }
}

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

  .billing-panel {
    background: var(--t-card-bg);
    border: 1px solid var(--t-card-border);
    box-shadow: var(--mea-shadow-sm);
  }
  .billing-panel__header {
    background: var(--t-bg-recessed);
    border-block-end: 1px solid var(--t-border);
  }
  .billing-panel__title {
    font-size: var(--mea-text-md);
    font-weight: var(--mea-w-bold);
    color: var(--t-text);
  }

  .billing-summary__label {
    font-size: var(--mea-text-xs);
    font-weight: var(--mea-w-semibold);
    color: var(--t-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--mea-ls-wide);
  }
  .billing-summary__value {
    font-size: var(--mea-text-lg);
    font-weight: var(--mea-w-bold);
    color: var(--t-text);
  }

  .billing-table th {
    font-size: var(--mea-text-xs);
    font-weight: var(--mea-w-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mea-ls-wide);
    color: var(--t-text-muted);
    background: var(--t-bg-recessed);
    border-block-end: 1px solid var(--t-border);
  }
  .billing-table td {
    font-size: var(--mea-text-sm);
    color: var(--t-text-secondary);
    border-block-end: 1px solid var(--t-border);
  }
  .billing-table tbody tr:last-child td { border-block-end: 0; }

  .billing-badge {
    font-size: var(--mea-text-xs);
    font-weight: var(--mea-w-semibold);
    background: var(--t-bg-recessed);
    color: var(--t-text-secondary);
  }
  .billing-badge--ok { background: var(--t-success-bg); color: var(--t-success-text); }
  .billing-badge--warn { background: var(--t-warning-bg); color: var(--t-warning-text); }
  .billing-badge--muted { background: var(--t-bg-active); color: var(--t-text-muted); }

  .billing-load-error__title,
  .billing-inline-error,
  .billing-form__msg {
    font-size: var(--mea-text-sm);
    color: var(--t-error-text);
  }

  .billing-modal-overlay { background: var(--t-overlay, var(--t-bg-active)); }
  .billing-modal {
    background: var(--t-card-bg);
    border: 1px solid var(--t-card-border);
    box-shadow: var(--mea-shadow-lg);
  }
  .billing-modal__header { border-block-end: 1px solid var(--t-border); }
  .billing-modal__title {
    font-family: var(--mea-font-citizen);
    font-size: var(--mea-text-lg);
    font-weight: var(--mea-w-bold);
    color: var(--t-text);
  }
  .billing-field__label {
    font-size: var(--mea-text-sm);
    font-weight: var(--mea-w-semibold);
    color: var(--t-text);
  }
  .billing-field__control {
    background: var(--t-bg-elevated);
    color: var(--t-text);
    border: 1px solid var(--t-border);
    font-size: var(--mea-text-md);
  }
  .billing-field__control:focus {
    outline: none;
    border-color: var(--t-border-focus);
  }

  @container (max-width: 48rem) {
    .billing-table td { border-block-end: 1px solid var(--t-border); }
    .billing-table td::before {
      font-weight: var(--mea-w-semibold);
      color: var(--t-text-muted);
      font-size: var(--mea-text-xs);
    }
  }
}