/* Adcorp Computers - Staff Portal */
:root {
	--blue: #0f526c;
	--blue-dark: #0a3a4d;
	--orange: #f57f26;
	--orange-dark: #d9680f;
	--text: #3e3e3e;
	--muted: #6b6b6b;
	--line: #e2e6e9;
	--bg: #efefef;
	--card: #fff;
	--error-bg: #fdecea;
	--error: #a3261a;
	--ok-bg: #e7f4ec;
	--ok: #1d6b3a;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 'myriad_pro_regular', 'Segoe UI', Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: 'omnes_medium', 'Segoe UI', Arial, sans-serif; font-weight: normal; color: var(--blue); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 1.75em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1.1em; margin-top: 1.25em; color: var(--text); }
a { color: var(--blue); }
a:hover { color: var(--orange); }
code { background: #f3f5f6; padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }

.staff-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.staff-header { background: #fff; border-bottom: 1px solid #e5e5e5; padding: 0.75em 0; }
.staff-header .staff-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.staff-logo img { display: block; height: 44px; width: auto; max-width: 100%; }
.staff-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em 1.1em; font-family: 'omnes_medium', 'Segoe UI', Arial, sans-serif; text-transform: uppercase; font-size: 0.95em; }
.staff-nav a { text-decoration: none; }
.staff-who { text-transform: none; color: var(--muted); font-family: 'myriad_pro_regular', 'Segoe UI', Arial, sans-serif; }
.staff-who strong { color: var(--text); font-weight: normal; }

.staff-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 2em 16px; }
.card { background: var(--card); border-radius: 8px; padding: 1.75em; margin-bottom: 1.5em; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.card-narrow { max-width: 460px; margin-left: auto; margin-right: auto; }

label { display: block; margin: 1em 0 0.35em; font-weight: 600; font-size: 0.95em; }
input[type=text], input[type=password], select { width: 100%; padding: 0.7em 0.8em; font: inherit; color: var(--text); border: 1px solid #c9d1d6; border-radius: 6px; background: #fff; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.btn { display: inline-block; font-family: 'omnes_medium', 'Segoe UI', Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.95em; padding: 0.75em 1.3em; border-radius: 6px; border: 1.5px solid transparent; cursor: pointer; color: #fff; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.btn-block { width: 100%; margin-top: 1.5em; }
.btn-small { padding: 0.45em 0.8em; font-size: 0.8em; }
.btn-blue { background: var(--blue); border-color: var(--blue); }
.btn-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-orange { background: var(--orange); border-color: var(--orange); }
.btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--blue); border-color: #c9d1d6; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-danger { background: #fff; color: var(--error); border-color: #e3b5b0; }
.btn-danger:hover { background: var(--error); color: #fff; border-color: var(--error); }

.error { background: var(--error-bg); color: var(--error); padding: 0.7em 0.9em; border-radius: 6px; margin: 1em 0 0; }
.notice { background: var(--ok-bg); color: var(--ok); padding: 0.7em 0.9em; border-radius: 6px; margin: 1em 0 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
form.inline { display: inline-flex; align-items: center; gap: 0.35em; margin: 0.15em 0.25em 0.15em 0; }

.table-scroll { overflow-x: auto; margin-top: 1em; }
.staff-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.staff-table th, .staff-table td { text-align: left; padding: 0.7em 0.6em; border-bottom: 1px solid var(--line); vertical-align: top; }
.staff-table th { font-family: 'omnes_medium', 'Segoe UI', Arial, sans-serif; font-weight: normal; color: var(--muted); text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.03em; }
.staff-table .actions { min-width: 380px; }
.reset-form input { width: 11em; padding: 0.4em 0.6em; font-size: 0.85em; }
.confirm { display: inline-flex; align-items: center; gap: 0.25em; margin: 0; font-weight: normal; font-size: 0.8em; color: var(--muted); }
.tag { display: inline-block; font-size: 0.75em; padding: 0.15em 0.55em; border-radius: 999px; background: #eef1f3; color: var(--muted); }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-off { background: var(--error-bg); color: var(--error); }

.link-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8em; }
.link-grid a { display: block; padding: 1em; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; height: 100%; }
.link-grid a:hover { border-color: var(--orange); }
.link-grid span { display: block; color: var(--muted); font-size: 0.9em; margin-top: 0.2em; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { padding: 0.55em 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; }

.staff-footer { padding: 1.25em 0; color: var(--muted); font-size: 0.85em; text-align: center; }

@media (max-width: 600px) {
	.card { padding: 1.25em; }
	.staff-nav { font-size: 0.85em; }
}

/* Two-factor login */
.code-input { font-size: 1.4em; letter-spacing: 0.25em; text-align: center; font-family: Consolas, 'Courier New', monospace; }
.steps { padding-left: 1.2em; margin: 1em 0 0; }
.steps li { margin-bottom: 0.8em; }
.qr { width: 216px; min-height: 216px; margin: 0.8em 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.qr img, .qr canvas { display: block; }
.setup-key { display: inline-block; margin-top: 0.3em; font-size: 1.05em; letter-spacing: 0.05em; word-break: break-all; }
.backup-codes { list-style: none; padding: 0; margin: 1em 0 1.5em; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.backup-codes code { display: block; text-align: center; font-size: 1.1em; padding: 0.5em; }
.flash { max-width: 1100px; margin: 0 auto 1.5em; }

/* CRM */
.crm-subnav { display: flex; align-items: center; gap: 0.4em 1.2em; flex-wrap: wrap; margin: -0.5em 0 1.25em; font-family: 'omnes_medium', 'Segoe UI', Arial, sans-serif; text-transform: uppercase; font-size: 0.9em; }
.crm-subnav a { text-decoration: none; padding: 0.35em 0; border-bottom: 2px solid transparent; }
.crm-subnav a.active { border-bottom-color: var(--orange); }
.crm-subnav .btn { margin-left: auto; border-bottom: 0; padding: 0.45em 0.9em; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8em 1em; flex-wrap: wrap; margin-bottom: 0.6em; }
.card-head h1, .card-head h2 { margin: 0; }
.card-form { max-width: 820px; margin-left: auto; margin-right: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25em; }
.form-grid .field.wide { grid-column: 1 / -1; }
.crm-form textarea { width: 100%; padding: 0.7em 0.8em; font: inherit; color: var(--text); border: 1px solid #c9d1d6; border-radius: 6px; resize: vertical; }
.crm-form input[type=email], .crm-form input[type=tel], .crm-form input[type=date], .crm-form input[type=time], .crm-form input[type=number], .search-form input[type=search] { width: 100%; padding: 0.7em 0.8em; font: inherit; color: var(--text); border: 1px solid #c9d1d6; border-radius: 6px; background: #fff; }
.req { color: var(--error); }
.form-actions { display: flex; gap: 0.6em; margin-top: 1.5em; }
.delete-form { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.search-form { display: flex; gap: 0.4em; align-items: center; flex: 1 1 320px; max-width: 520px; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.35em 1.5em; margin: 0.5em 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.notes { margin-top: 1em; padding: 0.9em 1em; background: #f6f8f9; border-radius: 6px; }
.row-actions { white-space: nowrap; text-align: right; }
.nowrap { white-space: nowrap; }
.details-cell { min-width: 16em; max-width: 34em; }
.mono, .secret-shown { font-family: Consolas, 'Courier New', monospace; }
.secret-shown { background: #fff6d6; padding: 0.15em 0.4em; border-radius: 4px; user-select: all; }
.masked { letter-spacing: 0.1em; color: var(--muted); }
.tag-wait { background: #fff3e0; color: #9a5b00; }
.tag-progress { background: #e6f0f6; color: var(--blue); }
.filter-tabs { display: flex; gap: 0.3em; flex-wrap: wrap; }
.filter-tabs a { text-decoration: none; padding: 0.35em 0.8em; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9em; }
.filter-tabs a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (max-width: 700px) {
	.form-grid { grid-template-columns: 1fr; }
	.details { grid-template-columns: 1fr; }
	.details dt { margin-top: 0.4em; }
}
.login-cell { min-width: 9em; }