/* =========================================================================
   لوحة المتابعة — the lawyer's dashboard (/dashboard)
   =========================================================================
   Linked AFTER _home.css in both styles.html fragments. Adding, removing or
   reordering a CSS module is a THREE-file edit: styles-core, styles-with-extra
   and the app.css manifest — a module added to one fragment only styles half
   the pages and reads as a theme bug.

   TOKENS ONLY. No hex, no --bs-* colour, no physical left/right: every surface
   is a token, every radius a role token, and every inline offset logical, so
   this page follows all five designs and both themes with no rule of its own.
   Nothing here is a design token, so the five design files, DesignTokensTest
   and tools/check-design-contrast.js are untouched.

   A REGISTER'S COLOUR IS ONLY EVER A DOT OR A BAR, NEVER TEXT. The timeline
   dot, the week bars and the status segments read --event-color / --seg, which
   come from _calendar.css's .agenda-cat-* classes (shared with /agenda and the
   portal's calendar, so one colour means one register everywhere). The word
   beside the dot is --text-secondary on a neutral pill, because the base status
   tokens fail AA as TEXT: --success measures 2.41:1 on the light card. The
   progress fill is --primary-fill-solid, the brand as a FILL, never --primary.

   Drawn and measured before any of it was built — see plans/lawyer-dashboard-plan.md
   §9.1 for the six preview shots and the numbers quoted below.
   ========================================================================= */

/* ── hero ── */
.dash-hero-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem}
.dash-overline{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:var(--primary-dark);margin-bottom:.5rem}
.dash-hero-side{display:flex;align-items:center;gap:.75rem;position:relative;z-index:1}
.dash-hero-side .home-hero-date{margin-top:0}
.dash-today-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.25rem;position:relative;z-index:1}
.dash-today-label{font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin-inline-end:.25rem}
.dash-today-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--border);font-size:.875rem;font-weight:600;color:var(--text);box-shadow:var(--shadow-xs)}
.dash-today-chip b{font-variant-numeric:tabular-nums}
.dash-dot{inline-size:.6rem;block-size:.6rem;border-radius:50%;background:var(--event-color);flex:none}

/* ── the three tiles ────────────────────────────────────────
   THREE ACROSS OR STACKED — NEVER 2 + 1, and this is the ONE measured
   exception to rule 32's shared 270px floor.

   That floor is set by the money composites elsewhere in the app
   (`17 · 34,164.20` wants 296px). These three values are small integers, and
   the three labels were measured in the step 0 preview with a nowrap clone at
   91 / 67 / 103px — so a tile needs 103 + 112 = 215px, where 112px is what
   .stat-card-inline's chip + gap + padding cost before any text. Left on the
   shared floor, a 1100px viewport with the sidebar OPEN fits two columns and
   drops the third tile onto a row of its own: an orphan beside two, which is
   what the preview caught.

   The threshold is the WRAPPER's own width through a container query, never a
   viewport breakpoint — which is rule 32's actual point, since the sidebar
   takes ~350px expanded and ~100px collapsed, so one viewport yields two
   content widths. At the tightest case checked (1100px, sidebar open) each
   tile is 237px.

   The selector repeats rule 32's :has() with .dash-tiles in front, so it
   outranks it by SPECIFICITY rather than by source order.

   A label longer than ~120px needs the 700px threshold re-measured.
   ─────────────────────────────────────────────────────────────────── */
