/* hitadmin — base.css
   Tokens, reset, typography, form controls, buttons, flash.
   Loaded on every page, the login included. */

/* ==========================================================================
   hitadmin — admin.css  (draft)
   Warm-paper ground, ink chrome, one accent. Colour only ever means something.
   ========================================================================== */
:root {
	/* ground + ink */
	--paper:   #f7f6f3;
	--surface: #ffffff;
	--sunk:    #f2f0eb;
	--ink:     #1a1917;
	--ink-2:   #5f5c56;
	--ink-3:   #918d85;
	--line:    #e3e0d9;
	--hair:    #efece6;

	/* the one accent — sampled from the mascot's eyes; interactive things only */
	--accent:    #006699;
	--accent-hi: #00557f;
	--accent-lo: #e2eff5;

	/* status — reserved, never decoration */
	--good:    #2f6b45;  --good-lo:  #e6efe8;
	--bad:     #a33a2c;  --bad-lo:   #f7e9e6;
	--warn:    #8a6017;  --warn-lo:  #f6efe0;
	--block:   #5b4a8a;  --block-lo: #eeebf5;

	--r: 4px;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 13px/1.5 "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
	font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code, .mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
code { background: var(--sunk); padding: 1px 5px; border-radius: 3px; color: var(--ink-2); }

/* --- forms ---------------------------------------------------------------- */
label {
	display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .07em; color: var(--ink-3); margin-bottom: 4px;
}
input[type=text], input[type=password], input[type=date], select, textarea {
	width: 100%; height: 32px; padding: 0 9px;
	border: 1px solid #cfcbc2; border-radius: var(--r);
	background: var(--surface); color: var(--ink); font: inherit;
}
textarea { height: auto; min-height: 66px; padding: 7px 9px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-lo); border-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled {
	background: var(--sunk); color: var(--ink-2); cursor: not-allowed;
}

/* A value that sits in a form but is not a field. Dashed and sunk so it reads
   as "shown here, changed elsewhere" rather than as an input that ignores you. */
.field .locked {
	display: flex; align-items: center; gap: 7px;
	height: 32px; padding: 0 9px;
	border: 1px dashed #cbc6bc; border-radius: var(--r);
	background: var(--sunk); color: var(--ink-2);
	cursor: default;
}
.field .locked svg { width: 13px; height: 13px; color: var(--ink-3); flex: none; }
.field .locked .v { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink); }
.field .fhint { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); }
.field { min-width: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px 14px; }
.fields.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
/* Here and not in user.css: admin.css collapses these in its narrow media
   query, and user.css loads after admin.css so the override could never win. */
.field.span2 { grid-column: span 2; }
.field.span3 { grid-column: span 3; }
.check { display: flex; align-items: center; gap: 7px; align-self: end; height: 32px; }
.check input { width: 15px; height: 15px; margin: 0; }
.check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--ink); }
.actions {
	display: flex; align-items: center; gap: 10px;
	margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hair);
}
.actions .hint { color: var(--ink-3); font-size: 12px; }

/* --- buttons -------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; gap: 6px;
	height: 32px; padding: 0 14px;
	border: 1px solid var(--accent); border-radius: var(--r);
	background: var(--accent); color: #fff; font: inherit; font-weight: 500; cursor: pointer;
	white-space: nowrap;
}
.btn:hover { background: var(--accent-hi); text-decoration: none; }
.btn-plain { background: var(--surface); color: var(--ink); border-color: #cfcbc2; }
.btn-plain:hover { background: var(--sunk); }
.btn-danger { background: var(--surface); color: var(--bad); border-color: #dcc2bc; }
.btn-danger:hover { background: var(--bad-lo); }
.btn-warn { background: var(--surface); color: var(--warn); border-color: #dfceac; }
.btn-warn:hover { background: var(--warn-lo); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn-icon { height: 26px; width: 26px; padding: 0; justify-content: center; }

/* inline row-forms inside tables */
.rowform { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.rowform input[type=date] { width: 126px; height: 26px; font-size: 12px; }
.rowform input[type=text] { width: 78px; height: 26px; font-size: 12px; }
.rowform select { width: auto; height: 26px; font-size: 12px; padding: 0 6px; }

/* --- flash ---------------------------------------------------------------- */
.flash { padding: 9px 13px; border-radius: var(--r); margin-bottom: 14px; font-size: 13px; border: 1px solid; }
.flash.ok  { background: var(--good-lo); color: var(--good); border-color: #c5ddcc; }
.flash.err { background: var(--bad-lo);  color: var(--bad);  border-color: #e6c6c0; }

/* --- utilities ------------------------------------------------------------ */
.muted { color: var(--ink-3); }
.right { text-align: right; }
/* forms that must not break the line they sit on */
form.inline { display: inline; margin: 0; }
/* a disabled button has to look disabled — the bulk bar relies on this */
button:disabled, .btn:disabled {
	opacity: .45; cursor: not-allowed; filter: none;
}
button:disabled:hover, .btn:disabled:hover { background: var(--accent); }
.btn-plain:disabled:hover { background: var(--surface); }
.btn-danger:disabled:hover { background: var(--surface); }
/* visually hidden, still read out */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flash.warn { background: var(--warn-lo); color: var(--warn); border-color: #dfceac; }