/*
Theme Name: Outbound Mailsystem
Theme URI: https://clearworksystems.com/
Author: Clear Work Systems
Author URI: https://clearworksystems.com/
Description: In-house outbound sequencer and AI-first BDR workspace. Contacts, segments, templates, sequences and Google Workspace sending, driven by humans or agents through one REST API.
Version: 0.6.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: obm
*/

/*
 * Design tokens.
 *
 * Every colour in this file comes from a custom property, and dark mode is one
 * block of overrides at the bottom. A hardcoded hex in a component rule breaks
 * dark mode silently, so new colours are added to BOTH palettes as tokens.
 *
 * Visual brief (OBM-12): this must read as built by a small competent team, not
 * generated. That means one accent colour, one type family, real alignment,
 * generous whitespace. No gradient hero, no pastel card grid, no glassmorphism,
 * no purple-to-blue buttons.
 */

:root {
	--paper: #ffffff;
	--surface: #f7f7f5;
	--surface-raised: #ffffff;
	--ink: #1a1a1a;
	--ink-muted: #5c5c5c;
	--ink-faint: #8a8a8a;
	--line: #e3e2de;
	--line-strong: #cfceca;

	/* One accent, used sparingly. Deep green reads considered rather than
	   default-framework blue. */
	--accent: #1f6f54;
	--accent-hover: #185843;
	--accent-ink: #ffffff;
	--accent-wash: #eef4f1;

	--danger: #a52121;
	--danger-wash: #fbeeee;
	--warning: #8a6100;
	--warning-wash: #fdf4e3;
	--success: #1f6f54;

	--radius: 4px;
	--radius-lg: 6px;

	--gap-xs: 4px;
	--gap-sm: 8px;
	--gap: 16px;
	--gap-lg: 24px;
	--gap-xl: 40px;

	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		monospace;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

	--max-width: 1280px;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Visible focus everywhere. Removing outlines without a replacement makes the
   app unusable by keyboard, which is not a trade worth making for polish. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------------- */

.obm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--paper);
	color: var(--ink);
	padding: var(--gap-sm) var(--gap);
	z-index: 100;
}

.obm-skip:focus {
	left: var(--gap);
	top: var(--gap);
}

.obm-topbar {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
}

.obm-topbar-inner,
.obm-footer-inner,
.obm-main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--gap-lg);
}

.obm-topbar-inner {
	display: flex;
	align-items: center;
	gap: var(--gap-lg);
	min-height: 60px;
	flex-wrap: wrap;
}

.obm-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-decoration: none;
	color: var(--ink);
	flex-shrink: 0;
}

.obm-brand-name {
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.obm-brand-by {
	font-size: 0.62rem;
	color: var(--ink-muted);
	opacity: 0.75;
}

.obm-nav {
	display: flex;
	gap: var(--gap-xs);
	flex: 1 1 auto;
	flex-wrap: wrap;
}

.obm-nav a {
	color: var(--ink-muted);
	text-decoration: none;
	padding: var(--gap-sm) var(--gap-sm);
	border-radius: var(--radius);
	font-size: 0.92rem;
	white-space: nowrap;
	/* 44px minimum touch target: anything smaller is unreliable on a phone. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.obm-nav a:hover {
	background: var(--surface);
	color: var(--ink);
}

.obm-nav a.is-current {
	color: var(--ink);
	font-weight: 600;
	background: var(--accent-wash);
}

.obm-topbar-right {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	margin-left: auto;
}

.obm-sendstate {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
}

.obm-sendstate.is-live {
	background: var(--accent-wash);
	color: var(--accent);
	border-color: var(--accent);
}

.obm-sendstate.is-paused {
	background: var(--surface);
	color: var(--ink-muted);
	border-color: var(--line-strong);
}

.obm-main {
	padding-top: var(--gap-lg);
	padding-bottom: var(--gap-xl);
	min-height: 60vh;
}

.obm-footer {
	border-top: 1px solid var(--line);
	background: var(--paper);
	padding: var(--gap) 0;
}

.obm-footer-inner {
	display: flex;
	gap: var(--gap);
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--ink-muted);
}

.obm-warn {
	color: var(--warning);
	background: var(--warning-wash);
	border: 1px solid var(--warning);
	border-radius: var(--radius);
	padding: 2px 8px;
}

/* ---------------------------------------------------------------------------
   Page furniture
   --------------------------------------------------------------------------- */

.obm-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap);
	flex-wrap: wrap;
	margin-bottom: var(--gap-lg);
}

