/* cases page styles, lifted out of cases.html */

/* Sortable docket headings. One column sorts at a time: clicking another
   takes over and the previous one drops its arrow entirely. */
table.caselist th.sortcol {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.caselist th.sortcol:hover { color: var(--gold); }
table.caselist th.sortcol::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  text-align: right;
  opacity: 0.35;
}
table.caselist th.sortcol:hover::after { content: "\2195"; }
table.caselist th.sortcol.sorted-asc::after { content: "\25B2"; opacity: 1; }
table.caselist th.sortcol.sorted-desc::after { content: "\25BC"; opacity: 1; }
table.caselist th.sortcol.sorted-asc,
table.caselist th.sortcol.sorted-desc { color: var(--gold); }
  .tabrow { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
  .tabrow .modetab {
    border: 2px solid var(--brown);
    background: var(--paper-dark);
    color: var(--ink-soft);
    font-family: inherit;
    font-weight: bold;
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 8px;
    cursor: pointer;
  }
  .tabrow .modetab.active { background: var(--brown); color: var(--cream); }
  .filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
  }
  .filters input, .filters select {
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
    border: 2px solid var(--brown);
    border-radius: 6px;
    background: var(--cream);
    color: var(--ink);
  }
  .filters input { flex: 1 1 220px; max-width: 380px; }
  table.caselist { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--cream); }
  table.caselist th, table.caselist td {
    border: 1px solid var(--ink-soft);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }
  table.caselist th {
    background: var(--brown);
    color: var(--cream);
    font-family: Georgia, serif;
    letter-spacing: 1px;
    font-size: 12px;
    text-transform: uppercase;
  }
  table.caselist tr:hover td { background: var(--paper-dark); cursor: pointer; }
  .cn { font-family: 'Courier New', monospace; font-weight: bold; color: var(--rust); white-space: nowrap; }
  .stbadge {
    font-size: 10px; font-weight: bold; letter-spacing: 1px;
    text-transform: uppercase; padding: 2px 8px; border-radius: 10px;
    color: var(--cream); background: var(--ink-soft); white-space: nowrap;
  }
  .stbadge.filed { background: var(--gold); color: var(--ink); }
  .stbadge.arraignment, .stbadge.pretrial { background: var(--orange); }
  .stbadge.trial { background: var(--rust); }
  .stbadge.decided { background: var(--avocado); }
  .stbadge.dismissed, .stbadge.closed { background: var(--ink-soft); }
  .pager { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
  .newcase {
    background: var(--cream);
    border: 2px solid var(--brown);
    border-radius: 8px;
    padding: 16px;
    max-width: 700px;
  }
  .newcase label { display: block; font-size: 12px; font-weight: bold; color: var(--ink-soft); margin: 10px 0 3px; }
  .newcase input, .newcase select, .newcase textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
    border: 2px solid var(--brown);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
  }
  .newcase textarea { min-height: 70px; }
  .chargebox { position: relative; }
  .chargeresults {
    position: absolute; z-index: 30; left: 0; right: 0;
    background: var(--cream);
    border: 2px solid var(--brown);
    border-radius: 0 0 8px 8px;
    max-height: 240px; overflow-y: auto; display: none;
  }
  .chargeresults button {
    display: block; width: 100%; text-align: left; border: 0;
    border-bottom: 1px solid var(--paper-dark); background: none;
    font-family: inherit; font-size: 13px; padding: 8px 10px; cursor: pointer;
  }
  .chargeresults button:hover { background: var(--paper-dark); }
  .cc { font-family: 'Courier New', monospace; font-weight: bold; color: var(--rust); margin-right: 6px; }
  .pickedcharge {
    display: flex; align-items: center; gap: 8px;
    background: var(--paper);
    border: 1px solid var(--brown); border-left: 5px solid var(--rust);
    border-radius: 6px; padding: 6px 10px; margin-top: 6px; font-size: 13px;
  }
  .pickedcharge b { flex: 1; }
  .pickedcharge .qty { display: flex; align-items: center; gap: 5px; }
  .pickedcharge .qty button {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--brown); background: var(--paper);
    font-weight: bold; cursor: pointer; line-height: 1;
  }
  .pickedcharge .rm { color: var(--rust); background: none; border: 0; cursor: pointer; font-weight: bold; }
  .docketlist .ditem {
    background: var(--cream);
    border: 1px solid var(--brown); border-left: 6px solid var(--gold);
    border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; font-size: 13.5px;
    display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  }
  .docketlist .when { font-family: 'Courier New', monospace; font-weight: bold; }
  .emptymsg { color: var(--ink-soft); font-style: italic; padding: 24px; text-align: center; }
  /* a wide table scrolls inside its own box; the page never scrolls sideways */
  .tablewrap { width: 100%; overflow-x: auto; }
  @media (max-width: 760px) {
    table.caselist .hidesm { display: none; }
    .filters input, .filters select { flex: 1 1 100%; max-width: none; }
  }