/*
Theme Name: JobsFor ERP Dashboard
Theme URI: https://jobsfor.com.au
Description: The administrative dashboard theme for the JobsFor ERP WordPress application. This theme owns visual presentation, layout, navigation, and the login/dashboard UI only — all business logic, data access, and authorization live in the JobsFor ERP API Platform plugin, reached exclusively through the plugin's public erp_dashboard()/erp_user_can() functions. This theme is designed to be replaceable without breaking the ERP: a future replacement theme only needs to call those same two functions.
Author: JobsFor.com.au
Version: 1.1.14
Requires PHP: 8.2
Text Domain: erp-dashboard-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	--erp-color-sidebar-bg: #0f172a;
	--erp-color-sidebar-bg-hover: #1e293b;
	--erp-color-sidebar-text: #cbd5e1;
	--erp-color-sidebar-text-muted: #64748b;
	--erp-color-sidebar-text-active: #ffffff;
	--erp-color-workspace-bg: #f8fafc;
	--erp-color-card-bg: #ffffff;
	--erp-color-border: #e2e8f0;
	--erp-color-text: #0f172a;
	--erp-color-text-muted: #64748b;
	--erp-color-primary: #2370fa;
	--erp-color-primary-hover: #1d4ed8;
	--erp-color-success: #16a34a;
	--erp-color-success-bg: #dcfce7;
	--erp-color-warning: #d97706;
	--erp-color-warning-bg: #fef3c7;
	--erp-color-danger: #dc2626;
	--erp-color-danger-bg: #fee2e2;
	--erp-color-info-bg: #dbeafe;
	/* Chart-only tokens. Deliberately distinct hex values from the
	   badge tokens above (--erp-color-success/warning/danger) rather
	   than reused — those three, checked as an adjacent set, fail the
	   data-viz normal-vision-CVD floor (worst pair ΔE 14.4, below the
	   15 floor: full-color readers can struggle to tell red and orange
	   apart at a glance). These are the dataviz skill's own validated
	   status scale instead (good/warning/critical), confirmed distinct
	   (worst pair ΔE 27.6) via scripts/validate_palette.js. Every use
	   pairs the color with an icon + text label, never color alone —
	   required since --erp-chart-warning sits below 3:1 contrast on a
	   white card by design (see the skill's palette.md). */
	--erp-chart-line: #2a78d6;
	--erp-chart-good: #10ad63;
	--erp-chart-warning: #fab219;
	--erp-chart-limited: #8060e8;
	--erp-chart-critical: #e83854;
	--erp-chart-grid: #e1e0d9;
	--erp-chart-axis: #898781;
	/* Stat-card accent, Avg Response Time only — a neutral/informational
	   tint distinct from the good/warning/critical status colors above,
	   since response time isn't itself a status. */
	--erp-stat-info: #12a9ce;
	--erp-radius: 10px;
	--erp-radius-sm: 6px;
	--erp-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	--erp-sidebar-width: 260px;
	--erp-font: "Inter", sans-serif;
	/* --erp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */

}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--erp-font);
	color: var(--erp-color-text);
	background: var(--erp-color-workspace-bg);
	font-size: 15px;
	line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 600; line-height: 1.3; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; color: var(--erp-color-text-muted); }
a { color: var(--erp-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus states everywhere — never suppressed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--erp-color-primary);
	outline-offset: 2px;
}

.erp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.erp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--erp-color-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
	border-radius: 0 0 var(--erp-radius-sm) 0;
}
.erp-skip-link:focus { left: 0; }

/* ==========================================================================
   App shell — dark sidebar + light workspace
   ========================================================================== */

.erp-app {
	display: flex;
	min-height: 100vh;
}

.erp-sidebar {
	width: var(--erp-sidebar-width);
	flex-shrink: 0;
	background: var(--erp-color-sidebar-bg);
	color: var(--erp-color-sidebar-text);
	padding: 20px 0;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	transition: transform 0.2s ease;
	z-index: 999;
}

.erp-sidebar__brand {
	padding: 0 20px 16px;
	border-bottom: 1px solid var(--erp-color-sidebar-bg-hover);
	margin-bottom: 20px;
}

.erp-sidebar__brand-link {
	display: block;
	margin-bottom: 0 !important;
}

.erp-sidebar__brand-link:hover{text-decoration: unset;}

.erp-sidebar__brand-name {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--erp-color-sidebar-text-active);
	line-height: 1.2;
}