.dash-tiles-wrap{container-type:inline-size;margin-bottom:1.5rem}
.dash-tiles.row:has(> [class*="col-"] > .admin-stat-card.stat-card-inline){grid-template-columns:minmax(0,1fr)}
@container (min-width:700px){.dash-tiles.row:has(> [class*="col-"] > .admin-stat-card.stat-card-inline){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── the two columns ──
   Stacked by default and two-up from 900px, and the 900px is the CONTENT
   box's, not the viewport's — the same reasoning as the tiles above, which is
   why the page container becomes a container here rather than carrying a
   media query four lines under a comment arguing against one. The sidebar is
   260px open and 92px collapsed, so at a 1100px window this page is 792px
   wide with the rail out and 960px with it in: one viewport, two answers, and
   only the container query gives the right one for both.

   900px is where the side column still reads: 900 − 1.5rem of gap over
   1.85fr + 1fr leaves it ~296px, wider than the 390px phone layout's own
   card once its padding is taken off. Below that the two columns stack in
   the §4.1 order.

   The :has() picks THIS page's container and no other — there is no page
   class on <main> to hang it off, and a bare container-type on
   .container-fluid would make every page in the app a containment context. */
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start}
.dash-side,.dash-main{display:grid;gap:1.5rem;min-width:0}
.dash-grid .admin-section-card{margin-bottom:0}
.main-content .container-fluid:has(> .dash-grid){container-type:inline-size}
@container (min-width:900px){.dash-grid{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}}
.dash-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-bottom:.5rem;padding-bottom:.85rem;border-bottom:1px solid var(--border)}
.dash-card-head .section-title{margin:0;padding:0;border:0;display:flex;align-items:center;gap:.6rem}
.dash-card-head .section-title i{color:var(--primary-dark)}
.dash-head-count{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}

/* ── segmented control ── */
.dash-seg{display:inline-flex;padding:.2rem;border-radius:var(--radius-pill);background:var(--bg-secondary);border:1px solid var(--border)}
.dash-seg-btn{border:0;background:transparent;color:var(--text-secondary);padding:.4rem 1.1rem;border-radius:var(--radius-pill);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.dash-seg-btn[aria-pressed="true"]{background:var(--card);color:var(--primary-dark);box-shadow:var(--shadow-sm)}

/* ── timeline ── */
.dash-timeline{list-style:none;margin:0;padding:0}
.dash-item{display:grid;grid-template-columns:4.25rem 1.25rem minmax(0,1fr);column-gap:.75rem;align-items:stretch}
.dash-time{padding-block:.9rem;text-align:start;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.3}
.dash-time small{display:block;font-size:.75rem;font-weight:600;color:var(--text-secondary)}
.dash-rail{position:relative;display:flex;justify-content:center}
.dash-rail::before{content:"";position:absolute;inset-block:0;inline-size:2px;background:var(--border)}
.dash-item:first-child .dash-rail::before{inset-block-start:1.2rem}
.dash-item:last-child .dash-rail::before{inset-block-end:calc(100% - 1.2rem)}
.dash-dot-lg{position:relative;margin-top:1.15rem;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--event-color);box-shadow:0 0 0 4px var(--card);flex:none}
.dash-body{padding-block:.8rem;border-bottom:1px solid var(--border);min-width:0}
.dash-item:last-child .dash-body{border-bottom:0}
.dash-title-row{display:flex;align-items:center;gap:.5rem;min-width:0}
.dash-kind{flex:none;font-size:.75rem;font-weight:600;color:var(--text-secondary);padding:.1rem .55rem;border-radius:var(--radius-pill);background:var(--bg-secondary);border:1px solid var(--border)}
.dash-title{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dash-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .85rem;margin-top:.3rem;font-size:.84rem;color:var(--text-secondary)}
.dash-meta i{opacity:.75;margin-inline-end:.3rem}
.dash-meta .link-chip{margin-top:0}
.dash-item.is-done .dash-title{color:var(--text-secondary);text-decoration:line-through;text-decoration-color:var(--border)}
.dash-item.is-done .dash-time{color:var(--text-secondary)}
.dash-item.is-done .dash-dot-lg{background:var(--card);border:2px solid var(--success);display:grid;place-items:center;inline-size:1rem;block-size:1rem;margin-top:1.05rem;color:var(--success);font-size:.5rem}
.dash-progress{display:inline-flex;align-items:center;gap:.5rem}
.dash-progress-bar{inline-size:6rem;block-size:.4rem;border-radius:var(--radius-pill);background:var(--bg-secondary);border:1px solid var(--border);overflow:hidden}
.dash-progress-bar span{display:block;block-size:100%;background:var(--primary-fill-solid);border-radius:var(--radius-pill)}
.dash-subhead{display:flex;align-items:center;gap:.75rem;margin:1rem 0 .25rem;font-size:.8125rem;font-weight:700;color:var(--text-secondary)}
.dash-subhead::after{content:"";flex:1;block-size:1px;background:var(--border)}

