/*--------------------------------------------------------------------------------------------------
--
--	css_outreach.css
--	Version: 1.0
--	Hagimo Outreach - Platform design system
--
--	Institutional, professional light theme: charcoal ink, restrained navy, paper surfaces.
--	Echoes the Hagimo one-pager print aesthetic. Used by every application screen; the
--	H_BUILDER admin console keeps its own dark theme (H_BUILDER/style.css).
--
--	Contact: Hagimo LLC - sean.harrison@hagimo.com - 615.838.9289
--
--------------------------------------------------------------------------------------------------*/

:root{
	--o-ink:		#16202b;
	--o-navy:		#1f3a5f;
	--o-navy-soft:	#2d4d78;
	--o-paper:		#f2f4f7;
	--o-card:		#ffffff;
	--o-rule:		#d5dbe2;
	--o-muted:		#5a646f;
	--o-accent:		#2e7d4f;
	--o-danger:		#a33a3a;
	--o-amber:		#9a6b1f;
	--o-radius:		6px;
	--o-shadow:		0 1px 4px rgba(22,32,43,.10);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
	font-family:'Segoe UI', system-ui, Arial, sans-serif;
	font-size:14px;
	color:var(--o-ink);
	background:var(--o-paper);
	line-height:1.45;
}
h1,h2,h3{ font-weight:600; }
a{ color:var(--o-navy); }

