/* PC XML Filter, web version: the desktop window's look (Windows, ttk) in a browser. Colours that are rules
   (the DC strip, our terms, quick-box dots, filter line) are set by app.js from the rule files. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px "Segoe UI", Tahoma, Arial, sans-serif; color: #000; background: #f0f0f0; }
button { font: inherit; padding: 2px 10px; border: 1px solid #adadad; background: #e1e1e1; border-radius: 0; cursor: pointer; }
button:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
button:disabled { color: #a0a0a0; cursor: default; }
input[type=text], input[type=password], textarea, select { font: inherit; border: 1px solid #7a7a7a; padding: 2px 4px; background: #fff; }
.grey { color: #555; }
.red, .err { color: #c00000; }
.note { color: #1f4e99; }
.spacer { flex: 1; }
[hidden] { display: none !important; }

#app { display: flex; flex-direction: column; height: 100vh; }
.dcstrip { text-align: center; color: #fff; background: #c00000; font-weight: bold; font-size: 15px; padding: 3px 6px; }
.dcstrip button { margin-left: 12px; font-weight: normal; font-size: 12px; padding: 0 8px; }
.ruleline { color: #c00000; padding: 2px 8px; background: #fff3f3; }
.sourcebar { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #d0d0d0; }
.sourcebar form { margin: 0; }
.sourcebar.dragover { background: #dbeaff; outline: 2px dashed #1f4e99; }
.apptitle { font-weight: bold; }
.apptitle .edition { font-weight: normal; color: #555; }
.sources { color: #333; max-width: 35vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary.red { color: #c00000; }
.clientnote { padding: 2px 8px; white-space: pre-wrap; font-size: 12px; }
.notice { padding: 4px 8px; background: #fff8e0; border-bottom: 1px solid #e0d090; white-space: pre-wrap; }
.notice.red { background: #fff0f0; color: #c00000; border-color: #e0a0a0; }

.filterarea { padding: 4px 8px 6px; border-bottom: 1px solid #c8c8c8; overflow: auto; max-height: 45vh; resize: vertical; }
.askrow, .filterrow { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.askrow input { flex: 1; }
.askanswer { border: 1px solid #c8c8c8; background: #fafafa; padding: 4px 8px; margin: 4px 0 2px; }
.askanswer .filtertext { font-family: Consolas, "Courier New", monospace; }
.askanswer .badge { font-weight: bold; margin-left: 8px; }
.askanswer .lowline { color: #c00000; font-weight: bold; }
.askanswer .lines div { white-space: pre-wrap; }
.filterlabel { font-weight: bold; margin-top: 8px; display: block; }
.boxwrap { position: relative; flex: 1; }
.boxwrap .shadow, .boxwrap textarea { font: 13px Consolas, "Courier New", monospace; padding: 4px 6px; margin: 0;
  white-space: pre-wrap; word-wrap: break-word; line-height: 18px; border: 1px solid #7a7a7a; width: 100%; min-height: 48px; }
.boxwrap .shadow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-color: transparent; background: #fff; }
.boxwrap textarea { position: relative; background: transparent; resize: vertical; display: block; color: transparent; caret-color: #000; }
.boxwrap .shadow .ours { border-bottom: 2px dotted; }
.boxwrap .shadow .bad { background: #ffd0d0; }
/* wave 20-web W4: the grey X sits at the right end of the box (its colours and size: GRID.md clear_x) */
.boxwrap .clearx { position: absolute; top: 2px; right: 6px; z-index: 2; cursor: pointer; line-height: 1; }
.boxwrap .clearx[hidden] { display: none; }
.filternotes { min-height: 16px; margin-top: 2px; white-space: pre-wrap; }

