/*
 * USCIVICINFRA theme overrides.
 *
 * This theme is intentionally conservative. It extends redbasic without
 * replacing Hubzilla's interaction model. The first pass establishes a civic,
 * diagnostic visual frame and reusable class hooks for later addons.
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
	--civicinfra-bg:               #faf9f6;
	--civicinfra-surface:          #f2efe8;
	--civicinfra-surface-muted:    #e7e1d6;
	--civicinfra-text:             #24231f;
	--civicinfra-muted:            #5f655d;
	--civicinfra-border:           #cfc6b6;
	--civicinfra-rule:             #b7ad9d;
	--civicinfra-primary:          #243f3b;
	--civicinfra-primary-contrast: #f8f6ef;
	--civicinfra-accent:           #8a673c;
	--civicinfra-accent-muted:     #d8c4a2;
	--civicinfra-danger:           #7a342c;
	--civicinfra-focus:            #5a6f69;
	--civicinfra-mono-bg:          #ebe6dc;

	/* Bootstrap bridge */
	--bs-body-bg:           var(--civicinfra-bg);
	--bs-body-color:        var(--civicinfra-text);
	--bs-primary:           var(--civicinfra-primary);
	--bs-primary-rgb:       36, 63, 59;
	--bs-link-color:        #244f49;
	--bs-link-hover-color:  #193b36;
	--bs-border-color:      var(--civicinfra-border);

	/* Typography */
	--bs-body-font-family:    Georgia, Cambria, "Times New Roman", Times, serif;
	--bs-font-sans-serif:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bs-font-monospace:      "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

	/* Type scale */
	--civicinfra-fs-xs:   0.75rem;
	--civicinfra-fs-sm:   0.875rem;
	--civicinfra-fs-base: 1rem;
	--civicinfra-fs-md:   1.0625rem;
	--civicinfra-fs-lg:   1.25rem;
	--civicinfra-fs-xl:   1.5rem;
	--civicinfra-fs-2xl:  1.875rem;

	/* Spacing */
	--civicinfra-space-1: 0.25rem;
	--civicinfra-space-2: 0.5rem;
	--civicinfra-space-3: 0.75rem;
	--civicinfra-space-4: 1rem;
	--civicinfra-space-6: 1.5rem;
	--civicinfra-space-8: 2rem;

	/* Radius */
	--civicinfra-radius-sm: 2px;
	--civicinfra-radius:    3px;

	/* Transition */
	--civicinfra-transition: 150ms ease;
}

[data-bs-theme="dark"] {
	--civicinfra-bg:               #141715;
	--civicinfra-surface:          #1d211f;
	--civicinfra-surface-muted:    #272d2a;
	--civicinfra-text:             #eee9df;
	--civicinfra-muted:            #b4b9b1;
	--civicinfra-border:           #465049;
	--civicinfra-rule:             #667168;
	--civicinfra-primary:          #8ca79f;
	--civicinfra-primary-contrast: #111412;
	--civicinfra-accent:           #c1a06c;
	--civicinfra-accent-muted:     #5c4b32;
	--civicinfra-danger:           #d09286;
	--civicinfra-focus:            #acc8c0;
	--civicinfra-mono-bg:          #242a27;

	--bs-body-bg:          var(--civicinfra-bg);
	--bs-body-color:       var(--civicinfra-text);
	--bs-link-color:       #aecbc3;
	--bs-link-hover-color: #d3e4df;
	--bs-border-color:     var(--civicinfra-border);
}

/* ============================================================
   BASE
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var(--civicinfra-bg);
	color: var(--civicinfra-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* UI chrome uses sans-serif */
body,
button, input, select, textarea,
.btn, .nav, .navbar, .dropdown-menu,
.modal, .card, .badge, .alert,
label, th, td, caption {
	font-family: var(--bs-font-sans-serif);
}

/* Content areas use serif */
main,
.wall-item-content,
.generic-content-wrapper,
.section-content-wrapper,
#region_2,
#content,
.article-content,
.civicinfra-prose {
	font-family: var(--bs-body-font-family);
}