/*---------------------------------------------------------
	Landing / Login
---------------------------------------------------------*/
.o-landing{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	background:linear-gradient(160deg, #1a2c44 0%, var(--o-navy) 55%, #2d4d78 100%);
	color:#eef1f5;
}
.o-landing-header{
	display:flex; justify-content:space-between; align-items:baseline;
	padding:28px 48px 0;
}
.o-wordmark{
	font-family:Georgia,'Times New Roman',serif;
	font-size:20px; letter-spacing:.24em; font-weight:bold; color:#fff;
}
.o-wordmark span{ font-size:11px; letter-spacing:.18em; font-weight:normal; color:#b9c4d4; }
.o-landing-doctype{
	font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#b9c4d4; text-align:right;
}
.o-landing-main{
	flex:1;
	display:flex; align-items:center; justify-content:center; gap:64px;
	padding:40px 48px; flex-wrap:wrap;
}
.o-landing-pitch{ max-width:520px; }
.o-landing-pitch h1{
	font-family:Georgia,'Times New Roman',serif;
	font-size:34px; font-weight:normal; line-height:1.25; color:#fff;
	margin-bottom:16px;
}
.o-landing-pitch p{ color:#c9d2de; margin-bottom:12px; font-size:15px; }
.o-landing-points{ list-style:none; margin-top:20px; }
.o-landing-points li{
	padding:9px 0 9px 18px; border-left:2px solid #6c85a8;
	margin-bottom:10px; color:#dde4ec; font-size:14px;
}
.o-landing-points li b{ color:#fff; }
.o-login-card{
	width:360px; background:var(--o-card); color:var(--o-ink);
	border-radius:var(--o-radius); box-shadow:0 8px 30px rgba(0,0,0,.35);
	overflow:hidden;
}
.o-login-head{
	background:var(--o-ink); color:#fff; padding:18px 24px;
}
.o-login-head h2{ font-size:16px; font-weight:600; }
.o-login-head p{ font-size:12px; color:#b9c4d4; margin-top:2px; }
.o-login-body{ padding:24px; }
.o-login-error{
	background:#faeaea; color:var(--o-danger); border:1px solid #e4c4c4;
	border-radius:4px; padding:9px 12px; font-size:13px; margin-bottom:14px;
}
.o-login-body label{
	display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
	color:var(--o-muted); margin-bottom:5px;
}
.o-login-body input[type=text], .o-login-body input[type=password]{
	width:100%; padding:10px 12px; font-size:14px;
	border:1px solid var(--o-rule); border-radius:4px; margin-bottom:16px;
	background:#fbfcfd;
}
.o-login-body input:focus{ outline:2px solid var(--o-navy-soft); border-color:var(--o-navy); }
.o-btn-login{
	width:100%; padding:11px; font-size:14px; font-weight:600; letter-spacing:.04em;
	background:var(--o-navy); color:#fff; border:none; border-radius:4px; cursor:pointer;
}
.o-btn-login:hover{ background:var(--o-navy-soft); }
.o-login-notice{
	padding:14px 24px; border-top:1px solid var(--o-rule);
	font-size:11px; color:var(--o-muted); background:#f7f8fa;
}
.o-landing-footer{
	padding:16px 48px; font-size:11px; color:#93a1b5;
	border-top:1px solid rgba(255,255,255,.14);
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/*---------------------------------------------------------
	Frames shell
---------------------------------------------------------*/
body.o-shell-body{ margin:0; padding:0; background:var(--o-ink); height:100vh; overflow:hidden; }
.o-shell{ height:100vh; display:flex; }
.o-shell-sidebar{ width:248px; min-width:248px; height:100%; border:none; border-right:1px solid #0e141b; }
.o-shell-main{ flex:1; height:100%; border:none; background:var(--o-paper); }

/*---------------------------------------------------------
	Sidebar menu (fMenu.cfm)
---------------------------------------------------------*/
/*	The sidebar is a fixed-height scroll container: the menu grows past the
	viewport once a project is active and the user holds Management and
	Administration grants, so it has to scroll on its own. Scrollbar is themed
	to the dark menu - the default light bar reads as a rendering artifact. */
body.o-menu-body{
	background:var(--o-ink); color:#dbe2ea;
	height:100vh; overflow-y:auto; overflow-x:hidden;
	scrollbar-width:thin; scrollbar-color:#3a4a5e var(--o-ink);
}
body.o-menu-body::-webkit-scrollbar{ width:10px; }
body.o-menu-body::-webkit-scrollbar-track{ background:var(--o-ink); }
body.o-menu-body::-webkit-scrollbar-thumb{ background:#3a4a5e; border-radius:5px; border:2px solid var(--o-ink); }
body.o-menu-body::-webkit-scrollbar-thumb:hover{ background:#4c5f77; }
.o-menu-head{ padding:20px 18px 14px; border-bottom:1px solid #2a3644; }
.o-menu-head .o-menu-wordmark{
	font-family:Georgia,'Times New Roman',serif;
	font-size:15px; letter-spacing:.22em; font-weight:bold; color:#fff;
}
.o-menu-head .o-menu-sub{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8494a8; margin-top:2px; }
.o-menu-project{
	margin:14px 12px; padding:10px 12px;
	background:#212d3c; border:1px solid #334153; border-radius:var(--o-radius);
}
.o-menu-project .o-menu-project-label{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#8494a8; }
.o-menu-project .o-menu-project-name{ font-size:13px; color:#fff; font-weight:600; margin-top:2px; line-height:1.3; }
.o-menu-project a{ font-size:11px; color:#9db4d4; text-decoration:none; }
.o-menu-project a:hover{ color:#fff; }
.o-nav-section{ padding:10px 0 2px; }
.o-nav-section-title{
	font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#68788c;
	padding:6px 18px;
}
.o-nav-item{
	display:block; padding:8px 18px; color:#c8d2de; text-decoration:none; font-size:13px;
	border-left:3px solid transparent;
}
.o-nav-item:hover{ background:#212d3c; color:#fff; border-left-color:var(--o-navy-soft); }
.o-nav-item-logout{ color:#d4a3a3; }
.o-menu-user{
	margin-top:12px; padding:12px 18px; border-top:1px solid #2a3644;
	font-size:11px; color:#8494a8; line-height:1.5;
}

/*---------------------------------------------------------
	Content pages
---------------------------------------------------------*/
.o-page{ padding:26px 30px 60px; max-width:1280px; }
.o-page-header{ margin-bottom:18px; border-bottom:2px solid var(--o-ink); padding-bottom:10px; }
.o-page-header h1{ font-family:Georgia,'Times New Roman',serif; font-weight:normal; font-size:24px; }
.o-page-sub{ color:var(--o-muted); font-size:13px; margin-top:2px; }
.o-msg{
	border-radius:4px; padding:10px 14px; font-size:13px; margin-bottom:16px;
	background:#e8f2ec; border:1px solid #bcd8c7; color:#1e5136;
}
.o-msg-error{ background:#faeaea; border-color:#e4c4c4; color:var(--o-danger); }

.o-card{
	background:var(--o-card); border:1px solid var(--o-rule); border-radius:var(--o-radius);
	box-shadow:var(--o-shadow); margin-bottom:18px;
}
.o-card-header{
	padding:11px 16px; border-bottom:1px solid var(--o-rule);
	font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--o-navy); font-weight:600;
	display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.o-card-body{ padding:16px; }
.o-grid{ display:grid; gap:18px; }
.o-grid-2{ grid-template-columns:1fr 1fr; }
.o-grid-3{ grid-template-columns:1fr 1fr 1fr; }
.o-grid-sidebar{ grid-template-columns:340px 1fr; }
@media (max-width:980px){ .o-grid-2,.o-grid-3,.o-grid-sidebar{ grid-template-columns:1fr; } }

/* KPI tiles */
.o-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px; }
.o-kpi{
	background:var(--o-card); border:1px solid var(--o-rule); border-radius:var(--o-radius);
	border-top:3px solid var(--o-navy);
	padding:12px 14px;
}
.o-kpi .o-kpi-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--o-muted); }
.o-kpi .o-kpi-value{ font-size:24px; font-weight:600; margin-top:3px; color:var(--o-ink); }
.o-kpi .o-kpi-note{ font-size:11px; color:var(--o-muted); margin-top:2px; }

/* Pipeline bar */
.o-pipe{ display:flex; height:26px; border-radius:4px; overflow:hidden; border:1px solid var(--o-rule); }
.o-pipe div{ min-width:2px; }
.o-pipe-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:12px; color:var(--o-muted); }
.o-pipe-legend .swatch{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:baseline; }

/* Tables */
.o-table{ width:100%; border-collapse:collapse; }
.o-table th{
	text-align:left; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--o-muted);
	border-bottom:2px solid var(--o-ink); padding:7px 10px 6px 0; font-weight:600; white-space:nowrap;
}
.o-table td{ border-bottom:1px solid var(--o-rule); padding:8px 10px 8px 0; vertical-align:top; font-size:13px; }
.o-table tr:hover td{ background:#f7f9fb; }
.o-table .num{ text-align:right; }

/* Status badges - pipeline colors carried over from the tracker */
.o-badge{
	display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; white-space:nowrap;
}
.st-gray{ background:#e8eaee; color:#4a5560; }
.st-blue{ background:#dfeaf7; color:#1f4c7d; }
.st-indigo{ background:#e4e2f5; color:#3f3a86; }
.st-amber{ background:#f7ecd7; color:#8a5f14; }
.st-green{ background:#e0f0e6; color:#1e5c38; }
.st-teal{ background:#dcf0ef; color:#125f5c; }
.st-red{ background:#f7e0e0; color:#8c2f2f; }

/* Buttons */
.o-btn{
	display:inline-block; padding:7px 14px; font-size:13px; font-weight:600;
	border:1px solid var(--o-navy); border-radius:4px; cursor:pointer; text-decoration:none;
	background:var(--o-navy); color:#fff;
}
.o-btn:hover{ background:var(--o-navy-soft); }
.o-btn-outline{ background:transparent; color:var(--o-navy); }
.o-btn-outline:hover{ background:#eef2f7; }
.o-btn-danger{ background:var(--o-danger); border-color:var(--o-danger); }
.o-btn-danger:hover{ background:#8c2f2f; }
.o-btn-sm{ padding:4px 10px; font-size:12px; }

/* Forms */
.o-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 16px; }
.o-fld label{
	display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
	color:var(--o-muted); margin-bottom:4px;
}
.o-fld input[type=text], .o-fld input[type=date], .o-fld input[type=number],
.o-fld input[type=time], .o-fld input[type=datetime-local], .o-fld input[type=file],
.o-fld select, .o-fld textarea{
	width:100%; padding:7px 9px; font-size:13px; font-family:inherit;
	border:1px solid var(--o-rule); border-radius:4px; background:#fbfcfd;
}
.o-fld input:focus, .o-fld select:focus, .o-fld textarea:focus{ outline:2px solid var(--o-navy-soft); }
.o-form-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.o-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.o-filters .o-fld{ min-width:150px; }

/* Project picker cards (fMain) */
.o-projects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.o-project-card{
	background:var(--o-card); border:1px solid var(--o-rule); border-radius:var(--o-radius);
	border-top:4px solid var(--o-navy);
	box-shadow:var(--o-shadow); padding:18px; text-decoration:none; color:var(--o-ink);
	display:block;
}
.o-project-card:hover{ border-top-color:var(--o-accent); transform:translateY(-1px); }
.o-project-card .key{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--o-muted); }
.o-project-card h3{ font-family:Georgia,serif; font-weight:normal; font-size:18px; margin:6px 0 8px; line-height:1.3; }
.o-project-card .meta{ font-size:12px; color:var(--o-muted); }
.o-project-card .stats{ display:flex; gap:18px; margin-top:12px; }
.o-project-card .stats b{ font-size:18px; display:block; }
.o-project-card .stats span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--o-muted); }
/* Paused project: greyed out and inert - still hovers and clicks, but loads nothing. */
.o-project-card-paused{ opacity:.45; filter:grayscale(1); cursor:not-allowed; }
.o-project-card-paused:hover{ border-top-color:var(--o-navy); transform:translateY(-1px); }

/* Modal - AI result chooser. */
.o-modal-backdrop{
	position:fixed; top:0; left:0; right:0; bottom:0;
	background:rgba(15,25,40,.45); z-index:9000;
	display:flex; align-items:center; justify-content:center;
}
.o-modal{
	background:#fff; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.35);
	width:680px; max-width:92vw; max-height:80vh;
	display:flex; flex-direction:column;
}
.o-modal-head{
	display:flex; justify-content:space-between; align-items:center; gap:10px;
	padding:12px 16px; border-bottom:1px solid var(--o-rule); font-weight:600;
}
.o-modal-body{ padding:12px 16px; overflow-y:auto; }

/* Busy spinner - shown wherever the user waits (AI lookups, driving routes, uploads). */
.o-spin{
	display:inline-block; width:13px; height:13px;
	border:2px solid #c9d2dd; border-top-color:#1f3a5f; border-radius:50%;
	vertical-align:-2px; animation:ospin .8s linear infinite;
}
@keyframes ospin{ to{ transform:rotate(360deg); } }

/* Route planner */
.o-map{ height:520px; border:1px solid var(--o-rule); border-radius:var(--o-radius); }
.o-route-list{ font-size:13px; }
.o-route-list li{ margin:0 0 7px 18px; }
.o-route-pin{
	width:26px; height:26px; border-radius:50%;
	background:var(--o-navy); color:#fff;
	font:600 12px/26px 'Segoe UI', system-ui, sans-serif; text-align:center;
	border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* Busy indicator */
.o-spinner{
	display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-right:8px;
	border:2px solid var(--o-rule); border-top-color:var(--o-navy); border-radius:50%;
	animation:o-spin .8s linear infinite;
}
@keyframes o-spin{ to{ transform:rotate(360deg); } }
.o-busy{
	background:#eef2f7; border:1px solid #c6d2e2; color:var(--o-navy);
	border-radius:4px; padding:10px 14px; font-size:13px; margin-bottom:16px;
}

/* Processor debug iframe (frames-and-processors paradigm) */
.o-proc-frame{
	width:100%; height:300px; margin-top:16px;
	border:1px dashed var(--o-rule); background:#fff;
}
.o-proc-frame-hidden{ width:100%; height:1px; border:0; visibility:hidden; }

/* Utility */
.o-muted{ color:var(--o-muted); }
.o-right{ text-align:right; }
.o-mt{ margin-top:14px; }
.o-nowrap{ white-space:nowrap; }

/* Fulfillment - reference numbers and shipment lots (app_Fulfillment.cfm) */
.o-ref{
	font-family:Consolas, 'Courier New', monospace; font-weight:700;
	letter-spacing:.06em; background:#eef2f7; border:1px solid #c6d2e2;
	border-radius:3px; padding:1px 6px; white-space:nowrap;
}
.o-note{
	font-size:13px; color:var(--o-muted); line-height:1.6;
	margin:0 0 14px; max-width:80ch;
}
.o-h3{
	font-size:14px; font-weight:700; color:var(--o-navy);
	margin:20px 0 8px; padding-top:14px; border-top:1px solid var(--o-rule);
}
.o-actions{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }