/* Sidebar menu */
.sidebar-menu {
	padding: 1rem 0.5rem;
}
.sidebar-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sidebar-menu li {
	margin-bottom: 0.5rem;
}
.sidebar-menu button {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid var(--border);
	background: #fff;
	border-radius: 0.4rem;
	cursor: pointer;
	text-align: left;
	font-size: 1rem;
	transition: background 0.2s;
}
.sidebar-menu button:hover, .sidebar-menu button.active {
	background: var(--accent);
	color: #fff;
}

@media (max-width: 800px) {
	#sidebar { display: none; }
}
* { box-sizing: border-box; }
:root { --bg:#f5f6f8; --fg:#222; --muted:#666; --card:#fff; --border:#ddd; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background: var(--bg); color: var(--fg); }
header { display:flex; gap:1rem; align-items:center; padding:.75rem 1rem; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; }
header h1 { font-size:1.1rem; margin:0; }
nav { display:flex; gap:.5rem; flex:1; }
nav button { padding:.5rem .75rem; border:1px solid var(--border); background:#fff; border-radius:.4rem; cursor:pointer; }
.user { display:flex; gap:.5rem; align-items:center; }
main { padding:1rem; max-width:1100px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--border); border-radius:.6rem; padding:1rem; }
.grid { display:grid; gap:1rem; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.row { display:flex; gap:.75rem; margin:.5rem 0; align-items:center; }
.row > label { width:160px; color:var(--muted); }
input[type="text"], textarea, select { width:100%; padding:.5rem .6rem; border:1px solid var(--border); border-radius:.4rem; background:#fff; }
textarea { min-height:120px; }
.actions { display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:.6rem .4rem; text-align:left; }
.badge { padding:.15rem .5rem; border:1px solid var(--border); border-radius:999px; font-size:.75rem; color:var(--muted); }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.85em; background:#eee; border:1px solid #ddd; border-radius:.3rem; padding:.05rem .35rem; }
footer { text-align:center; padding:1rem; color:var(--muted); }
.searchbar { display:flex; gap:.5rem; margin-bottom:.75rem; }
.searchbar input, .searchbar select { max-width:240px; }
.tag { font-size:.75rem; padding:.15rem .45rem; border:1px solid var(--border); border-radius:.4rem; margin-right:.25rem; }
.timeline { list-style:none; padding-left:1rem; border-left:2px solid var(--border); }
.timeline li { margin:.5rem 0; }
hr.div { border:none; border-top:1px dashed var(--border); margin:.75rem 0; }
button.primary { border-color: #bbb; }
button.danger { border-color:#d99; }


/* Brand */
.brand { display:flex; align-items:center; gap:.6rem; }
.logo { width:42px; height:42px; object-fit:contain; border-radius:.25rem; background:#fff; }
.brand-txt { display:flex; flex-direction:column; line-height:1.1; }
.brand-txt strong { font-size:1rem; letter-spacing:.2px; }
.subtitle { color:var(--muted); font-size:.75rem; }

/* Accent colors inspired by logo */
:root { --accent:#b21f2d; --accent-2:#70757a; }
button.primary { border-color: var(--accent-2); }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.badge { border-color: var(--accent-2); }


/* Metadata grid */
.meta-grid { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }
.meta-grid .row > label { width:auto; min-width:160px; }

.filelist a { font-size:.9rem; }
.filelist .file { display:flex; align-items:center; gap:.5rem; margin:.25rem 0; }
.filelist .file small { color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.filters input[type='date'] { max-width:200px; }
.note { color:var(--muted); font-size:.85rem; }
.badge.workflow { border-color:#cbb; }


/* Layout with sidebar */
body { display:block; }
header + aside#sidebar { position:fixed; top:56px; left:0; width:220px; bottom:0; padding:1rem .75rem; background:#f0f4f7; border-right:1px solid var(--border); overflow:auto; }
main { margin-left:240px; }

#sidebar h4 { margin:.25rem 0 .5rem 0; font-size:.9rem; color:#2c516b; }
#sidebar ul { list-style:none; margin:0 0 1rem 0; padding:0; }
#sidebar li { margin:.25rem 0; }
#sidebar a { display:block; padding:.35rem .5rem; border-radius:.35rem; color:#234; text-decoration:none; }
#sidebar a.active, #sidebar a:hover { background:#e7eef4; }

/* Tabs */
.tabs { display:flex; gap:.5rem; border-bottom:1px solid var(--border); margin-bottom:.75rem; }
.tabs button { padding:.4rem .6rem; border:1px solid var(--border); border-bottom:none; background:#fafafa; border-radius:.4rem .4rem 0 0; cursor:pointer; }
.tabs button.active { background:#fff; font-weight:600; }

/* Quipux-like search header row */
.q-search { display:grid; grid-template-columns: 200px 1fr 1fr 120px; gap:.5rem; align-items:end; }
.q-search small { color:var(--muted); display:block; }
.q-search input { width:100%; }
.q-radio { display:flex; gap:1rem; align-items:center; }

/* Badge tweak for workflow */
.badge.workflow { border-color:#b5c8d6; }
.table .muted { color:var(--muted); font-size:.85em; }
.actions.top { display:flex; gap:.5rem; margin-bottom:.5rem; }

/* Export button */
button.export { border-color:#f0b25e; }


/* --- Added: Cards view + preview + facets --- */
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:.75rem; }
.card-doc { border:1px solid var(--border); border-radius:.6rem; background:#fff; padding:.75rem; }
.card-doc h4 { margin:0 0 .25rem 0; font-size:1rem; }
.card-doc .meta { font-size:.85rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.5rem; margin:.25rem 0; }
.card-doc .meta span { border:1px solid var(--border); border-radius:.35rem; padding:.1rem .4rem; }
.preview { border:1px dashed var(--border); border-radius:.6rem; min-height:220px; padding:.5rem; background:#fafafa; }
.preview iframe { width:100%; height:360px; border:0; }
.preview .placeholder { color:var(--muted); padding:.5rem; }
#sidebar .facets h5 { margin:.75rem 0 .25rem; font-size:.85rem; color:#244; }
#sidebar .facets label { display:flex; align-items:center; gap:.4rem; font-size:.9rem; margin:.15rem 0; }
#sidebar .facet-count { color:#667; font-size:.85em; }
#sidebar .facet-actions { margin:.5rem 0 1rem; display:flex; gap:.5rem; }