code, pre, kbd, samp,
.civicinfra-record-id,
.civicinfra-cid,
.civicinfra-token {
	font-family: var(--bs-font-monospace);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bs-font-sans-serif);
	font-weight: 700;
	color: var(--civicinfra-text);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

h1 { font-size: var(--civicinfra-fs-2xl); }
h2 { font-size: var(--civicinfra-fs-xl);  }
h3 { font-size: var(--civicinfra-fs-lg);  }
h4 { font-size: var(--civicinfra-fs-md);  }
h5 { font-size: var(--civicinfra-fs-base); font-weight: 600; }
h6 { font-size: var(--civicinfra-fs-sm);  font-weight: 600; }

p { line-height: 1.65; }

/* Tabular numerals for data-heavy contexts */
.civicinfra-data-table,
.civicinfra-record-id,
.civicinfra-cid {
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   LINKS
   ============================================================ */

a, .nav-link, .dropdown-item {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.14em;
	transition: color var(--civicinfra-transition);
}

a:hover, a:focus {
	text-decoration: underline;
}

:focus-visible {
	outline: 3px solid var(--civicinfra-focus);
	outline-offset: 2px;
	border-radius: var(--civicinfra-radius-sm);
}

/* ============================================================
   CHROME
   ============================================================ */

.navbar, #nav-bar,
.app-menu, aside,
.generic-content-wrapper,
.section-content-wrapper,
.card, .modal-content, .dropdown-menu {
	border-color: var(--civicinfra-border);
}

.navbar, #nav-bar {
	border-bottom: 1px solid var(--civicinfra-rule);
	box-shadow: none;
}

.generic-content-wrapper,
.section-content-wrapper,
.card, .modal-content, .dropdown-menu {
	background-color: var(--civicinfra-bg);
}

.card-header,
.section-title-wrapper,
.generic-content-wrapper-styled .section-title-wrapper {
	background-color: var(--civicinfra-surface);
	border-color: var(--civicinfra-border);
	color: var(--civicinfra-text);
}

hr, .dropdown-divider {
	border-color: var(--civicinfra-rule);
	opacity: 1;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
	font-family: var(--bs-font-sans-serif);
	font-weight: 600;
	border-radius: var(--civicinfra-radius);
	transition:
		background-color var(--civicinfra-transition),
		border-color var(--civicinfra-transition),
		color var(--civicinfra-transition);
}

.btn-primary, .btn-success {
	background-color: var(--civicinfra-primary);
	border-color: var(--civicinfra-primary);
	color: var(--civicinfra-primary-contrast);
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
	background-color: #1b312e;
	border-color: #1b312e;
	color: var(--civicinfra-primary-contrast);
}

.btn-danger {
	background-color: var(--civicinfra-danger);
	border-color: var(--civicinfra-danger);
	color: var(--civicinfra-primary-contrast);
}

.btn-outline-secondary {
	border-color: var(--civicinfra-border);
	color: var(--civicinfra-muted);
}

.btn-outline-secondary:hover {
	background-color: var(--civicinfra-surface);
	border-color: var(--civicinfra-rule);
	color: var(--civicinfra-text);
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-success:focus {
	background-color: #a8beb7;
	border-color: #a8beb7;
	color: var(--civicinfra-primary-contrast);
}

/* ============================================================
   FORMS
   ============================================================ */

.form-control,
.form-select {
	background-color: var(--civicinfra-bg);
	border-color: var(--civicinfra-border);
	border-radius: var(--civicinfra-radius);
	color: var(--civicinfra-text);
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-sm);
	transition:
		border-color var(--civicinfra-transition),
		box-shadow var(--civicinfra-transition);
}

.form-control:focus,
.form-select:focus {
	background-color: var(--civicinfra-bg);
	border-color: var(--civicinfra-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--civicinfra-focus) 20%, transparent);
	color: var(--civicinfra-text);
}

