/**
 * HM Components CSS
 * All component styles. Scoped under .hm-v2 to avoid leaking to legacy pages.
 */

/* === Reset within v2 === */
.hm-v2 *, .hm-v2 *::before, .hm-v2 *::after { box-sizing: border-box; }
.hm-v2 img { max-width: 100%; height: auto; display: block; }

/* === Container === */
.hm-v2 .hm-container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .hm-v2 .hm-container { padding: 0 24px; } }

/* === Top Bar === */
.hm-v2 .hm-top-bar {
	background: var(--hm-white);
	border-bottom: 1px solid var(--hm-border);
	padding: 14px 0;
	position: sticky;
	top: 0;
	z-index: var(--hm-z-topbar);
}
.hm-v2 .hm-top-bar-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* === Brand === */
.hm-v2 .hm-brand {
	display: flex; align-items: center; gap: 14px;
	text-decoration: none; color: var(--hm-forest-dark); font-weight: 800;
}
.hm-v2 .hm-brand-logo {
	width: 64px; height: 64px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.hm-v2 .hm-brand-logo img {
	width: 100%; height: 100%; object-fit: contain; display: block;
}
.hm-v2 .hm-brand-text {
	display: flex; flex-direction: column; gap: 2px; line-height: 1.2;
}
.hm-v2 .hm-brand-name {
	font-size: 17px; font-weight: 800; color: var(--hm-forest-dark);
	letter-spacing: -0.01em;
}
.hm-v2 .hm-brand-tagline {
	font-size: 12px; font-weight: 500; color: var(--hm-slate-soft);
}
@media (max-width: 640px) {
	.hm-v2 .hm-brand-text { display: none; }
	.hm-v2 .hm-brand-logo { width: 52px; height: 52px; }
}

/* === Hero Brand Block (centered logo + title) === */
.hm-v2 .hm-hero-brand-block {
	text-align: center;
	padding: 28px 0;
}
.hm-v2 .hm-hero-brand-logo {
	width: clamp(120px, 18vw, 160px);
	height: clamp(120px, 18vw, 160px);
	margin: 0 auto 18px;
	filter: drop-shadow(0 8px 20px rgba(45, 90, 61, 0.15));
}
.hm-v2 .hm-hero-brand-logo img {
	width: 100%; height: 100%; object-fit: contain;
}
.hm-v2 .hm-hero-brand-title {
	font-size: clamp(20px, 2.8vw, 26px);
	font-weight: 800; color: var(--hm-forest-dark);
	letter-spacing: -0.01em; margin-bottom: 6px;
}
.hm-v2 .hm-hero-brand-sub {
	font-size: 14px; color: var(--hm-slate-soft); margin-bottom: 22px;
}
.hm-v2 .hm-hero-divider {
	width: 60px; height: 2px;
	background: var(--hm-mint-dark);
	margin: 0 auto;
	border-radius: 2px;
}

/* === Buttons === */
.hm-v2 .hm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 11px 22px; border-radius: var(--hm-radius-md);
	font-family: inherit; font-weight: 700; font-size: 14px;
	cursor: pointer; text-decoration: none; min-height: 44px;
	border: none; transition: background var(--hm-transition-base);
}
.hm-v2 .hm-btn-primary { background: var(--hm-forest-dark); color: var(--hm-white); }
.hm-v2 .hm-btn-primary:hover { background: #112C19; }
.hm-v2 .hm-btn-action {
	background: var(--hm-action); color: var(--hm-white);
	box-shadow: var(--hm-shadow-action);
}
.hm-v2 .hm-btn-action:hover {
	background: var(--hm-action-dark); box-shadow: var(--hm-shadow-action-hover);
}
.hm-v2 .hm-btn-secondary {
	background: var(--hm-white); color: var(--hm-forest-dark);
	border: 1.5px solid var(--hm-forest-dark);
}
.hm-v2 .hm-btn-secondary:hover { background: var(--hm-forest-dark); color: var(--hm-white); }
.hm-v2 .hm-btn-ghost {
	background: transparent; color: var(--hm-slate);
	border: 1px solid var(--hm-border);
}
.hm-v2 .hm-btn-ghost:hover { background: var(--hm-sand-light); }
.hm-v2 .hm-btn-danger {
	background: var(--hm-white); color: var(--hm-terracotta);
	border: 1.5px solid var(--hm-terracotta);
}
.hm-v2 .hm-btn-danger:not(:disabled):hover { background: var(--hm-terracotta); color: var(--hm-white); }
.hm-v2 .hm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Status Chip === */
.hm-v2 .hm-status-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: var(--hm-radius-pill);
	font-size: 13px; font-weight: 600;
}
.hm-v2 .hm-status-chip-active {
	background: rgba(63, 156, 110, 0.12); color: var(--hm-green-dark);
	border: 1px solid rgba(63, 156, 110, 0.25);
}
.hm-v2 .hm-status-chip-pending {
	background: rgba(255, 152, 0, 0.12); color: #B5640A;
	border: 1px solid rgba(255, 152, 0, 0.25);
}
.hm-v2 .hm-status-chip-failed {
	background: rgba(196, 90, 78, 0.12); color: var(--hm-coral-dark);
	border: 1px solid rgba(196, 90, 78, 0.25);
}
.hm-v2 .hm-status-chip-inactive {
	background: var(--hm-paper); color: var(--hm-mist);
	border: 1px solid var(--hm-border);
}