.erp-sidebar__brand-desc {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--erp-color-sidebar-text);
	margin-top: 2px;
}

.erp-nav-group { margin-bottom: 8px; }

.erp-nav-group__label {
	padding: 8px 20px 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--erp-color-sidebar-text-muted);
}

.erp-nav { list-style: none; margin: 0; padding: 0; }

.erp-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	color: var(--erp-color-sidebar-text);
	font-size: 14px;
	border-left: 3px solid transparent;
}

.erp-nav__link:hover,
.erp-nav__link:focus-visible {
	background: var(--erp-color-sidebar-bg-hover);
	color: var(--erp-color-sidebar-text-active);
	text-decoration: none;
	background: var(--erp-color-sidebar-bg-hover);
	color: var(--erp-color-sidebar-text-active);
	border-left-color: var(--erp-color-primary);
}

.erp-nav__link[aria-current="page"] {
	background: var(--erp-color-sidebar-bg-hover);
	color: var(--erp-color-sidebar-text-active);
	border-left-color: var(--erp-color-primary);
	font-weight: 600;
}

.erp-nav__children { list-style: none; margin: 0; padding: 0; }
.erp-nav__children .erp-nav__link { padding-left: 44px; font-size: 13px; }
.erp-nav__children[hidden] { display: none; }

/* Referrals-style collapsible parent row: the existing .erp-nav__link
   (unchanged, still a real navigable link to its own page) plus a
   separate toggle button for expand/collapse only -- so clicking the
   link still navigates exactly as before, and the arrow is its own
   independent, keyboard-reachable control. */
.erp-nav__item-row { display: flex; align-items: stretch; }
.erp-nav__item-row .erp-nav__link { flex: 1; min-width: 0; }

.erp-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	flex-shrink: 0;
	background: transparent;
	border: none;
	border-left: 3px solid transparent;
	color: var(--erp-color-sidebar-text);
	cursor: pointer;
}
.erp-nav__toggle:hover,
.erp-nav__toggle:focus-visible {
	background: var(--erp-color-sidebar-bg-hover);
	color: var(--erp-color-sidebar-text-active);
}

.erp-nav__chevron {
	display: inline-block;
	width: 10px;
	height: 10px;
	transition: transform 0.15s ease;
}
/* assets/images/arrow.png is drawn pointing right by default -- that
   is the collapsed state as-is, no rotation needed. Arrow rotates to
   point down when the submenu is expanded -- a clear, non-color-alone
   indicator of state. */
.erp-nav__toggle[aria-expanded="true"] .erp-nav__chevron { transform: rotate(90deg); }

.erp-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.erp-header {
	background: var(--erp-color-card-bg);
	border-bottom: 1px solid var(--erp-color-border);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 10;
}

.erp-header__menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--erp-color-border);
	border-radius: var(--erp-radius-sm);
	padding: 8px 10px;
	cursor: pointer;
}

.erp-header__user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.erp-header__user-menu { display: flex; align-items: center; gap: 14px; }

.erp-content { padding: 24px; flex: 1; }

/* ==========================================================================
   Dashboard home — welcome header
   ========================================================================== */

.erp-dashboard-welcome { margin-bottom: 24px; }
.erp-dashboard-welcome__title { margin: 0 0 4px; font-size: 22px; }
.erp-dashboard-welcome__subtitle { margin: 0; color: var(--erp-color-text-muted); font-size: 14px; }

.erp-dashboard-columns { grid-template-columns: 2fr 1fr; align-items: start; }

/* ==========================================================================
   Cards, grids, KPI tiles
   ========================================================================== */

.erp-card {
	background: var(--erp-color-card-bg);
	border: 1px solid var(--erp-color-border);
	border-radius: var(--erp-radius);
	box-shadow: var(--erp-shadow);
	padding: 20px;
	margin-bottom: 20px;
}

/* A grouping container for a related set of .erp-card/.erp-grid
   sections (e.g. the Settings screen's "Referral Settings" group and
   "PayPal Settings" group) -- a light, tinted background so the white
   .erp-card children inside it read as a distinct section, without
   nesting a second white-on-white card look. */
