/* ============================================================
   ADA Duty Schedule (desk/staff) 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.

   DESK page: renders under the default light .app-screen palette. This
   stylesheet only references --t-* semantic tokens (rebound in
   app/theme.css), so the markup reskins without any role-specific color
   rules here. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page header: title block beside the add-assignment action. */
  .ada-schedule__intro { display: flex; flex-wrap: wrap; align-items: center;
                         justify-content: space-between; gap: var(--mea-space-4); }
  .ada-schedule__heading { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .ada-schedule__title, .ada-schedule__subtitle { margin: 0; }
  .ada-schedule__add { flex-shrink: 0; }

  /* Court filter: a single labelled select. */
  .ada-filter { display: grid; gap: var(--mea-space-3);
                padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }

  .ada-field { display: grid; gap: var(--mea-space-2); min-inline-size: 0; }
  .ada-field__label { margin: 0; }
  .ada-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); }

  /* Schedule board: heading plus the week grid. */
  .ada-board { display: grid; gap: var(--mea-space-4);
               padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .ada-board__title { margin: 0; }
  .ada-board__body { display: grid; min-inline-size: 0; overflow-x: auto; }

  /* Week grid: a real table — weekdays across, duty slots down. */
  .ada-week-grid { inline-size: 100%; border-collapse: separate;
                   border-spacing: var(--mea-space-2); table-layout: fixed; }
  .ada-week-grid__day-label { text-align: start; padding: var(--mea-space-2) var(--mea-space-3); }
  .ada-week-grid__col { vertical-align: top; padding: var(--mea-space-2);
                        border-radius: var(--mea-radius-md); }
  .ada-week-grid__empty { display: block; text-align: center; padding-block: var(--mea-space-3); }

  /* Duty slot: name, time window, optional primary badge. */
  .ada-slot { display: grid; gap: var(--mea-space-1);
              padding: var(--mea-space-3); border-radius: var(--mea-radius-md);
              margin-block-end: var(--mea-space-2); }
  .ada-slot:last-child { margin-block-end: 0; }
  .ada-slot__name, .ada-slot__time, .ada-slot__badge { margin: 0; }
  .ada-slot__badge { justify-self: start; padding: var(--mea-space-1) var(--mea-space-2);
                     border-radius: var(--mea-radius-pill); }

  /* Load / retry error block. */
  .ada-load-error { display: grid; gap: var(--mea-space-2); justify-items: start;
                    padding: var(--mea-space-5); border-radius: var(--mea-radius-lg); }
  .ada-load-error__title, .ada-load-error__body { margin: 0; }
  .ada-load-error__retry { margin-block-start: var(--mea-space-2); }

  /* Add-assignment dialog. */
  .ada-modal-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                       padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .ada-modal { inline-size: 100%; max-inline-size: 40rem; max-block-size: 90vh;
               display: grid; grid-template-rows: auto 1fr auto;
               border-radius: var(--mea-radius-2xl); overflow: hidden; }
  .ada-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); }
  .ada-modal__title { margin: 0; }
  .ada-modal__close { display: inline-flex; align-items: center; justify-content: center;
                      inline-size: 2rem; block-size: 2rem; padding: 0; border: 0;
                      border-radius: var(--mea-radius-circle); cursor: pointer; }
  .ada-modal__body { display: grid; gap: var(--mea-space-4); align-content: start;
                     padding: var(--mea-space-5); overflow-y: auto; }
  .ada-modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end;
                       gap: var(--mea-space-3); padding: var(--mea-space-4) var(--mea-space-5); }
  .ada-modal__error { margin: 0; }

  .ada-field-row { display: grid; gap: var(--mea-space-4); }
  @container (min-width: 32rem) {
    .ada-field-row--2 { grid-template-columns: repeat(2, 1fr); }
    .ada-field-row--3 { grid-template-columns: repeat(3, 1fr); }
  }

  .ada-check { display: flex; align-items: center; gap: var(--mea-space-2); cursor: pointer; }
  .ada-check__label { margin: 0; }
}

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

  .ada-filter { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                box-shadow: var(--mea-shadow-sm); }

  .ada-field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                      color: var(--t-text); }
  .ada-field__control { background: var(--t-bg-elevated); color: var(--t-text);
                        border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .ada-field__control:focus { outline: none; border-color: var(--t-border-focus); }
  .ada-field__control:disabled { color: var(--t-text-muted); }

  .ada-board { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
               box-shadow: var(--mea-shadow-sm); }
  .ada-board__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                      font-weight: var(--mea-w-bold); color: var(--t-text); }

  .ada-week-grid__day-label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold);
                              color: var(--t-text-muted); text-transform: uppercase;
                              letter-spacing: var(--mea-ls-wide);
                              border-block-end: 1px solid var(--t-border); }
  .ada-week-grid__col { background: var(--t-bg-recessed); }
  .ada-week-grid__empty { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  .ada-slot { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .ada-slot--primary { border-color: var(--t-accent); }
  .ada-slot__name { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .ada-slot__time { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .ada-slot__badge { background: var(--t-accent); color: var(--t-accent-text);
                     font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold); }

  .ada-load-error { background: var(--t-card-bg); border: 1px solid var(--t-error); }
  .ada-load-error__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                           color: var(--t-error-text); }
  .ada-load-error__body { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  .ada-modal-overlay { background: var(--t-bg-active); }
  .ada-modal { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
               box-shadow: var(--mea-shadow-lg); }
  .ada-modal__header { border-block-end: 1px solid var(--t-border); }
  .ada-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                      font-weight: var(--mea-w-bold); color: var(--t-text); }
  .ada-modal__close { background: transparent; color: var(--t-text-muted);
                      font-size: var(--mea-text-xl); line-height: 1;
                      transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .ada-modal__close:hover { background: var(--t-bg-recessed); color: var(--t-text); }
  .ada-modal__footer { border-block-start: 1px solid var(--t-border); }
  .ada-modal__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }

  .ada-check__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
}