/* ============================================================
   Groveka Pulse — premium minimal monochrome UI
   Palette: #FFFFFF · #000000 · #B6B6B6 (monochrome base, ~85%)
   + functional status accents (internal tool): red = critical/
   overdue, amber = at risk/due, green = done/on track.
   Type: Albert Sans (display/UI) · Plus Jakarta Sans (body)
   ============================================================ */

:root {
	--white: #ffffff;
	--black: #000000;
	--grey: #b6b6b6;          /* brand neutral grey — borders, captions */
	--grey-soft: #e8e8e8;     /* hairlines */
	--grey-bg: #f7f7f7;       /* subtle surfaces */
	--grey-text: #6b6b6b;     /* secondary text */
	--red: #d92d20;           /* critical / overdue / delayed */
	--red-bg: #fbeae9;
	--red-text: #a32014;
	--amber: #b54708;         /* at risk / due today */
	--amber-bg: #fcf3e0;
	--green: #067647;         /* completed / on track */
	--green-bg: #e7f4ec;
	--radius: 14px;
	--radius-sm: 9px;
	--font-display: 'Albert Sans', -apple-system, 'Helvetica Neue', sans-serif;
	--font-body: 'Plus Jakarta Sans', -apple-system, 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0; padding: 0;
	background: var(--white);
	color: var(--black);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--black); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 26px; margin: 0 0 18px; }
h2 { font-size: 16px; margin: 0 0 14px; }
h3 { font-size: 14px; margin: 0 0 10px; }

a { color: var(--black); text-decoration: none; }
a:hover { opacity: .65; }

code { font-size: 12px; background: var(--grey-bg); padding: 1px 6px; border-radius: 5px; }
hr { border: none; border-top: 1px solid var(--grey-soft); margin: 16px 0; }

/* ---------------------------------------------------------- App layout */
.pulse-app { display: flex; min-height: 100vh; }

.pulse-sidebar {
	width: 236px; flex-shrink: 0;
	border-right: 1px solid var(--grey-soft);
	display: flex; flex-direction: column;
	padding: 28px 18px 20px;
	position: sticky; top: 0; height: 100vh;
	background: var(--white);
}
.pulse-brand { display: block; margin: 0 8px 34px; }
.pulse-brand:hover { opacity: 1; }
.pulse-wordmark {
	display: block; font-family: var(--font-display);
	font-size: 11px; font-weight: 700; letter-spacing: 0.34em;
	color: var(--grey);
}
.pulse-brand-name {
	display: block; font-family: var(--font-display);
	font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
	color: var(--black); margin-top: 2px;
}
.pulse-nav { display: flex; flex-direction: column; gap: 2px; }
.pulse-nav a {
	font-family: var(--font-display);
	padding: 9px 12px; border-radius: var(--radius-sm);
	font-size: 13.5px; font-weight: 500; color: var(--grey-text);
	transition: background .15s ease, color .15s ease;
}
.pulse-nav a:hover { background: var(--grey-bg); color: var(--black); opacity: 1; }
.pulse-nav a.active { background: var(--black); color: var(--white); font-weight: 600; }

.pulse-sidebar-foot { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--grey-soft); }
.pulse-user-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.pulse-user-role { font-size: 11px; color: var(--grey); letter-spacing: 0.04em; margin-top: 1px; }
.pulse-logout { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--grey-text); border-bottom: 1px solid var(--grey-soft); }

.pulse-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pulse-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 40px 0;
}
.pulse-topbar-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.pulse-content { padding: 18px 40px 60px; max-width: 1160px; width: 100%; }

@media (max-width: 900px) {
	.pulse-sidebar { position: fixed; z-index: 100; transform: translateX(-100%); transition: transform .2s ease; }
	.pulse-sidebar.open { transform: none; }
	.pulse-topbar, .pulse-content { padding-left: 20px; padding-right: 20px; }
}

/* ---------------------------------------------------------- Login page */
.pulse-login-body { background: var(--white); }
.pulse-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.pulse-login-card { width: 100%; max-width: 380px; text-align: center; }
.pulse-login-card h1 { font-size: 40px; font-weight: 700; margin: 6px 0 4px; letter-spacing: -0.03em; }
.pulse-login-sub { color: var(--grey-text); margin: 0 0 34px; font-size: 13px; }
.pulse-login-error {
	border: 1px solid var(--red); background: var(--red-bg); color: var(--red-text);
	border-radius: var(--radius-sm);
	padding: 10px 14px; font-size: 13px; margin-bottom: 18px; text-align: left;
}
.pulse-field { display: block; text-align: left; margin-bottom: 14px; }
.pulse-field span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-text); margin-bottom: 6px; font-family: var(--font-display); }
.pulse-field input {
	width: 100%; padding: 12px 14px; font-size: 14px; font-family: var(--font-body);
	border: 1px solid var(--grey); border-radius: var(--radius-sm); background: var(--white); color: var(--black);
}
.pulse-field input:focus { outline: none; border-color: var(--black); }
.pulse-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-text); margin: 4px 0 22px; text-align: left; }
.pulse-login-btn {
	width: 100%; padding: 13px; font-size: 14px; font-weight: 600; font-family: var(--font-display);
	background: var(--black); color: var(--white); border: 1px solid var(--black);
	border-radius: 999px; cursor: pointer; transition: opacity .15s ease;
}
.pulse-login-btn:hover { opacity: .8; }
.pulse-login-foot { margin-top: 40px; font-size: 11px; color: var(--grey); letter-spacing: 0.06em; }