/* === Role Badge (forum) === */
.hm-v2 .hm-role-badge {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 2px 8px; border-radius: var(--hm-radius-pill);
	font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em;
	border: 1px solid transparent;
}
.hm-v2 .hm-role-association { background: rgba(45,90,61,.12); color: var(--hm-forest-dark); border-color: rgba(45,90,61,.20); }
.hm-v2 .hm-role-lawyer { background: rgba(196,90,78,.10); color: var(--hm-coral-dark); border-color: rgba(196,90,78,.20); }
.hm-v2 .hm-role-accountant { background: rgba(44,95,143,.10); color: var(--hm-teal); border-color: rgba(44,95,143,.20); }
.hm-v2 .hm-role-manager { background: rgba(158,229,191,.30); color: var(--hm-forest-dark); border-color: var(--hm-mint-dark); }
.hm-v2 .hm-role-supplier { background: rgba(255,152,0,.15); color: #B5640A; border-color: rgba(255,152,0,.25); }
.hm-v2 .hm-role-expert { background: rgba(125,217,168,.25); color: var(--hm-forest-dark); border-color: var(--hm-green); }

/* === Cards (base) === */
.hm-v2 .hm-card {
	background: var(--hm-white);
	border: 1px solid var(--hm-border);
	border-radius: var(--hm-radius-xl);
	padding: 18px 20px;
	transition: all var(--hm-transition-base);
}
.hm-v2 .hm-card-hover:hover {
	border-color: var(--hm-border-strong);
	box-shadow: var(--hm-shadow-3);
	transform: translateY(-2px);
}

/* === Attention Card === */
.hm-v2 .hm-attention-card {
	display: flex; align-items: center; gap: 16px;
	background: var(--hm-white);
	border: 1px solid var(--hm-border);
	border-right: 4px solid var(--hm-coral);
	border-radius: var(--hm-radius-xl);
	padding: 18px 20px;
}
.hm-v2 .hm-attention-urgent { border-right-color: var(--hm-coral-dark); background: linear-gradient(90deg, rgba(232,156,126,0.05) 0%, var(--hm-white) 30%); }
.hm-v2 .hm-attention-info { border-right-color: var(--hm-teal); }
.hm-v2 .hm-attention-success { border-right-color: var(--hm-green); }
.hm-v2 .hm-attention-icon {
	width: 48px; height: 48px; border-radius: var(--hm-radius-lg);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; font-size: 22px;
	background: var(--hm-sand-light); color: var(--hm-forest-dark);
}
.hm-v2 .hm-attention-body { flex: 1; min-width: 0; }
.hm-v2 .hm-attention-title { font-weight: 700; color: var(--hm-forest-dark); margin-bottom: 4px; }
.hm-v2 .hm-attention-desc { font-size: 14px; color: var(--hm-slate-soft); }

/* === Intent Card (4-button row) === */
.hm-v2 .hm-intent-grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .hm-v2 .hm-intent-grid { grid-template-columns: repeat(4, 1fr); } }
.hm-v2 .hm-intent-card {
	background: var(--hm-white);
	border: 1px solid var(--hm-border);
	border-radius: var(--hm-radius-xl);
	padding: 20px 16px; text-align: center;
	text-decoration: none; color: inherit;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	min-height: 120px; justify-content: center;
	transition: all var(--hm-transition-base);
}
.hm-v2 .hm-intent-card:hover {
	border-color: var(--hm-forest);
	background: rgba(45, 90, 61, 0.03);
	transform: translateY(-2px);
	box-shadow: var(--hm-shadow-3);
}
.hm-v2 .hm-intent-icon {
	width: 48px; height: 48px; border-radius: var(--hm-radius-xl);
	background: var(--hm-sand);
	color: var(--hm-forest-dark);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
}
.hm-v2 .hm-intent-label { font-weight: 700; font-size: 15px; color: var(--hm-forest-dark); }
.hm-v2 .hm-intent-sub { font-size: 12px; color: var(--hm-mist); }