.obm-page-head h1 {
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
}

.obm-lede {
	margin: var(--gap-xs) 0 0;
	color: var(--ink-muted);
	max-width: 68ch;
}

.obm-muted {
	color: var(--ink-muted);
}

.obm-mono {
	font-family: var(--font-mono);
	font-size: 0.85em;
}

.obm-panel {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--gap-lg);
	margin-bottom: var(--gap-lg);
	box-shadow: var(--shadow-sm);
}

.obm-panel h2 {
	margin: 0 0 var(--gap);
	font-size: 1.05rem;
}

.obm-panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gap);
	flex-wrap: wrap;
	margin-bottom: var(--gap);
}

.obm-panel-head h2 {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Stat cards
   --------------------------------------------------------------------------- */

.obm-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--gap);
	margin-bottom: var(--gap-lg);
}

.obm-stat {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--gap);
}

.obm-stat-value {
	display: block;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.obm-stat-label {
	display: block;
	font-size: 0.78rem;
	color: var(--ink-muted);
	margin-top: var(--gap-xs);
}

.obm-stat-note {
	display: block;
	font-size: 0.72rem;
	color: var(--ink-faint);
	margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.obm-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--paper);
}

.obm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
	min-width: 640px;
}

.obm-table th,
.obm-table td {
	text-align: left;
	padding: 10px var(--gap);
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.obm-table th {
	background: var(--surface);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
	font-weight: 600;
	white-space: nowrap;
}

.obm-table tbody tr:last-child td {
	border-bottom: 0;
}

.obm-table tbody tr:hover td {
	background: var(--surface);
}

.obm-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Badges, buttons, forms
   --------------------------------------------------------------------------- */

.obm-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink-muted);
	white-space: nowrap;
}

.obm-badge.is-good {
	background: var(--accent-wash);
	color: var(--accent);
	border-color: var(--accent);
}

.obm-badge.is-wait {
	background: var(--warning-wash);
	color: var(--warning);
	border-color: var(--warning);
}

.obm-badge.is-bad {
	background: var(--danger-wash);
	color: var(--danger);
	border-color: var(--danger);
}

.obm-badge.is-muted,
.obm-badge.is-neutral {
	background: var(--surface);
	color: var(--ink-muted);
}

.obm-btn,
.obm-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-xs);
	min-height: 44px;
	padding: 0 var(--gap);
	border-radius: var(--radius);
	border: 1px solid var(--line-strong);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.obm-btn:hover,
.obm-theme-toggle:hover {
	background: var(--surface);
}

.obm-btn.is-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
}

.obm-btn.is-primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

.obm-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.obm-toolbar {
	display: flex;
	gap: var(--gap-sm);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--gap);
}

.obm-input,
.obm-select,
.obm-textarea {
	font: inherit;
	font-size: 0.9rem;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: 10px var(--gap-sm);
	min-height: 44px;
	max-width: 100%;
}

.obm-textarea {
	min-height: 140px;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	width: 100%;
	line-height: 1.5;
}

.obm-field {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
	margin-bottom: var(--gap);
}

.obm-field label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ink-muted);
}

.obm-hint {
	font-size: 0.78rem;
	color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   Alerts and empty states
   --------------------------------------------------------------------------- */

.obm-alerts {
	position: fixed;
	right: var(--gap);
	bottom: var(--gap);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	max-width: min(420px, calc(100vw - 2 * var(--gap)));
}

.obm-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--gap-sm);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-left-width: 3px;
	border-radius: var(--radius);
	padding: 10px var(--gap);
	box-shadow: var(--shadow);
	font-size: 0.88rem;
}

