/* =============================================================================
   25 — FIRM · DOCUMENTS  (template-parts/firm/view-documents.php re-skin)
   -----------------------------------------------------------------------------
   Visual target: "19 Firm Documents.dc.html".
   Scoped to .portal-shell.firm-shell and to documents-only hooks (#firmDocsTable,
   #firmDocSearch, #firmDropzone) so it refines — never redefines — the SHARED
   components already in style.css / portal-redesign.css (.panel, .panel-head,
   .firm-head, .data-table, .badge*, .firm-filter, .doc-upd-form, .doc-dl,
   .upload, .firm-grid, .firm-field, .btn*). No sample data, no dead controls.

   Mismatch kept live: the mockup shows visibility/status as static pills, but the
   live list renders an inline per-row edit form (two selects + Save) for editable
   rows and read-only badges otherwise. BOTH branches are preserved; the inline
   form is laid out compactly so it sits where the mockup's pills are.
   ============================================================================= */

/* --- Filter bar ------------------------------------------------------------ */
/* Mockup: a pill search that flexes to fill + two selects, wrapping on narrow.
   The panel-head is already flex/space-between; make the search grow. */
.portal-shell.firm-shell .firm-filterbar:has(#firmDocSearch){
	gap:12px;
	justify-content:flex-start;
}
.portal-shell.firm-shell .firm-filterbar #firmDocSearch{
	width:100%;
}
.portal-shell.firm-shell .firm-filterbar .tb-search:has(#firmDocSearch){
	flex:1 1 200px;
	width:auto;
	min-width:200px;
}

/* --- Documents table ------------------------------------------------------- */
/* Mockup header: 11.5px uppercase, denser 12px/14px padding; rows hover grey.
   Base .data-table already carries the type + hover; nudge density + give the
   table a min-width so wide content scrolls inside the overflow-x wrapper
   (only above the 760px breakpoint where the table stacks into cards). */
@media(min-width:761px){
	.portal-shell.firm-shell #firmDocsTable{
		min-width:880px;
	}
	.portal-shell.firm-shell #firmDocsTable th{
		padding:12px 14px;
	}
	.portal-shell.firm-shell #firmDocsTable td{
		padding:14px;
		vertical-align:top;
	}
}

/* File cell: bold name + inline vN chip + muted size · direction meta. */
.portal-shell.firm-shell #firmDocsTable td[data-label] b{
	color:var(--blue-ink);
	font-weight:600;
}

/* Matter ref reads as tabular mono-ish; keep the link recognisable. */
.portal-shell.firm-shell #firmDocsTable a{
	color:var(--blue);
	font-weight:500;
}
.portal-shell.firm-shell #firmDocsTable a:hover{
	color:var(--red);
}

/* --- Inline per-row visibility/status edit form ---------------------------- */
/* Denser than the mockup's static pill: lay the two selects + Save compactly and
   let them wrap so the row stays readable on narrow tables. */
.portal-shell.firm-shell #firmDocsTable .doc-upd-form{
	gap:6px;
	align-items:center;
	max-width:260px;
}
.portal-shell.firm-shell #firmDocsTable .doc-upd-form select{
	flex:1 1 108px;
	min-width:96px;
	padding:6px 8px;
	border-radius:7px;
}
.portal-shell.firm-shell #firmDocsTable .doc-upd-save{
	flex:0 0 auto;
}

/* Read-only badge pair (non-editable rows) stacks tidily. */
.portal-shell.firm-shell #firmDocsTable td[data-label] .badge{
	margin:2px 4px 2px 0;
}

/* --- Download button ------------------------------------------------------- */
/* Mockup: a 30px round icon button, hairline border, blue glyph, pale hover. */
.portal-shell.firm-shell #firmDocsTable .doc-dl{
	width:30px;
	height:30px;
	border-radius:50%;
}
.portal-shell.firm-shell #firmDocsTable .doc-dl svg{
	width:13px;
	height:13px;
}

/* --- Upload form card ------------------------------------------------------ */
/* Mockup upload panel caps at ~680px; keep it responsive. Scoped to the panel
   that holds the dropzone so sibling firm forms (new matter, etc.) are untouched. */
.portal-shell.firm-shell .panel:has(#firmDropzone){
	max-width:680px;
}

/* Dashed dropzone: nudge the shared .upload to the mockup's padding / radius and
   its label + hint type scale; keep the real click-to-browse + drag hooks. */
.portal-shell.firm-shell #firmDropzone{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:24px;
	border-radius:10px;
	border-width:1.5px;
	text-align:center;
}
.portal-shell.firm-shell #firmDropzone b{
	font-size:14px;
	color:var(--ink);
}
.portal-shell.firm-shell #firmDropzone span{
	font-size:12.5px;
	color:var(--mid);
	margin-top:4px;
}
.portal-shell.firm-shell #firmDropzone:hover b{
	color:var(--blue);
}
/* Echoed filename (aria-live) reads as a confirmed selection. */
.portal-shell.firm-shell #firmDropName:not(:empty){
	margin-top:10px;
	color:var(--blue-ink);
}