/* === Form === */
.hm-v2 .hm-form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .hm-v2 .hm-form-grid { grid-template-columns: 1fr 1fr; } }
.hm-v2 .hm-form-group { display: flex; flex-direction: column; gap: 6px; }
.hm-v2 .hm-form-group.hm-span-2 { grid-column: 1 / -1; }
.hm-v2 .hm-form-label {
	font-size: 13px; font-weight: 600; color: var(--hm-slate);
}
.hm-v2 .hm-form-input {
	padding: 12px 14px;
	border: 1px solid var(--hm-border-strong);
	border-radius: var(--hm-radius-md);
	font-family: inherit; font-size: 15px;
	background: var(--hm-white); color: var(--hm-slate);
	min-height: 44px;
	transition: border-color var(--hm-transition-base);
}
.hm-v2 .hm-form-input:focus {
	border-color: var(--hm-forest);
	outline: none;
	box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.15);
}
.hm-v2 .hm-form-help { font-size: 12px; color: var(--hm-mist); margin-top: 2px; }

/* === Notice Box === */
.hm-v2 .hm-notice {
	background: var(--hm-sand-light);
	border-right: 3px solid var(--hm-teal);
	padding: 12px 16px;
	border-radius: var(--hm-radius-md);
	font-size: 13px;
	color: var(--hm-slate-soft);
	line-height: 1.6;
	margin: 12px 0;
}
.hm-v2 .hm-notice-warning {
	background: rgba(232, 156, 126, 0.08);
	border-right-color: var(--hm-coral-dark);
	color: var(--hm-slate);
}
.hm-v2 .hm-notice-danger {
	background: rgba(196, 90, 78, 0.06);
	border-right-color: var(--hm-terracotta);
	color: var(--hm-slate);
}
.hm-v2 .hm-notice strong { color: var(--hm-forest-dark); }

/* === Breadcrumb === */
.hm-v2 .hm-breadcrumb { font-size: 13px; color: var(--hm-mist); padding: 14px 0; }
.hm-v2 .hm-breadcrumb a { color: var(--hm-slate-soft); text-decoration: none; }
.hm-v2 .hm-breadcrumb a:hover { color: var(--hm-forest-dark); }

/* === Section Headers === */
.hm-v2 .hm-section-eyebrow {
	font-size: 13px; font-weight: 700;
	color: var(--hm-action);
	text-transform: uppercase; letter-spacing: 0.1em;
	margin-bottom: 10px;
}
.hm-v2 .hm-section-title {
	font-size: var(--hm-font-2xl);
	font-weight: 800; color: var(--hm-forest-dark);
	line-height: 1.15; letter-spacing: -0.02em;
	margin-bottom: 14px;
}
.hm-v2 .hm-section-lead {
	font-size: 17px; color: var(--hm-slate-soft);
	max-width: 640px; margin-bottom: 36px; line-height: 1.55;
}

/* === Footer === */
.hm-v2 .hm-footer { background: var(--hm-white); border-top: 1px solid var(--hm-border); padding: 48px 0 24px; }
.hm-v2 .hm-footer-grid {
	display: grid; gap: 32px; margin-bottom: 36px;
}
@media (min-width: 768px) { .hm-v2 .hm-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.hm-v2 .hm-footer-col h4 { font-size: 14px; font-weight: 800; color: var(--hm-forest-dark); margin-bottom: 14px; }
.hm-v2 .hm-footer-col ul { list-style: none; padding: 0; margin: 0; }
.hm-v2 .hm-footer-col li { margin-bottom: 8px; }
.hm-v2 .hm-footer-col a { color: var(--hm-slate-soft); text-decoration: none; font-size: 14px; }
.hm-v2 .hm-footer-col a:hover { color: var(--hm-forest-dark); }
.hm-v2 .hm-footer-bottom {
	padding-top: 22px;
	border-top: 1px solid var(--hm-border);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	color: var(--hm-mist); font-size: 12px;
}