.obm-alert.is-error {
	border-left-color: var(--danger);
	color: var(--danger);
}

.obm-alert.is-success {
	border-left-color: var(--success);
}

.obm-alert.is-info {
	border-left-color: var(--accent);
}

.obm-alert-close {
	margin-left: auto;
	background: none;
	border: 0;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

.obm-empty {
	padding: var(--gap-xl) var(--gap);
	text-align: center;
	color: var(--ink-muted);
}

.obm-empty h3 {
	margin: 0 0 var(--gap-xs);
	font-size: 1rem;
	color: var(--ink);
}

.obm-notice {
	border: 1px solid var(--line-strong);
	border-left-width: 3px;
	border-left-color: var(--accent);
	background: var(--surface);
	border-radius: var(--radius);
	padding: var(--gap);
	margin-bottom: var(--gap-lg);
	font-size: 0.88rem;
}

.obm-notice.is-warning {
	border-left-color: var(--warning);
	background: var(--warning-wash);
	color: var(--warning);
}

.obm-notice h3 {
	margin: 0 0 var(--gap-xs);
	font-size: 0.92rem;
}

.obm-notice p:last-child {
	margin-bottom: 0;
}

.obm-example-body {
	white-space: pre-wrap;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	line-height: 1.55;
	margin: 0;
	color: var(--ink-muted);
	max-width: 70ch;
}

/* ---------------------------------------------------------------------------
   Application login
   --------------------------------------------------------------------------- */

.obm-login .obm-topbar,
.obm-login .obm-footer {
	display: none;
}

.obm-login .obm-main {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding-top: var(--gap-xl);
	padding-bottom: var(--gap-xl);
}

.obm-auth-wrap {
	width: min(100%, 430px);
}

.obm-auth-card {
	padding: var(--gap-xl);
	box-shadow: var(--shadow);
}

.obm-auth-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	margin-bottom: var(--gap-xl);
}

.obm-auth-card h1 {
	margin: 0;
	font-size: 1.45rem;
	letter-spacing: -0.02em;
}

.obm-auth-card .obm-input {
	width: 100%;
}

.obm-check {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	font-size: 0.85rem;
	color: var(--ink-muted);
	margin-bottom: var(--gap-lg);
}

.obm-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
}

.obm-auth-submit {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Narrow viewports
   --------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.obm-topbar-inner,
	.obm-footer-inner,
	.obm-main {
		padding-left: var(--gap);
		padding-right: var(--gap);
	}

	.obm-topbar-inner {
		gap: var(--gap-sm);
	}

	.obm-nav {
		order: 3;
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: var(--gap-xs);
	}

	.obm-stats {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
}

/* ---------------------------------------------------------------------------
   Dark mode. Token overrides only — no component rules below this point.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--paper: #16181a;
		--surface: #101214;
		--surface-raised: #1c1f22;
		--ink: #e8e8e6;
		--ink-muted: #a3a3a0;
		--ink-faint: #77776f;
		--line: #2a2e32;
		--line-strong: #3a3f45;

		--accent: #4cae8a;
		--accent-hover: #5fbf9b;
		--accent-ink: #0d1210;
		--accent-wash: #17241f;

		--danger: #e07070;
		--danger-wash: #2a1717;
		--warning: #d9a441;
		--warning-wash: #2a2113;
		--success: #4cae8a;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
		--shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
	}
}

html[data-theme="dark"] {
	--paper: #16181a;
	--surface: #101214;
	--surface-raised: #1c1f22;
	--ink: #e8e8e6;
	--ink-muted: #a3a3a0;
	--ink-faint: #77776f;
	--line: #2a2e32;
	--line-strong: #3a3f45;

	--accent: #4cae8a;
	--accent-hover: #5fbf9b;
	--accent-ink: #0d1210;
	--accent-wash: #17241f;

	--danger: #e07070;
	--danger-wash: #2a1717;
	--warning: #d9a441;
	--warning-wash: #2a2113;
	--success: #4cae8a;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}