/* -------------------------------------------------------------- Cards */
.pulse-card {
	background: var(--white); border: 1px solid var(--grey-soft);
	border-radius: var(--radius); padding: 22px; margin: 0 0 18px;
}
.pulse-card h2 { padding-bottom: 10px; border-bottom: 1px solid var(--grey-soft); }
.pulse-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 960px) { .pulse-grid-2 { grid-template-columns: 1fr; } }

.pulse-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pulse-title-row h1, .pulse-title-row h2, .pulse-title-row h3 { margin-right: auto; margin-bottom: 0; }

/* --------------------------------------------------------------- Stats */
.pulse-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 4px 0 20px; }
.pulse-stat { text-align: left; padding: 18px; margin: 0; }
.pulse-stat-value { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.pulse-stat-label { color: var(--grey-text); font-size: 11.5px; margin-top: 5px; font-weight: 500; letter-spacing: 0.03em; }
.pulse-stat-sub { color: var(--grey); font-size: 11px; margin-top: 2px; }
.pulse-stat-red .pulse-stat-value { color: var(--red); }
.pulse-stat-red { border-color: var(--red); }
.pulse-stat-orange .pulse-stat-value { color: var(--amber); }
.pulse-stat-orange { border-color: var(--amber); }
.pulse-stat-green .pulse-stat-value { color: var(--green); }

/* -------------------------------------------------------------- Badges */
.pulse-badge {
	display: inline-block; border-radius: 999px; padding: 2px 11px;
	font-size: 10.5px; font-weight: 600; line-height: 1.7;
	vertical-align: middle; letter-spacing: 0.04em;
	font-family: var(--font-display);
	border: 1px solid var(--grey); color: var(--grey-text); background: var(--white);
}
/* Critical / overdue / delayed — solid red */
.pulse-red { background: var(--red); border-color: var(--red); color: var(--white); }
/* At risk / due soon — amber tint */
.pulse-orange { background: var(--amber-bg); border-color: var(--amber-bg); color: var(--amber); }
/* Completed / on track — green tint */
.pulse-green { background: var(--green-bg); border-color: var(--green-bg); color: var(--green); }
/* Informational / active — neutral dark outline */
.pulse-blue { border-color: var(--black); color: var(--black); background: var(--white); }
/* Muted / closed */
.pulse-gray { border-color: var(--grey-soft); color: var(--grey); background: var(--white); }
/* Special (onboarding) */
.pulse-purple { background: var(--grey-bg); border-color: var(--grey-bg); color: var(--black); }

/* ------------------------------------------------------------ Progress */
.pulse-progress {
	display: inline-block; width: 120px; height: 5px; background: var(--grey-soft);
	border-radius: 999px; overflow: hidden; vertical-align: middle;
}
.pulse-progress-lg { display: block; width: 100%; height: 7px; margin-top: 8px; }
.pulse-progress-bar { height: 100%; background: var(--black); border-radius: 999px; }

/* -------------------------------------------------------------- Tables */
table.widefat {
	width: 100%; border-collapse: collapse; background: var(--white);
	border: none; font-size: 13.5px;
}
table.widefat thead th {
	text-align: left; font-family: var(--font-display);
	font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--grey); padding: 10px 12px; border-bottom: 1px solid var(--grey-soft);
}
table.widefat tbody td { padding: 12px; border-bottom: 1px solid var(--grey-bg); vertical-align: middle; }
table.widefat tbody tr:last-child td { border-bottom: none; }
table.widefat.striped tbody tr:nth-child(odd) { background: transparent; }
table.widefat tbody tr:hover { background: var(--grey-bg); }

/* --------------------------------------------------------------- Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], textarea, select {
	font-family: var(--font-body); font-size: 13.5px; color: var(--black);
	background: var(--white); border: 1px solid var(--grey);
	border-radius: var(--radius-sm); padding: 8px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--black); }
textarea { width: 100%; }
label { font-size: 13px; }

.form-table { width: 100%; }
.form-table th {
	text-align: left; vertical-align: top; padding: 12px 16px 12px 0; width: 160px;
	font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.form-table td { padding: 8px 0; }
.regular-text { width: 100%; max-width: 380px; }
.large-text { width: 100%; }
.description { color: var(--grey-text); font-size: 12px; }

/* ------------------------------------------------------------- Buttons */
.button, .button-primary, button.button, button.button-primary {
	display: inline-block; cursor: pointer;
	font-family: var(--font-display); font-size: 13px; font-weight: 600;
	padding: 8px 20px; border-radius: 999px; line-height: 1.5;
	transition: opacity .15s ease, background .15s ease;
	text-decoration: none;
}
.button {
	background: var(--white); color: var(--black); border: 1px solid var(--black);
}
.button:hover { background: var(--grey-bg); opacity: 1; }
.button-primary, button.button-primary {
	background: var(--black); color: var(--white); border: 1px solid var(--black);
}
.button-primary:hover { opacity: .8; }
.button-link {
	background: none; border: none; padding: 0; cursor: pointer;
	font-size: 12.5px; color: var(--grey-text); text-decoration: underline;
	font-family: var(--font-body);
}
.button-link:hover { color: var(--black); }
button.button-link[style*="color:#b32d2e"], .button-link[style*="color:#b32d2e"] { color: var(--black) !important; }