.form-label {
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-sm);
	font-weight: 600;
	color: var(--civicinfra-text);
	margin-bottom: var(--civicinfra-space-1);
}

.form-check-input:checked {
	background-color: var(--civicinfra-primary);
	border-color: var(--civicinfra-primary);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
	background-color: var(--civicinfra-surface);
	border-color: var(--civicinfra-border);
	color: var(--civicinfra-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
	background-color: var(--civicinfra-surface);
}

/* ============================================================
   TABLES
   ============================================================ */

.table {
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-sm);
	--bs-table-bg: transparent;
	--bs-table-border-color: var(--civicinfra-border);
}

.table th {
	font-weight: 700;
	color: var(--civicinfra-muted);
	font-size: var(--civicinfra-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 2px solid var(--civicinfra-rule);
	white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
	background-color: var(--civicinfra-surface);
}

/* Civic data table — used in manage index */
.civicinfra-data-table {
	border: 1px solid var(--civicinfra-border);
	border-radius: var(--civicinfra-radius);
	overflow: hidden;
}

.civicinfra-data-table thead {
	background-color: var(--civicinfra-surface);
	position: sticky;
	top: 0;
	z-index: 1;
}

.civicinfra-data-table tbody tr {
	border-bottom: 1px solid var(--civicinfra-surface-muted);
	transition: background-color var(--civicinfra-transition);
}

.civicinfra-data-table tbody tr:last-child {
	border-bottom: none;
}

.civicinfra-data-table tbody tr:hover {
	background-color: var(--civicinfra-surface);
}

/* ============================================================
   CIVIC DIAGNOSTIC PRIMITIVES
   ============================================================ */

/* Diagnostic surface — primary record container */
.civicinfra-diagnostic-surface {
	background: var(--civicinfra-bg);
	border: 1px solid var(--civicinfra-border);
	border-left: 0.35rem solid var(--civicinfra-primary);
	padding: var(--civicinfra-space-4);
	border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
}

/* Record frame — secondary data container */
.civicinfra-record-frame {
	background: var(--civicinfra-surface);
	border: 1px solid var(--civicinfra-border);
	padding: 0.85rem var(--civicinfra-space-4);
	border-radius: var(--civicinfra-radius);
}

/* Section heading within records */
.civicinfra-record-heading {
	color: var(--civicinfra-primary);
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--civicinfra-surface-muted);
	padding-bottom: var(--civicinfra-space-2);
	margin-bottom: var(--civicinfra-space-3);
}

/* Monospace identifiers */
.civicinfra-record-id,
.civicinfra-cid {
	background: var(--civicinfra-mono-bg);
	border: 1px solid var(--civicinfra-border);
	color: var(--civicinfra-text);
	display: inline-block;
	font-size: 0.85em;
	padding: 0.12rem 0.35rem;
	word-break: break-all;
	border-radius: var(--civicinfra-radius-sm);
}

/* Affordance and scope tokens */
.civicinfra-affordance,
.civicinfra-scope-token {
	border: 1px solid var(--civicinfra-border);
	color: var(--civicinfra-text);
	display: inline-flex;
	align-items: center;
	font-family: var(--bs-font-monospace);
	font-size: var(--civicinfra-fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;
	padding: 0.18rem 0.42rem;
	text-transform: uppercase;
	border-radius: var(--civicinfra-radius-sm);
}

.civicinfra-affordance   { background: var(--civicinfra-surface); }
.civicinfra-scope-token  { background: var(--civicinfra-accent-muted); border-color: var(--civicinfra-accent); }

/* Form section */
.civicinfra-form-section {
	background: var(--civicinfra-bg);
	border: 1px solid var(--civicinfra-border);
	padding: var(--civicinfra-space-4);
	border-radius: var(--civicinfra-radius);
}

.civicinfra-form-section + .civicinfra-form-section {
	margin-top: var(--civicinfra-space-4);
}

/* Help and meta text */
.civicinfra-help-text,
.civicinfra-field-note,
.civicinfra-record-meta {
	color: var(--civicinfra-muted);
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-sm);
	line-height: 1.5;
}

/* Notice and warning callouts */
.civicinfra-notice {
	background: var(--civicinfra-surface);
	border: 1px solid var(--civicinfra-border);
	border-left: 0.35rem solid var(--civicinfra-accent);
	padding: 0.85rem var(--civicinfra-space-4);
	border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-sm);
}

.civicinfra-warning {
	border-left-color: var(--civicinfra-danger);
}

/* Diagnostic flags */
.civicinfra-flag {
	border-left: 0.25rem solid var(--civicinfra-accent);
	padding: var(--civicinfra-space-2) var(--civicinfra-space-3);
	margin-top: var(--civicinfra-space-2);
	font-size: var(--civicinfra-fs-sm);
	border-radius: 0 var(--civicinfra-radius) var(--civicinfra-radius) 0;
}

.civicinfra-flag-standard {
	background: color-mix(in srgb, var(--civicinfra-accent-muted) 30%, var(--civicinfra-bg));
	border-left-color: var(--civicinfra-accent);
}

.civicinfra-flag-high {
	background: color-mix(in srgb, var(--civicinfra-accent-muted) 50%, var(--civicinfra-bg));
	border-left-color: var(--civicinfra-accent);
}

.civicinfra-flag-critical {
	background: color-mix(in srgb, var(--civicinfra-danger) 10%, var(--civicinfra-bg));
	border-left-color: var(--civicinfra-danger);
	color: var(--civicinfra-danger);
}

/* Channel list */
.civicinfra-channel-list {
	border: 1px solid var(--civicinfra-border);
	border-radius: var(--civicinfra-radius);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.civicinfra-channel-list > li {
	border-bottom: 1px solid var(--civicinfra-border);
	padding: 0.65rem 0.8rem;
	transition: background-color var(--civicinfra-transition);
}

.civicinfra-channel-list > li:last-child { border-bottom: 0; }
.civicinfra-channel-list > li:hover { background-color: var(--civicinfra-surface); }

.civicinfra-channel-label {
	color: var(--civicinfra-primary);
	font-family: var(--bs-font-sans-serif);
	font-weight: 700;
}

/* ============================================================
   MANAGE INTERFACE PRIMITIVES
   ============================================================ */

.civicinfra-manage-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--civicinfra-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--civicinfra-space-6);
	padding-bottom: var(--civicinfra-space-4);
	border-bottom: 2px solid var(--civicinfra-rule);
}

.civicinfra-manage-title {
	font-size: var(--civicinfra-fs-xl);
	font-weight: 700;
	color: var(--civicinfra-primary);
	margin: 0;
}

.civicinfra-manage-actions {
	display: flex;
	gap: var(--civicinfra-space-2);
	flex-wrap: wrap;
	align-items: center;
}

.civicinfra-search-bar {
	display: flex;
	gap: var(--civicinfra-space-2);
	flex-wrap: wrap;
	align-items: flex-end;
	padding: var(--civicinfra-space-3) var(--civicinfra-space-4);
	background: var(--civicinfra-surface);
	border: 1px solid var(--civicinfra-border);
	border-radius: var(--civicinfra-radius);
	margin-bottom: var(--civicinfra-space-4);
}

.civicinfra-pagination {
	display: flex;
	gap: var(--civicinfra-space-1);
	align-items: center;
	justify-content: space-between;
	padding-top: var(--civicinfra-space-3);
	font-size: var(--civicinfra-fs-sm);
	color: var(--civicinfra-muted);
	border-top: 1px solid var(--civicinfra-surface-muted);
}

.civicinfra-diff-block {
	background: var(--civicinfra-mono-bg);
	border: 1px solid var(--civicinfra-border);
	border-radius: var(--civicinfra-radius);
	padding: var(--civicinfra-space-4);
	font-family: var(--bs-font-monospace);
	font-size: var(--civicinfra-fs-xs);
	line-height: 1.6;
	overflow-x: auto;
}