.erp-box-card {
	background: color-mix(in srgb, var(--erp-color-border) 35%, var(--erp-color-workspace-bg));
	border: 1px solid var(--erp-color-border);
	border-radius: var(--erp-radius);
	padding: 20px;
	margin-bottom: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 20px;
}
.erp-box-card > .erp-card,
.erp-box-card > .erp-grid {
	margin-bottom: 0;
	/* Without this, a grid item's automatic minimum width defaults to its
	   content's min-content size, which can exceed the 1fr track (e.g. a
	   long unbroken string like a webhook URL) and force the whole grid
	   -- and the page -- to overflow horizontally. */
	min-width: 0;
}

/* A fixed equal-width 2-column row (e.g. Manual Mark as Hired + Example
   Calculation, or Test Connection + Recent Changes) -- distinct from the
   default .erp-grid auto-fit, since these pairs must stay side-by-side at
   desktop width regardless of content length. Collapses with .erp-box-card
   below in the mobile breakpoint.

   Selector is the compound `.erp-grid.erp-grid--pair` (matching this
   class's only real usage, always alongside .erp-grid), not bare
   `.erp-grid--pair` -- both classes carry equal specificity on their
   own, so which one wins a shared property like grid-template-columns
   would otherwise depend on which rule happens to appear later in this
   file, a fragile ordering this project got bitten by once already (see
   git history: restoring .erp-grid's own emptied-out declarations
   silently flipped that ordering and broke this pairing). The compound
   selector's higher specificity makes the override unconditional. */
.erp-grid.erp-grid--pair {
	display: block !important;
}
.erp-grid--pair > .erp-card {
	min-width: 0;
}

.erp-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.erp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.erp-kpi { background: var(--erp-color-card-bg); border: 1px solid var(--erp-color-border); border-radius: var(--erp-radius); box-shadow: var(--erp-shadow); padding: 18px; }
.erp-kpi__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--erp-color-text-muted); margin-bottom: 6px; }
.erp-kpi__value { font-size: 28px; font-weight: 700; }

/* Stat cards — Usage Logs summary. A distinct, more decorative variant
   of .erp-kpi (accent top border, tinted icon circle, fill bar) —
   scoped to its own class rather than restyling .erp-kpi, which the
   dashboard home screen still uses plain. */
.erp-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.erp-stat-grid .erp-stat-card:first-child .erp-stat-card__value{color: var(--erp-color-primary);}
.erp-stat-grid .erp-stat-card:nth-child(2) .erp-stat-card__value{color: var(--erp-chart-good);}
.erp-stat-grid .erp-stat-card:nth-child(3) .erp-stat-card__value{color: var(--erp-chart-warning);}
.erp-stat-grid .erp-stat-card:nth-child(4) .erp-stat-card__value{color: var(--erp-stat-accent);}
.erp-stat-grid .erp-stat-card:nth-child(5) .erp-stat-card__value{color: var(--erp-stat-accent);}
.erp-stat-grid .erp-stat-card:last-child .erp-stat-card__value{color: var(--erp-stat-accent);}

.erp-stat-card {
	background: var(--erp-color-card-bg);
	border: 1px solid var(--erp-color-border);
	border-top: 3px solid var(--erp-stat-accent, var(--erp-color-primary));
	border-radius: var(--erp-radius);
	box-shadow: var(--erp-shadow);
	padding: 18px;
}

.erp-stat-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--erp-stat-accent, var(--erp-color-primary)) 15%, white);
	color: var(--erp-stat-accent, var(--erp-color-primary));
	margin-bottom: 14px;
}

.erp-stat-card__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--erp-color-text-muted);
	margin-bottom: 6px;
}

.erp-stat-card__value {
	font-size: 28px;
	font-weight: 700;
	color: var(--erp-color-text);
	margin-bottom: 14px;
}

.erp-stat-card__bar {
	height: 4px;
	border-radius: 2px;
	background: var(--erp-color-border);
	overflow: hidden;
}

.erp-stat-card__bar span {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var(--erp-stat-accent, var(--erp-color-primary));
}

/* Icon tiles — rounded-square, tinted-background icon badge, shared
   across the Dashboard home screen (KPI cards, System Health rows,
   Quick Actions rows) and the sidebar nav. Rounded-square (not a
   circle, unlike .erp-stat-card__icon) so this reads as a distinct,
   slightly firmer mark than the Usage Logs stat cards. */
.erp-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 12px;
	background: color-mix(in srgb, var(--erp-icon-accent, var(--erp-color-primary)) 15%, white);
	color: var(--erp-icon-accent, var(--erp-color-primary));
}