/* ------------------------------------------------------------- Notices */
.notice {
	border: 1px solid var(--black); border-radius: var(--radius-sm);
	background: var(--white); padding: 2px 14px; margin: 0 0 18px;
}
.notice p { margin: 8px 0; font-size: 13px; }
.notice-warning { border-color: var(--grey); border-style: dashed; }
.notice.inline { margin-top: 4px; }

/* -------------------------------------------------------- Filter links */
.subsubsub { list-style: none; margin: 4px 0 14px; padding: 0; font-size: 13px; color: var(--grey); float: none; }
.subsubsub li { display: inline; }
.subsubsub a { color: var(--grey-text); padding: 3px 2px; }
.subsubsub a.current { color: var(--black); font-weight: 700; border-bottom: 2px solid var(--black); }

/* ---------------------------------------------------------------- Tabs */
.nav-tab-wrapper { border-bottom: 1px solid var(--grey-soft); margin: 4px 0 0; padding: 0; }
.nav-tab {
	display: inline-block; padding: 9px 16px; margin: 0 4px -1px 0;
	font-family: var(--font-display); font-size: 13px; font-weight: 500;
	color: var(--grey-text); border: none; background: none;
	border-bottom: 2px solid transparent;
}
.nav-tab:hover { color: var(--black); opacity: 1; }
.nav-tab-active { color: var(--black); font-weight: 700; border-bottom-color: var(--black); }

/* ------------------------------------------------- Detail & timeline */
.pulse-detail-table { width: 100%; border-collapse: collapse; }
.pulse-detail-table th {
	text-align: left; color: var(--grey); font-weight: 600; padding: 7px 12px 7px 0;
	width: 140px; vertical-align: top; font-family: var(--font-display);
	font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.pulse-detail-table td { padding: 7px 0; }
.pulse-timeline-item { padding: 11px 0; border-bottom: 1px solid var(--grey-bg); }
.pulse-timeline-item:last-child { border-bottom: none; }
.pulse-instance-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--grey-bg); flex-wrap: wrap; }
.pulse-instance-row:last-child { border-bottom: none; }
.pulse-muted { color: var(--grey-text); font-size: 12.5px; }

/* Stage cards */
.pulse-stage-completed { border-left: 3px solid var(--green); }
.pulse-stage-in_progress { border-left: 3px solid var(--black); }
.pulse-stage-locked { opacity: .55; }

/* ----------------------------------------------------------------- Bell */
.pulse-bell-wrap { position: relative; }
.pulse-bell { background: none; border: 1px solid var(--grey-soft); border-radius: 999px; width: 38px; height: 38px; cursor: pointer; color: var(--black); position: relative; }
.pulse-bell:hover { border-color: var(--black); }
.pulse-bell .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 1; }
.pulse-bell-count {
	position: absolute; top: -5px; right: -5px; background: var(--red); color: var(--white);
	border-radius: 999px; font-size: 10px; min-width: 17px; height: 17px;
	line-height: 17px; text-align: center; padding: 0 3px; font-weight: 700;
}
.pulse-bell-dropdown {
	display: none; position: absolute; right: 0; top: 46px; width: 360px; max-height: 420px;
	overflow-y: auto; background: var(--white); color: var(--black); border: 1px solid var(--grey-soft);
	border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.10); z-index: 9999;
}
.pulse-bell-dropdown.open { display: block; }
.pulse-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--grey-soft); font-family: var(--font-display); }
.pulse-bell-item { padding: 10px 14px; border-bottom: 1px solid var(--grey-bg); font-size: 12.5px; }
.pulse-bell-item.unread { background: var(--grey-bg); }
.pulse-bell-time { display: block; color: var(--grey); font-size: 11px; margin-top: 2px; }
.pulse-bell-empty { padding: 18px; color: var(--grey); text-align: center; }

/* ------------------------------------------------------------- Misc */
details summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); font-size: 13px; }
details { margin-top: 10px; }
.pulse-form { margin-top: 10px; }
.pulse-form + .pulse-form { margin-top: 14px; }

/* Emphasis for problem counts (overdue, open issues) */
.pulse-strong { font-weight: 700; color: var(--red); }