/* Shared styles for all foran.us web apps. */

/* The site's palette, named once.  Every sheet references these rather than re-typing a hex: the
	 four status tones were spelled out across seven files before this -- #999 forty-four times --
	 which is a theme with no definition and no way to shift it.

	 The four status names are MEANINGS, not colours.  Each app keeps its own words for its own
	 states (a review is `approved`, a machine is `severity-error`, a cron run is `blocked`) and maps
	 them onto these, so a reader learns one colour code for the whole site rather than one per page.
	 Green is the thing working, amber is something wanting a look, red is something broken, and grey
	 is a state that is over and is kept only for the record. */
:root {
	--status-good:   #228b22;
	--status-warn:   #b8860b;
	--status-bad:    #cc3333;
	--status-quiet:  #888;

	/* Text that is on the page for reference rather than to be read -- a timestamp, a count, an
		 empty-state line.  Distinct from --status-quiet, which says a state has finished. */
	--text-muted:    #999;

	/* Fixed-pitch: a path, a command, a revision.  One stack, so a column of them lines up. */
	--font-mono:     Menlo, Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background: #f5f5f5; color: #333; line-height: 1.5; overflow-x: hidden; }
nav { padding: 10px 20px; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; background: #2c3e50; }
nav a { color: #ecf0f1; text-decoration: none; font-size: 14px; }
nav a:hover { color: #fff; text-decoration: underline; }
nav a.active { color: #fff; font-weight: bold; text-decoration: underline; }
nav .brand { font-weight: bold; font-size: 16px; color: #95a5a6; }
nav .spacer { flex: 1; }
nav .nav-dropdown { position: relative; }
nav .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #34495e; border-radius: 0 0 4px 4px; padding: 4px 0; min-width: 120px; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
nav .nav-dropdown:hover .nav-dropdown-menu { display: flex; flex-direction: column; }
nav .nav-dropdown-menu a { padding: 6px 16px; font-size: 13px; white-space: nowrap; }
nav .nav-dropdown-menu a:hover { background: #4a6785; }
nav.subnav { background: #d6eaf8; padding: 6px 20px; gap: 8px 16px; }
nav.subnav a { color: #2c3e50; font-size: 13px; }
nav.subnav a:hover { color: #1a5276; }
nav.subnav a.active { color: #1a5276; font-weight: bold; text-decoration: underline; }
.container { max-width: 900px; margin: 30px auto; padding: 0 20px; }
.card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 24px; margin-bottom: 20px; overflow-x: auto; }
h1 { font-size: 22px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #eee; overflow-wrap: break-word; }
th { background: #f8f9fa; font-weight: 600; font-size: 13px; text-transform: uppercase; color: #666; }
tr:hover { background: #f8f9fa; }
.btn { display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: 14px; cursor: pointer; text-decoration: none; border: none; }
.btn-primary { background: #3498db; color: #fff; }
.btn-primary:hover { background: #2980b9; }
.btn-danger { background: #e74c3c; color: #fff; }
.btn-danger:hover { background: #c0392b; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; margin-bottom: 12px; }
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; color: #555; }
.error { background: #fce4e4; color: #c0392b; padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }
.actions { margin-top: 16px; }
table.detail-table th { width: 120px; vertical-align: top; }
tr.highlight { background: #fff9c4; }
tr.highlight:hover { background: #fff176; }
h2 { font-size: 16px; font-weight: 600; color: #24292f; margin-top: 24px; margin-bottom: 12px; padding: 10px 14px; border-top: 1px solid #d8dee4; background: #f0f6ff; border-radius: 4px; }
h2:first-of-type { margin-top: 24px; }
pre.log { white-space: pre-wrap; margin: 0; font-size: 12px; color: #333; }
.mono { font-family: var(--font-mono); }
/* Written in five sheets and two respectively before this, and the .muted copies had already
	 drifted into two different sizes. */
.muted { color: var(--text-muted); font-size: 12px; }
td.nowrap { white-space: nowrap; }
.text-right { text-align: right; }