/* ============================================================
   Active Cases (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--outline/.btn--primary from elements.css.

   DESK page: staff/prosecutors read this under the default light
   .app-screen palette. This stylesheet only references --t-* semantic
   tokens, which app/theme.css rebinds per theme, so the page reskins
   without any role-specific color rules here. Status state classes
   (case-card--*, case-status--*, case-progress__fill--*, task-chip--*)
   are toggled by the controller; here they only rebind which semantic
   token paints them. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  /* Page intro: title + one-line subtitle. */
  .active-cases__intro { display: grid; gap: var(--mea-space-1); }
  .active-cases__title, .active-cases__subtitle { margin: 0; }

  /* Controls: filter chips on one row, search box beside/below them. */
  .active-cases-controls { display: flex; flex-wrap: wrap; align-items: center;
                           gap: var(--mea-space-3); }
  .case-filters { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); margin: 0; padding: 0; }
  .case-filter { display: inline-flex; align-items: center; gap: var(--mea-space-2);
                 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; }
  .case-filter__count { display: inline-flex; align-items: center; justify-content: center;
                        min-inline-size: 1.5rem; padding-inline: var(--mea-space-1);
                        border-radius: var(--mea-radius-pill); }

  .active-cases .search-box { flex: 1; min-inline-size: 12rem; 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); }
  .active-cases .search-box__input { flex: 1; min-height: var(--t-target-min, 44px);
                                     border: 0; background: transparent; padding: 0; }

  /* Case grid: cards that flow into as many columns as fit. */
  .case-grid { display: grid; gap: var(--mea-space-4);
               grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  @container (max-width: 30rem) { .case-grid { grid-template-columns: 1fr; } }

  .case-card { display: grid; gap: var(--mea-space-4); align-content: start;
               padding: var(--mea-space-5); border-radius: var(--mea-radius-xl);
               cursor: pointer; }
  .case-card__header { display: flex; align-items: flex-start;
                       justify-content: space-between; gap: var(--mea-space-3); }
  .case-card__identity { display: flex; align-items: flex-start; gap: var(--mea-space-3);
                         min-inline-size: 0; }
  .case-card__select { flex-shrink: 0; min-inline-size: 1.1rem; min-block-size: 1.1rem;
                       margin-block-start: var(--mea-space-1); cursor: pointer; }
  .case-card__who { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .case-card__name, .case-card__case-no { margin: 0; }

  .case-status { display: inline-flex; align-items: center; gap: var(--mea-space-2);
                 margin: 0; white-space: nowrap; flex-shrink: 0; }
  .case-status__dot { display: inline-block; inline-size: .55rem; block-size: .55rem;
                      border-radius: var(--mea-radius-circle); }

  /* Progress meter. */
  .case-card__progress { display: grid; gap: var(--mea-space-2); }
  .case-progress-unavailable { margin: 0; }
  .case-progress__labels { display: flex; align-items: baseline;
                           justify-content: space-between; gap: var(--mea-space-2); }
  .case-progress { block-size: .5rem; border-radius: var(--mea-radius-pill); overflow: hidden; }
  .case-progress__fill { block-size: 100%; inline-size: 0; border-radius: inherit; }

  /* Task chips. */
  .case-tasks { display: flex; flex-wrap: wrap; gap: var(--mea-space-2);
                margin: 0; padding: 0; list-style: none; }
  .case-tasks:empty { display: none; }
  .task-chip { display: inline-flex; align-items: center;
               padding: var(--mea-space-1) var(--mea-space-3);
               border-radius: var(--mea-radius-pill); white-space: nowrap; }

  /* Footer: coach + days remaining. */
  .case-card__footer { display: flex; flex-wrap: wrap; align-items: center;
                       justify-content: space-between; gap: var(--mea-space-2); }
  .case-card__coach, .case-card__deadline { min-inline-size: 0; }

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

  /* Bulk-action modal (created on <body>, outside .app-screen). */
  .case-modal { position: fixed; inset: 0; display: grid; place-items: center;
                padding: var(--mea-space-4); z-index: 1000; }
  .case-modal__dialog { display: grid; gap: var(--mea-space-4); inline-size: 100%;
                        max-inline-size: 30rem; padding: var(--mea-space-5);
                        border-radius: var(--mea-radius-xl); }
  .case-modal__header { display: flex; align-items: flex-start;
                        justify-content: space-between; gap: var(--mea-space-3); }
  .case-modal__title { margin: 0; min-inline-size: 0; }
  .case-modal__close { flex-shrink: 0; border: 0; background: transparent;
                       padding: 0; line-height: 1; cursor: pointer; }
  .case-modal__body { display: grid; gap: var(--mea-space-4); }
  .case-modal__footer { display: flex; flex-wrap: wrap; align-items: center;
                        justify-content: flex-end; gap: var(--mea-space-3); }

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

  .case-bulk-result { display: grid; gap: var(--mea-space-2); }
  .case-bulk-result__list { margin: 0; padding-inline-start: var(--mea-space-5);
                            display: grid; gap: var(--mea-space-1); }
}

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

  /* Filter chips. .is-active is toggled by the controller. */
  .case-filter { background: var(--t-bg-recessed); color: var(--t-text-secondary);
                 font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                 transition: background var(--mea-dur-fast), color var(--mea-dur-fast); }
  .case-filter:hover { background: var(--t-bg-active); }
  .case-filter.is-active { background: var(--t-accent); color: var(--t-accent-text); }
  .case-filter__count { background: var(--t-bg-elevated); color: var(--t-text-muted);
                        font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold); }
  .case-filter.is-active .case-filter__count { background: var(--t-accent-text);
                                               color: var(--t-accent); }

  .active-cases .search-box { background: var(--t-bg-elevated); border: 1px solid var(--t-border); }
  .active-cases .search-box__icon { color: var(--t-text-muted); }
  .active-cases .search-box__input { color: var(--t-text); font-size: var(--mea-text-md); }
  .active-cases .search-box__input::placeholder { color: var(--t-text-muted); }
  .active-cases .search-box:focus-within { border-color: var(--t-border-focus); }

  /* Case card. */
  .case-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), border-color var(--mea-dur-fast); }
  .case-card:hover { box-shadow: var(--mea-shadow-md, var(--mea-shadow-sm));
                     border-color: var(--t-border-focus); }
  .case-card__name { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                     color: var(--t-text); }
  .case-card__case-no { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Status indicator. State classes recolour dot + label. */
  .case-status { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); }
  .case-status--on-track { color: var(--t-success-text); }
  .case-status--at-risk { color: var(--t-warning-text); }
  .case-status--overdue { color: var(--t-error-text); }
  .case-status--unknown { color: var(--t-text-muted); }
  .case-status--on-track .case-status__dot { background: var(--t-success); }
  .case-status--at-risk .case-status__dot { background: var(--t-warning); }
  .case-status--overdue .case-status__dot { background: var(--t-error); }
  .case-status--unknown .case-status__dot { background: var(--t-text-muted); }

  /* Progress meter. State classes recolour the fill. */
  .case-progress-unavailable { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .case-progress__labels { font-size: var(--mea-text-xs); color: var(--t-text-muted); }
  .case-progress { background: var(--t-bg-recessed); }
  .case-progress__fill--on-track { background: var(--t-success); }
  .case-progress__fill--at-risk { background: var(--t-warning); }
  .case-progress__fill--overdue { background: var(--t-error); }
  .case-progress__fill--unknown { background: var(--t-text-muted); }

  /* Task chips. */
  .task-chip { background: var(--t-bg-recessed); color: var(--t-text-secondary);
               font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); }
  .task-chip--done { color: var(--t-success-text); }
  .task-chip--failed { color: var(--t-error-text); }
  .task-chip--pending { color: var(--t-text-secondary); }

  /* Footer. */
  .case-card__footer { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .case-card__coach strong { color: var(--t-text); font-weight: var(--mea-w-semibold); }

  /* Load error panel. */
  .active-cases-load-error { background: var(--t-card-bg); border: 1px solid var(--t-error);
                             box-shadow: var(--mea-shadow-sm); }
  .active-cases-load-error__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold);
                                    color: var(--t-error-text); }
  .active-cases-load-error__body { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  /* Bulk-action modal. */
  .case-modal { background: var(--t-overlay, var(--t-bg-recessed)); }
  .case-modal__dialog { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                        box-shadow: var(--mea-shadow-lg, var(--mea-shadow-sm)); }
  .case-modal__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                       font-weight: var(--mea-w-bold); color: var(--t-text); }
  .case-modal__close { font-size: var(--mea-text-xl); color: var(--t-text-muted); }
  .case-modal__close:hover { color: var(--t-text); }
  .case-modal__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }

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

  .case-bulk-result { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .case-bulk-result strong { color: var(--t-text); font-weight: var(--mea-w-semibold); }
}
</content>