.erp-icon-tile--sm { width: 30px; height: 30px; border-radius: 9px; }
.erp-icon-tile--sm svg { width: 16px; height: 16px; }
.erp-icon-tile--md { width: 40px; height: 40px; }
.erp-icon-tile--md svg { width: 20px; height: 20px; }
.erp-icon-tile--lg { width: 48px; height: 48px; }
.erp-icon-tile--lg svg { width: 24px; height: 24px; }

/* KPI cards — icon tile, label, colored value. */
.erp-kpi { display: flex; flex-direction: column; gap: 10px; }
.erp-kpi__value { font-variant-numeric: tabular-nums; }

/* Sidebar nav icon, sitting beside the existing label. */
.erp-nav__icon { display: inline-flex; flex-shrink: 0; }
.erp-nav__icon svg, .erp-nav__icon img { width: 18px; height: 18px; display: block; }

/* Topbar page-heading icon — same supplied image set as the sidebar
   nav, but those PNGs are white-on-transparent (built for the dark
   sidebar). brightness(0) forces every visible pixel to black while
   leaving alpha untouched, so the same asset reads correctly here on
   the light topbar instead of disappearing against it. */
.erp-page-icon { display: inline-flex; flex-shrink: 0; }
.erp-page-icon img { width: 24px; height: 24px; display: block; filter: brightness(0); opacity: 0.82; }

/* System Health rows — icon tile + label on the left, status pill on the right. */
.erp-health-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--erp-color-border); }
.erp-health-row:last-child { border-bottom: none; }
.erp-health-row__left { display: flex; align-items: center; gap: 12px; }

/* Quick Actions rows — icon tile + label, chevron at the end, styled
   as a list row rather than a stack of secondary buttons. */
.erp-quick-action {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--erp-radius-sm);
	border: 1px solid var(--erp-color-border);
	color: var(--erp-color-text);
}
.erp-quick-action:hover { background: var(--erp-color-workspace-bg); text-decoration: none; }
.erp-quick-action__label { flex: 1; font-size: 14px; font-weight: 500; }
.erp-quick-action__chevron { color: var(--erp-color-text-muted); display: inline-flex; }
.erp-quick-action__chevron svg { width: 18px; height: 18px; }

