.legal-hearing-roll-controls {
  position: relative;
  overflow: hidden;
  margin-block: 1.25rem 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary) 11%, transparent), transparent 30%),
    linear-gradient(145deg, var(--surface) 0%, #fbfdfc 100%);
  box-shadow: 0 14px 36px rgba(21, 67, 57, .09);
}

.legal-hearing-roll-controls::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--primary), var(--gold));
}

.legal-hearing-roll-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.legal-hearing-roll-filter-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  min-width: 0;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 750;
}

.legal-hearing-roll-filter-grid label > span {
  display: block;
  padding-inline: .15rem;
  white-space: nowrap;
}

.legal-hearing-roll-filter-grid input,
.legal-hearing-roll-filter-grid select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding-inline: .8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background-color: var(--surface);
  font: inherit;
  font-weight: 600;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.legal-hearing-roll-filter-grid input:hover,
.legal-hearing-roll-filter-grid select:hover {
  border-color: #9ebdb4;
  background-color: #fcfefd;
}

.legal-hearing-roll-filter-grid input:focus,
.legal-hearing-roll-filter-grid select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.legal-hearing-roll-client-field {
  grid-column: span 2;
}

.legal-hearing-roll-controls-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-top: 1px solid var(--line);
}

/* نموذج رول الجلسات يضع زر «إعداد الرول» بجوار الحقول في صف واحد: لا هامش ولا حد علوي له هناك،
   وإلا امتلأ الصف بفراغ فوق الحقول (الحدّ والهامش صُمّما لوضع الزر تحتها). */
@media (min-width: 1101px) {
  .legal-hearing-roll-controls:not(.legal-case-filter-controls) { align-items: center; }
  .legal-hearing-roll-controls:not(.legal-case-filter-controls) > .legal-hearing-roll-controls-actions {
    margin-block: 0;
    padding-block: 0;
    border-top: 0;
  }
}

.legal-hearing-roll-controls-actions .primary {
  min-width: 150px;
  min-height: 44px;
  border-radius: 12px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}

.legal-case-filter-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-block: 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}

.legal-case-filter-controls > input[type="hidden"],
.legal-case-filter-controls > datalist { display: none; }

.legal-case-filter-grid {
  grid-template-columns:
    minmax(280px, 1.7fr)
    minmax(170px, 1fr)
    minmax(140px, .75fr)
    minmax(240px, 1.4fr);
}

/* مراجع القضايا يرى حقل «الموظف» خامساً في الصف نفسه. */
@media (min-width: 1101px) {
  .legal-case-filter-grid:has(.legal-case-employee-field) {
    grid-template-columns:
      minmax(220px, 1.5fr)
      minmax(150px, 1fr)
      minmax(150px, .9fr)
      minmax(190px, 1.2fr)
      minmax(190px, 1.1fr);
  }
}

.legal-case-filter-controls > .hasad-document-button { min-height: 44px; }

.legal-hearing-roll-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-block: 1rem 1.25rem;
}

.legal-hearing-roll-metrics article {
  position: relative;
  overflow: hidden;
  min-height: 100px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--surface), #f8fbfa);
  box-shadow: 0 8px 22px rgba(28, 66, 58, .06);
}

.legal-hearing-roll-metrics article::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--primary);
}

.legal-hearing-roll-metrics article:nth-child(2)::after { background: #2f80a7; }
.legal-hearing-roll-metrics article:nth-child(3)::after { background: #c18a2a; }
.legal-hearing-roll-metrics article:nth-child(4)::after { background: #7765a8; }

.legal-hearing-roll-metrics article span {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
}

.legal-hearing-roll-metrics article strong {
  display: block;
  margin-block-start: .45rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
}

@media (max-width: 1100px) {
  .legal-case-filter-controls { grid-template-columns: 1fr; }
  .legal-hearing-roll-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-hearing-roll-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .legal-hearing-roll-filter-grid label { grid-template-columns: 1fr; align-items: start; gap: .4rem; }
  .legal-hearing-roll-filter-grid,
  .legal-hearing-roll-metrics { grid-template-columns: 1fr; }
  .legal-hearing-roll-client-field { grid-column: auto; }
  .legal-hearing-roll-controls-actions { align-items: stretch; }
  .legal-hearing-roll-controls-actions { flex-direction: column; }
  .legal-hearing-roll-controls-actions .primary { width: 100%; }
}

/* الهاتف: جدول الرول والقضايا يحتفظ بأعمدة مقروءة ويمرَّر أفقيًا داخل .table-wrap بدل الانكماش إلى حروف — للشاشة فقط، وقواعد الطباعة كما هي. */
/* F33/LG-7 (R2): the roll's grid track must never grow to the table's width. With an implicit `auto`
   track and `min-width:auto` sections, the track became the table's min-content (602px in a 314px
   column), so the wrapper never overflowed (scrollWidth = clientWidth) and .legal-print-report clipped it. */
.legal-hearing-roll { grid-template-columns: minmax(0, 1fr); }
.legal-hearing-roll > .hearing-roll-group { min-inline-size: 0; }
@media screen and (max-width: 640px) {
  #view .hearing-roll-table.table-wrap { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  /* `> table` outranks responsive-mobile.css `#app .table-wrap > table{min-inline-size:600px}` (same
     specificity, loaded later) so the roll keeps its own readable width. */
  #view .hearing-roll-table.table-wrap > table { table-layout: auto; min-inline-size: 880px; }
  /* Wrap between words only: `overflow-wrap:anywhere` shrinks each column's min-content to one letter. */
  #view .hearing-roll-table.table-wrap :is(th, td, th *, td *) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  #view .hearing-roll-table.table-wrap :is(.roll-claim-amount, .roll-case-reference) { white-space: nowrap; }
  /* The desktop/print percentage widths (8%…17%) starve the client column on a scrolled table; let content size it. */
  #view .hearing-roll-table.table-wrap > table > colgroup > col { inline-size: auto; }
  #view .hearing-roll-table tbody td { text-align: start; text-justify: auto; }
}
.hearing-roll-table .roll-hearing-status { display: block; margin-bottom: 4px; }
.hearing-roll-table .roll-hearing-result { display: block; margin-top: 6px; }

@media print {
  .legal-hearing-roll-controls,
  .legal-hearing-roll-metrics { display: none !important; }
  .hearing-roll-table .roll-hearing-result { display: none !important; }
}

/* R2: مرجع القضية (رقم/سنة، وقد يحمل سابقة لاتينية) امتداد LTR معزول داخل خلية RTL */
.roll-case-reference {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}