/* ── needs attention ── */
.dash-attn-group+.dash-attn-group{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.dash-attn-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-weight:600;color:var(--text);margin-bottom:.35rem}
.dash-attn-head span:first-child{display:inline-flex;align-items:center;gap:.5rem}
.dash-attn-row{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.6rem;align-items:baseline;padding:.4rem 0;font-size:.9rem}
.dash-attn-date{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:.8125rem}
.dash-attn-text{min-width:0}
.dash-attn-title{display:block;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-attn-text .link-chip{margin-top:.15rem}
.dash-attn-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;padding:0;border:0;background:transparent;font:inherit;font-size:.875rem;font-weight:600;color:var(--primary-dark);cursor:pointer}

/* ── week load ── */
.dash-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;margin-top:.5rem}
.dash-day{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.5rem .15rem .55rem;border:0;border-radius:var(--radius-card);background:transparent;font:inherit;color:var(--text-secondary);cursor:pointer}
.dash-day.is-today{background:color-mix(in srgb,var(--primary) 9%,transparent);color:var(--primary-dark)}
.dash-day-total{min-block-size:1.5em;line-height:1.5;font-size:.8125rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dash-day-stack{block-size:6.5rem;inline-size:100%;max-inline-size:2.75rem;display:flex;flex-direction:column-reverse;gap:2px}
.dash-day-seg{inline-size:100%;block-size:calc(var(--n) * 6.5rem / 8 - 2px);min-block-size:4px;border-radius:4px;background:var(--event-color)}
.dash-day-none{inline-size:.4rem;block-size:.4rem;border-radius:50%;background:var(--border)}
.dash-day-name{font-size:.75rem;font-weight:600}
.dash-day-date{font-size:.72rem;font-variant-numeric:tabular-nums}
.dash-legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-secondary)}
.dash-legend span{display:inline-flex;align-items:center;gap:.4rem}

/* ── my cases ── */
.dash-cases-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.35rem 0 .85rem}
.dash-cases-num{font-size:2rem;font-weight:700;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}
.dash-cases-cap{font-size:.84rem;color:var(--text-secondary)}
.dash-status-bar{display:flex;gap:3px;block-size:.7rem;border-radius:var(--radius-pill);overflow:hidden}
.dash-status-seg{flex:var(--n) 1 0;min-inline-size:.5rem;background:var(--seg)}
.dash-status-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem;margin:.9rem 0 0;padding:0;list-style:none;font-size:.84rem;color:var(--text-secondary)}
.dash-status-list li{display:flex;align-items:center;gap:.45rem;min-width:0}
.dash-status-list b{margin-inline-start:auto;color:var(--text);font-variant-numeric:tabular-nums}
.dash-status-list .dash-dot{background:var(--seg)}
.dash-card-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.875rem;font-weight:600;color:var(--primary-dark);text-decoration:none}

@media (max-width:767.98px){
  .dash-item{grid-template-columns:3.6rem 1rem minmax(0,1fr);column-gap:.5rem}
  .dash-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .dash-title-row{align-items:flex-start}
  .dash-seg{inline-size:100%}.dash-seg-btn{flex:1;padding-inline:.5rem}
  .dash-hero-side{inline-size:100%;justify-content:space-between}
}
@media (pointer:coarse){.dash-seg-btn,.dash-day{min-block-size:44px}}