/* Recent Activity rows — icon tile beside the event label. */
.erp-activity-row { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   Buttons, forms, tables, badges, alerts
   ========================================================================== */

.erp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--erp-radius-sm);
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	background: var(--erp-color-primary);
	color: #ffffff;
}
.erp-btn:hover { background: var(--erp-color-primary-hover); color: #fff; text-decoration: none; }
.erp-btn--secondary { background: var(--erp-color-card-bg); color: var(--erp-color-text); border-color: var(--erp-color-border); }
.erp-btn--secondary:hover { background: var(--erp-color-workspace-bg); color: var(--erp-color-text); }
.erp-btn--success { background: var(--erp-color-success); }
.erp-btn--success:hover { background: #15803d; color: #fff; }
.erp-btn--danger { background: var(--erp-color-danger); }
.erp-btn--danger:hover { background: #b91c1c; color: #fff; }
.erp-btn--full { width: 100%; justify-content: center; }

/* Pagination (fixed, overlapping 10-page groups) */
.erp-pagination { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erp-pagination__page { padding: 6px 12px; }
.erp-pagination__page[aria-current="page"] { font-weight: 700; }
.erp-pagination__ellipsis { padding: 6px 4px; color: var(--erp-color-text-muted); }
.erp-pagination__nav[aria-disabled="true"] { opacity: 0.4; pointer-events: none; cursor: default; }

.erp-field { margin-bottom: 16px; }
.erp-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* Help text can contain a long unbroken string (e.g. the PayPal webhook
   URL) -- let it wrap instead of forcing the field, card, or page wider. */
.erp-field p { overflow-wrap: anywhere; }
.erp-field input[type="text"],
.erp-field input[type="email"],
.erp-field input[type="password"],
.erp-field input[type="search"],
.erp-field select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--erp-color-border);
	border-radius: var(--erp-radius-sm);
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--erp-color-text);
}
.erp-field--checkbox { display: flex; align-items: center; gap: 8px; }
.erp-field--checkbox label { margin: 0; font-weight: 400; }

.erp-field input{height: 39px;border: 1px solid var(--erp-color-border);padding: 2px 8px;color: #333;border-radius: 5px;}
.erp-card button.erp-btn{padding: 10px 16px !important;}
.erp-card a.erp-btn{padding: 8px 16px !important;}

.erp-card .erp-field #erp-profile-picture{padding: 8px;}

.erp-card .erp-chart svg text:nth-child(7){display: none;}

.erp-table form select{padding: 8px;background: #f1f1f1;color: #333;border: 1px solid var(--erp-color-border);border-radius: 5px;}
.erp-table form input{padding: 8px;background: #f1f1f1;color: #333;border: 1px solid var(--erp-color-border);border-radius: 5px;}

.erp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.erp-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--erp-color-text-muted); padding: 10px 12px; border-bottom: 2px solid var(--erp-color-border); }
.erp-table td { padding: 12px 12px 11px; border-bottom: 2px solid var(--erp-color-border); }
.erp-table-wrap { overflow-x: auto; }

.erp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.erp-badge--success { background: var(--erp-color-success-bg); color: var(--erp-color-success); }
.erp-badge--warning { background: var(--erp-color-warning-bg); color: var(--erp-color-warning); }
.erp-badge--danger { background: var(--erp-color-danger-bg); color: var(--erp-color-danger); }
.erp-badge--neutral { background: var(--erp-color-workspace-bg); color: var(--erp-color-text-muted); }

/* UI Redesign stage — accessible inline tooltip flag ("(!)" indicators
   for a failure reason, a status needing manual attention, etc.).
   Works on mouse hover AND keyboard focus (never a bare `title`
   attribute, which most browsers never expose via keyboard at all) —
   see erp_dashboard_render_info_flag() in functions.php. The bubble is
   `aria-hidden`; the accessible name comes from the trigger's own
   `aria-label`, so screen readers announce the full text once, not
   twice. */
.erp-tooltip {
	position: relative;
	display: inline-flex;
	cursor: help;
	font-weight: 700;
	border-radius: 3px;
}
.erp-tooltip--warning { color: var(--erp-color-warning); }
.erp-tooltip--danger { color: var(--erp-color-danger); }
.erp-tooltip--neutral { color: var(--erp-color-text-muted); }
.erp-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--erp-color-text);
	color: #fff;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: var(--erp-radius-sm);
	white-space: normal;
	width: max-content;
	max-width: 260px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	z-index: 20;
	pointer-events: none;
}
.erp-tooltip:hover .erp-tooltip__bubble,
.erp-tooltip:focus .erp-tooltip__bubble,
.erp-tooltip:focus-visible .erp-tooltip__bubble {
	opacity: 1;
	visibility: visible;
}

/* UI Redesign stage — a shared "one consistent Actions area" wrapper:
   every direct-child button/link/dropdown-form gets the SAME width and
   left alignment, replacing several screens' previous ad hoc inline
   `style="padding:4px 8px;font-size:12px;"` per-button sizing. Used by
   Cash Settlements, Referral Programs, and anywhere else this stage
   consolidates row actions. Deliberately does not touch the
   pre-existing, unscoped `.erp-action-select`/`.erp-btn` defaults, so
   screens that intentionally keep a content-sized control are
   unaffected. */
.erp-row-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	min-width: 160px;
}
.erp-row-actions .erp-action-select-form,
.erp-row-actions form {
	display: block;
	width: 100%;
}
.erp-row-actions .erp-action-select,
.erp-row-actions .erp-btn {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* Ghost Companies screen — presentational polish only, no behavior
   change. Scoped to .erp-ghost-table so it never touches any other
   screen's table (Companies, API Keys, Usage Logs, etc.). */
.erp-ghost-table th,
.erp-ghost-table td { vertical-align: middle; white-space: normal; overflow-wrap: break-word; }
.erp-ghost-table th:first-child, .erp-ghost-table td:first-child { padding-left: 16px; }
.erp-ghost-table th:last-child, .erp-ghost-table td:last-child { padding-right: 16px; }
.erp-ghost-table .erp-badge, .erp-ghost-provider { white-space: nowrap; }
.erp-ghost-name { font-weight: 600; width: 240px;}
.erp-ghost-location { color: var(--erp-color-text-muted); max-width: 220px; }

.erp-source-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--erp-color-workspace-bg);
	color: var(--erp-color-text-muted);
	border: 1px solid var(--erp-color-border);
	white-space: nowrap;
}
.erp-source-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--erp-color-warning); flex-shrink: 0; }