.civicinfra-diff-add    { color: #2d6b32; background: #e8f5e9; display: block; }
.civicinfra-diff-remove { color: #7a342c; background: #fdecea; display: block; text-decoration: line-through; }
.civicinfra-diff-same   { color: var(--civicinfra-muted); display: block; }

[data-bs-theme="dark"] .civicinfra-diff-add    { color: #81c784; background: #1b2e1d; }
[data-bs-theme="dark"] .civicinfra-diff-remove { color: #d09286; background: #2e1b1b; }

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-sm);
	color: var(--civicinfra-muted);
}

.breadcrumb-item.active { color: var(--civicinfra-muted); }

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--civicinfra-rule);
}

/* ============================================================
   BADGES AND STATUS
   ============================================================ */

.civicinfra-status {
	display: inline-flex;
	align-items: center;
	font-family: var(--bs-font-sans-serif);
	font-size: var(--civicinfra-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.5rem;
	border-radius: var(--civicinfra-radius-sm);
	text-transform: uppercase;
}

.civicinfra-status-active  { background: #d4edda; color: #2d6b32; border: 1px solid #b7dfbc; }
.civicinfra-status-unknown { background: var(--civicinfra-surface-muted); color: var(--civicinfra-muted); border: 1px solid var(--civicinfra-border); }
.civicinfra-status-alert   { background: #fdecea; color: var(--civicinfra-danger); border: 1px solid #f5c6c2; }

[data-bs-theme="dark"] .civicinfra-status-active  { background: #1b2e1d; color: #81c784; border-color: #2d4a30; }
[data-bs-theme="dark"] .civicinfra-status-unknown { background: var(--civicinfra-surface-muted); color: var(--civicinfra-muted); }
[data-bs-theme="dark"] .civicinfra-status-alert   { background: #2e1b1b; color: var(--civicinfra-danger); border-color: #4a2b28; }

/* ============================================================
   PRINT — diagnostic record output
   ============================================================ */

@media print {
	:root {
		--civicinfra-bg:      #ffffff;
		--civicinfra-surface: #f5f5f5;
		--civicinfra-text:    #000000;
		--civicinfra-muted:   #444444;
		--civicinfra-border:  #cccccc;
		--civicinfra-primary: #000000;
	}

	.navbar, #nav-bar, #region_1, #region_3,
	aside, .right-aside, .btn, .civicinfra-manage-actions,
	.civicinfra-search-bar, .civicinfra-pagination,
	nav[aria-label="breadcrumb"] {
		display: none !important;
	}

	body {
		font-size: 10pt;
		font-family: Georgia, "Times New Roman", serif;
		color: #000;
		background: #fff;
	}

	.civicinfra-diagnostic-surface,
	.civicinfra-record-frame,
	.civicinfra-form-section {
		border: 1px solid #ccc;
		padding: 0.5rem;
		break-inside: avoid;
	}

	.civicinfra-record-heading {
		font-size: 8pt;
		border-bottom: 1px solid #999;
	}

	.civicinfra-flag {
		border: 1px solid #ccc;
		border-left-width: 3px;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		color: #666;
	}

	h1, h2, h3 { page-break-after: avoid; }
	.assoc-profile-group { page-break-inside: avoid; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767.98px) {
	.civicinfra-diagnostic-surface,
	.civicinfra-record-frame,
	.civicinfra-form-section,
	.civicinfra-notice {
		padding: 0.8rem;
	}

	.civicinfra-record-id,
	.civicinfra-cid {
		max-width: 100%;
		word-break: break-all;
	}

	.civicinfra-manage-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.civicinfra-search-bar {
		flex-direction: column;
	}

	.civicinfra-data-table {
		font-size: var(--civicinfra-fs-xs);
	}

	.civicinfra-diff-block {
		font-size: 0.65rem;
	}
}