.tabs { display: flex; gap: 0; padding: 4px 8px 0; border-bottom: 1px solid #adadad; }
.tabs button { border-bottom: none; margin-right: -1px; background: #f0f0f0; padding: 3px 14px; }
.tabs button.on { background: #fff; position: relative; top: 1px; font-weight: bold; }
.tabbody { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.tabbar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; flex-wrap: wrap; border-bottom: 1px solid #e0e0e0; background: #f7f7f7; }
.filterline { color: #1f4e99; }
.split { flex: 1; display: flex; min-height: 0; }
.left { flex: 1; min-width: var(--case-list-min, 200px); display: flex; flex-direction: column; min-height: 0; }
.divider { width: 8px; cursor: col-resize; background: #e6e6e6; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.panel { width: 380px; min-width: 120px; display: flex; flex-direction: column; min-height: 0; }
.statusbar { padding: 3px 8px; border-top: 1px solid #c8c8c8; background: #f0f0f0; }
#status { white-space: pre-wrap; }   /* keep the core's "   " before the history note, as the desktop shows it */

/* tables (grid, events, status, deadlines, case panel) */
.tablewrap { flex: 1; overflow: auto; min-height: 0; position: relative; }
table.grid { border-collapse: collapse; table-layout: fixed; font-size: 12px; }
table.grid th, table.grid td { border: 1px solid #d4d4d4; padding: 1px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
table.grid th { background: #f3f3f3; position: sticky; top: 0; z-index: 2; font-weight: normal; cursor: pointer; user-select: none; }
table.grid tr.qrow th { top: 21px; background: #fafafa; padding: 1px; cursor: default; }
table.grid thead.boxesfirst tr.qrow th { top: 0; }            /* wave 22-web J-4: boxes above the titles (panel lists) */
table.grid tbody tr:hover { background: #eef5ff; }
table.grid tbody tr.sel { background: #cce4ff; }
table.grid td.grey { color: #808080; }
table.grid td.sel { outline: 2px solid #1f4e99; outline-offset: -2px; }
table.grid tr.late td { color: #c00000; }
table.grid tr.heading td { font-weight: bold; background: #eef1f6; }
.qbox { display: flex; align-items: center; border: 1px solid #7a7a7a; background: #fff; height: 19px; }
.qbox .dot { width: 9px; height: 9px; border-radius: 50%; margin: 0 3px; flex: none; cursor: pointer; border: 1px solid #c4c4c4; }
.qbox .tag { font-size: 10px; margin-right: 2px; flex: none; }
.qbox input { border: none; width: 100%; min-width: 0; padding: 0 2px; font-size: 12px; outline: none; background: transparent; }
/* wave 22-web J-5: a box with the focus grows over the next columns (its widths: GRID.md Grid numbers) */
.qbox.grown { position: relative; z-index: 6; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
table.grid tr.qrow th:focus-within { z-index: 7; }         /* ... above the boxes of the next columns */
.panel .ptabs { display: flex; padding: 4px 4px 0; border-bottom: 1px solid #adadad; overflow-x: auto; overflow-y: hidden; }
.panel .ptabs button { border-bottom: none; padding: 2px 8px; margin-right: -1px; white-space: nowrap; flex: none; }
.panel .ptabs button.on { background: #fff; font-weight: bold; position: relative; top: 1px; }
.panel .pbody { flex: 1; overflow: auto; padding: 6px; white-space: pre-wrap; font-size: 12px; }
.panel .pbody .lbl { font-weight: bold; }
.panel .pbody .pnote { color: #555; }
.dgrid { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: 12px; outline: none; }
.dgrid td { border: 1px solid #b0b0b0; padding: 2px 4px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; cursor: default; }
.dgrid col.cn { width: 20%; }
.dgrid col.cv { width: 30%; }
.dgrid td.on { background: #cce4ff; }
/* wave 22-web J-7: the QA tab - name | value, one field per row (the line's width and colour: TRANSACTIONS.md qa_tab.line) */
.qagrid col.cn { width: 40%; }
.qagrid col.cv { width: 60%; }
.qagrid td.qaline { padding: 0; height: 0; border-left: none; border-right: none; }
.dgrid td.dhead { font-weight: bold; }
.dgrid td.dnote { color: #555; }
.panel .phead { display: flex; gap: 6px; align-items: center; padding: 3px 6px; }

.statusgrid td.count { color: #1f4e99; text-decoration: underline; cursor: pointer; text-align: right; }
.statusgrid tr.clicked td { background: #fff3c4; }

.menu { position: fixed; z-index: 50; background: #fff; border: 1px solid #999; box-shadow: 2px 2px 6px rgba(0,0,0,.25); padding: 2px 0; max-height: 70vh; overflow: auto; min-width: 180px; }
.menu div { padding: 3px 18px 3px 22px; cursor: pointer; white-space: nowrap; position: relative; }
.menu div:hover { background: #cce4ff; }
.menu div.on::before { content: "\2713"; position: absolute; left: 6px; }
.menu div.head { font-weight: bold; cursor: default; color: #555; }
.menu div.head:hover { background: none; }
.menu hr { border: none; border-top: 1px solid #ddd; margin: 2px 0; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 40; display: flex; align-items: center; justify-content: center; }
.modalbox { background: #f0f0f0; border: 1px solid #888; width: min(1000px, 92vw); max-height: 85vh; display: flex; flex-direction: column; }
.modalhead { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid #ccc; }
.modalbody { padding: 8px; overflow: auto; white-space: pre-wrap; font-size: 12px; background: #fff; }

body.login { display: flex; align-items: center; justify-content: center; height: 100vh; }
.loginbox { background: #fff; border: 1px solid #aaa; padding: 20px 26px; width: 420px; display: flex; flex-direction: column; gap: 10px; }
.loginbox h1 { font-size: 18px; margin: 0; }
.loginbox .edition { font-size: 13px; color: #555; font-weight: normal; }
.ownframe { margin: 4px 8px; padding: 2px 8px 6px; border: 1px solid #c8c8c8; }
.ownframe .ownbox { flex: 1; font-family: Consolas, monospace; }
.appsline { margin-left: 12px; }
.grid th { position: relative; }
.grid th .hx { position: absolute; right: 2px; top: 1px; color: #c00000; font-size: 10px; cursor: pointer; padding: 0 2px; }
.grid th .hx:hover { background: #ffd0d0; }
.grid th .ha { position: absolute; right: 16px; top: 1px; font-size: 11px; cursor: pointer; padding: 0 2px; }
.grid th .ha:hover { background: #e8e8e8; }
.grid th .hname { padding-right: 12px; }
/* GRID.md rule 25 (wave 14 C2): titles wrap at word boundaries (a word longer than the column is cut as before);
   the row is as tall as the tallest title, up to wrap_titles.max_lines (set on each title from the rules) */
table.grid thead tr:first-child th { white-space: normal; vertical-align: bottom; }
.grid th .hname { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal;
  word-break: normal; white-space: normal; }
#casedatehead { cursor: pointer; }
.menu .subline { position: relative; }
.menu .subline.boldline { font-weight: bold; }
.menu .submenu { position: fixed; padding: 2px 0; font-weight: normal; max-height: 70vh; overflow-y: auto; }
.menu hr.bold { border-top: 2px solid #333; }
.copynote { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #fff8c4; color: #333;
  border: 1px solid #333; padding: 2px 8px; z-index: 50; }
.countline { font-weight: bold; margin-top: 2px; }
.suggest button { margin-top: 2px; }
/* GRID.md rule 16 (wave 15 C1): a selected block of cells; dragging selects cells, not text */
table.grid td.bsel { background: #cce4ff; }
table.grid tbody { user-select: none; }
/* GRID.md rule 25 (wave 15 W1): cell VALUES never wrap - only titles (above) and the details grid (.dgrid) do */
table.grid tbody td { white-space: nowrap; }

/* GRID.md rule 29 (wave 16 T4): "Arrange columns..." and dragging a column title; DEADLINES.md rule 23: the note's cell */
.arrange { min-width: 640px; }
.arrcols { display: flex; gap: 8px; align-items: stretch; }
.arrcol { flex: 1; display: flex; flex-direction: column; min-width: 220px; }
.arrhead { font-weight: bold; margin-bottom: 3px; }
.arrlist { border: 1px solid #7a7a7a; background: #fff; height: 300px; overflow-y: auto; user-select: none; }
.arritem { padding: 1px 6px; white-space: nowrap; cursor: default; }
.arritem.on { background: #0078d7; color: #fff !important; }
.arrmid { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.arrhint { margin-top: 6px; }
.arrfoot { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
table.grid tr.titledrag th { cursor: col-resize; }
.tablewrap .dropline { position: absolute; z-index: 5; pointer-events: none; }   /* GRID.md rule 30: where it lands */
table.grid td.tipcell { cursor: help; }

.updatebar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid #d0d0d0; flex-wrap: wrap; }

/* wave beta B4 (ACCOUNTS.md rule 16): the gateway screen and the small link back to it */
body.gateway { margin: 0; }
.gwtop { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid #d0d0d0; }
.gwtop form { margin: 0; }
.gwbox { max-width: 760px; margin: 20px auto; padding: 0 16px; }
.gwbox h1 { font-size: 20px; }
.gwmethods { display: flex; flex-direction: column; gap: 12px; }
.gwmethod { border: 1px solid #c8c8c8; background: #fff; padding: 10px 14px; }
.gwmethod p { margin: 4px 0 8px; }
.gwprogress { margin-top: 12px; }
.gwpre { white-space: pre-wrap; font-family: Consolas, monospace; font-size: 12px; }
.gwgo { margin-top: 18px; }
.gwgobtn { display: inline-block; padding: 6px 18px; border: 1px solid #0078d7; background: #e5f1fb; color: inherit; text-decoration: none; }
.addapps { font-size: 12px; }
.tabs #bigupdate { margin: 0 0 4px; align-self: center; }   /* wave beta B5: colour and size from ACCOUNTS.md big_update */
#userline { white-space: nowrap; }

/* wave 21 I-13: the Documents tab's Download column (colours: DOWNLOADS.md) */
.dlword { cursor: pointer; text-decoration: underline; }
.dlword.off { cursor: default; text-decoration: none; }
/* wave 21 I-19: the case Deadlines tab's section titles (colours: DEADLINES.md case_tab.sections) */
td.secthead { font-weight: bold; padding-top: 6px; }
/* wave 22-web J-1: the strip at a title's right border that drags the width (its width: GRID.md Grid numbers) */
.grid th .rgrip { position: absolute; top: 0; right: 0; bottom: 0; cursor: col-resize; z-index: 3; }
.grid tr.resizing th, .grid tr.resizing th * { cursor: col-resize; }
/* wave 22-web J-9: the line above the foreign priority claims (its width and colour: TRANSACTIONS.md continuity_line) */
.panel .pbody .pline { margin: 8px 0 2px; height: 0; }
/* wave 22-web J-16: a download that is not possible (not public) - greyed but clickable (it says why) */
button.off { color: #9a9a9a; border-color: #c8c8c8; background: #f4f4f4; }
/* wave 22-web J-14: the Smart download panel - BESIDE the window's content, never a blocking window (no overlay) */
.smartpanel { position: fixed; right: 12px; top: 90px; width: 380px; max-height: 80vh; overflow: auto; background: #fff;
  border: 1px solid #888; box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 35; padding: 8px; font-size: 12px; }
.smartpanel .smarthead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.smartpanel .smartgroup { border-top: 1px solid #ddd; padding: 4px 0; }
.smartpanel .smartopt { display: block; margin: 2px 0 2px 8px; }
.smartpanel .smartpack, .smartpanel .smartfmt { margin: 4px 0 4px 18px; }
.smartpanel .smartline { white-space: pre-wrap; margin: 6px 0; min-height: 14px; }
.smartpanel .smartbtns { margin-top: 6px; }

/* wave 23-web (INTAKE.md): the "Find cases" area on the gateway and the old mode's page */
.intake { border: 1px solid #c8c8c8; background: #fff; padding: 10px 14px; margin: 14px 0; }
.intake h2 { font-size: 17px; margin: 4px 0; }
.intake h3 { font-size: 14px; margin: 12px 0 4px; }
.intaketabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.intaketab { border: 1px solid #c8c8c8; background: #f2f2f2; padding: 3px 10px; cursor: pointer; }
.intaketab.on { background: #fff; border-bottom-color: #fff; font-weight: bold; }
.intakebody { border: 1px solid #c8c8c8; padding: 8px; }
.intakebody textarea { width: 100%; box-sizing: border-box; font-family: Consolas, monospace; font-size: 12px; }
.intakefield { display: block; margin: 3px 0; }
.intakefield span { display: inline-block; min-width: 200px; }
.intakegrid { border-collapse: collapse; margin: 4px 0; font-size: 12px; max-width: 100%; }
.intakegrid th, .intakegrid td { border: 1px solid #d0d0d0; padding: 2px 6px; text-align: left; vertical-align: top;
  white-space: normal; overflow-wrap: anywhere; }
.intakegrid tr.intakebatch { cursor: pointer; }
.intakegrid tr.on td { background: #eef4ff; }
.intakegrid td.warn { color: #9a5b00; }
.intakebuttons, .intakeremove { margin: 8px 0; }