.erp-ghost-website-link { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; }
.erp-ghost-website-link span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ghost Companies' per-row Actions dropdown: View / Approve / Delete,
   all one .erp-action-select-form (see dashboard.js). Company email
   entry lives on the profile ("View") page instead of inline here. */
.erp-ghost-action-form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 210px; }
.erp-ghost-action-form .erp-action-select { width: fit-content; }

/* .erp-card button.erp-btn / .erp-card a.erp-btn (above) already carry
   !important at a higher specificity than a bare .erp-btn--sm class
   would, so this needs the same .erp-card ancestor + element qualifier
   to actually win. */
.erp-card button.erp-btn.erp-btn--sm,
.erp-card a.erp-btn.erp-btn--sm { padding: 6px 12px !important; font-size: 13px; }

/* Status tabs — e.g. API Keys' Active/Suspended/Revoked/All split,
   distinct views rather than one dropdown treating every status as
   equally likely to be what you're looking for. */
.erp-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--erp-color-border);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.erp-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--erp-color-text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.erp-tabs__link:hover {
	color: var(--erp-color-text);
	text-decoration: none;
}

.erp-tabs__link.is-active {
	color: var(--erp-color-primary);
	border-bottom-color: var(--erp-color-primary);
}

.erp-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--erp-color-workspace-bg);
	color: var(--erp-color-text-muted);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.erp-tabs__link.is-active .erp-tabs__count {
	background: var(--erp-color-info-bg);
	color: var(--erp-color-primary);
}

.erp-alert { padding: 12px 16px; border-radius: var(--erp-radius-sm); margin-bottom: 16px; font-size: 14px; }
.erp-alert--error { background: var(--erp-color-danger-bg); color: var(--erp-color-danger); }
.erp-alert--success { background: var(--erp-color-success-bg); color: var(--erp-color-success); }
.erp-alert--info { background: var(--erp-color-info-bg); color: var(--erp-color-primary); }
.erp-alert--warning { background: var(--erp-color-warning-bg); color: var(--erp-color-warning); }

.erp-empty-state { text-align: center; padding: 48px 20px; color: var(--erp-color-text-muted); }

.erp-action-select-form { display: inline-block; }
.erp-action-select {
	padding: 6px 10px;
	border: 1px solid var(--erp-color-border);
	border-radius: var(--erp-radius-sm);
	font-size: 13px;
	font-family: inherit;
	background: #fff;
	color: var(--erp-color-text);
	cursor: pointer;
}

/* ==========================================================================
   Login portal
   ========================================================================== */

.erp-logo{width: 100%;height: 100%;}
.erp-logo img{width: 100%;height: 100%;}

.erp-login {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--erp-color-sidebar-bg);
	padding: 20px;
}

.erp-login__panel {
	background: var(--erp-color-card-bg);
	border-radius: var(--erp-radius);
	box-shadow: var(--erp-shadow);
	padding: 40px;
	width: 100%;
	max-width: 380px;
}

.erp-login__title { text-align: center; margin-bottom: 4px; }
.erp-login__subtitle { text-align: center; margin-bottom: 28px; font-size: 13px; }

#erp-login-form label{display: block;margin-bottom: 5px;}
#erp-login-form .login-username input{width: 100%;padding: 7px;border: 1px solid #c5c5c5;border-radius: 5px;font-family: var(--erp-font);}
#erp-login-form .login-password input{width: 100%;padding: 7px;border: 1px solid #c5c5c5;border-radius: 5px;font-family: var(--erp-font);}
#erp-login-form .login-submit input{width: 100%;padding: 10px 0;background: var(--erp-color-primary);color: #fff;border: none;border-radius: 10px;cursor: pointer;}
#erp-login-form .login-submit input:hover{background: var(--erp-color-primary-hover);}

/* ==========================================================================
   Charts (Usage Logs)
   ========================================================================== */

.erp-chart-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; margin-bottom: 20px; }
@media (max-width: 900px) { .erp-chart-grid { grid-template-columns: 1fr; } }

.erp-chart { position: relative; }
.erp-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.erp-chart__empty { color: var(--erp-color-text-muted); font-size: 13px; padding: 24px 0; text-align: center; }

/* Line chart */
.erp-chart__svg--line { height: 240px; }
.erp-chart__gridline, .erp-chart__axis-line { stroke: var(--erp-chart-grid); stroke-width: 1; }
.erp-chart__axis-line { stroke: var(--erp-chart-axis); }
.erp-chart__line { stroke: var(--erp-chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.erp-chart__hover-dot { fill: var(--erp-chart-line); stroke: var(--erp-color-card-bg); stroke-width: 2; pointer-events: none; }
.erp-chart__crosshair { stroke: var(--erp-chart-axis); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.erp-chart__tick-label { font-size: 10px; fill: var(--erp-color-text-muted); font-family: var(--erp-font); font-variant-numeric: tabular-nums; }
.erp-chart__tick-label--end { text-anchor: end; }
.erp-chart__axis-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; fill: var(--erp-color-text-muted); font-family: var(--erp-font); }

/* Doughnut chart */
.erp-chart--doughnut { display: flex; justify-content: center; }
.erp-chart__svg--doughnut { width: 176px; height: 176px; }
.erp-chart__doughnut-rotate { transform: rotate(-90deg); transform-origin: 50% 50%; }
.erp-chart__doughnut-seg { transition: opacity 0.15s ease; cursor: pointer; }
.erp-chart__doughnut-seg:hover, .erp-chart__doughnut-seg.is-active { opacity: 0.75; }
.erp-chart__doughnut-total { font-size: 26px; font-weight: 700; fill: var(--erp-color-text); font-family: var(--erp-font); }
.erp-chart__doughnut-total-label { font-size: 11px; fill: var(--erp-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--erp-font); }

/* Legend — icon + label + value, never color alone (see style.css token comment) */
.erp-chart-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.erp-chart-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.erp-chart-legend__swatch { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; color: #fff; flex-shrink: 0; }
.erp-chart-legend__label { flex: 1; color: var(--erp-color-text); }
.erp-chart-legend__value { color: var(--erp-color-text-muted); font-variant-numeric: tabular-nums; }

/* Shared tooltip */
.erp-chart__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -110%);
	background: var(--erp-color-text);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: var(--erp-radius-sm);
	pointer-events: none;
	white-space: nowrap;
	z-index: 5;
}
.erp-chart__tooltip strong { font-variant-numeric: tabular-nums; }

/* Table-view accessibility twin */
.erp-chart__table-toggle { margin-top: 12px; font-size: 12px; padding: 6px 12px; }
.erp-chart__table { margin-top: 12px; width: 100%; border-collapse: collapse; }
.erp-chart__table th, .erp-chart__table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--erp-color-border); font-size: 13px; }
.erp-chart__table th { color: var(--erp-color-text-muted); font-weight: 600; }

/* ==========================================================================
   Responsive: tablet (collapsible sidebar) and mobile (hamburger)
   ========================================================================== */

@media (max-width: 1024px) {
	.erp-sidebar {
		position: fixed;
		left: 0;
		z-index: 100;
		transform: translateX(-100%);
	}
	.erp-sidebar.is-open { transform: translateX(0); }
	.erp-header__menu-toggle { display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
	.erp-content { padding: 16px; }
	.erp-header { padding: 12px 16px; }
	.erp-login__panel { padding: 28px 20px; }
	.erp-header__user span.erp-header__user-name { display: none; }

	/* The Dashboard home's two-column (Referral Overview + Recent
	   Activity / System Health + Quick Actions) layout doesn't have
	   room for two columns below 640px -- collapse to one, same as
	   every other .erp-grid already does via auto-fit. */
	.erp-dashboard-columns { grid-template-columns: 1fr; }

	/* .erp-box-card and .erp-grid.erp-grid--pair are fixed 1fr 1fr, unlike
	   the default .erp-grid's auto-fit -- without this they cause
	   horizontal overflow on the Settings screen below 640px. Matches
	   .erp-grid.erp-grid--pair's own compound selector (see its rule's
	   docblock) so this override's specificity is never lower than the
	   desktop rule it must beat. */
	.erp-box-card,
	.erp-grid.erp-grid--pair { grid-template-columns: 1fr; }

	/* Visually reduce the pagination window -- Back, Next, the first
	   page, the current page, and the final page always stay visible
	   (each carries .erp-pagination__essential); everything else in
	   the group, plus ellipses, is hidden rather than removed, so the
	   underlying markup/links are unchanged. */
	.erp-pagination__page:not(.erp-pagination__essential),
	.erp-pagination__ellipsis { display: none; }
}