/* ============================================================
   Bonaventure Client Portal — Stylesheet
   Brand: Gold #dcb064 · Teal #2F4546 · Charcoal #26262D · Slate #31313B
   ============================================================ */

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

:root {
	--bvp-gold:       #dcb064;
	--bvp-gold-dark:  #c49a4e;
	--bvp-gold-light: #eedfa5;
	--bvp-teal:       #2F4546;
	--bvp-teal-dark:  #243536;
	--bvp-teal-light: #3d595a;
	--bvp-charcoal:   #26262D;
	--bvp-slate:      #31313B;
	--bvp-white:      #ffffff;
	--bvp-off-white:  #f5f6f7;
	--bvp-border:     #e2e4e7;
	--bvp-text:       #2c3338;
	--bvp-muted:      #646970;
	--bvp-ok:         #1e7e34;
	--bvp-ok-bg:      #d4edda;
	--bvp-ok-text:    #155724;
	--bvp-warn:       #856404;
	--bvp-warn-bg:    #fff3cd;
	--bvp-error:      #842029;
	--bvp-error-bg:   #f8d7da;
	--bvp-radius:     8px;
	--bvp-radius-sm:  5px;
	--bvp-shadow:     0 2px 8px rgba(0,0,0,.08);
	--bvp-shadow-lg:  0 8px 32px rgba(0,0,0,.16);
	--bvp-nav-width:  240px;
	--bvp-topbar-h:   60px;
}

html, body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: var(--bvp-text);
	background: var(--bvp-off-white);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--bvp-teal); text-decoration: none; }
a:hover { color: var(--bvp-teal-light); text-decoration: underline; }

/* ═══════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════ */

.bvp-login-page {
	min-height: 100vh;
	background: var(--bvp-charcoal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.bvp-login-card {
	background: var(--bvp-slate);
	border-radius: 12px;
	padding: 48px 44px 40px;
	width: 100%;
	max-width: 420px;
	box-shadow: var(--bvp-shadow-lg);
}

.bvp-login-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 32px;
}

.bvp-login-logo img {
	height: 44px;
	width: auto;
}

.bvp-login-heading {
	text-align: center;
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	color: var(--bvp-white);
	letter-spacing: -.3px;
}

.bvp-login-subheading {
	text-align: center;
	color: #8a9ba8;
	font-size: 14px;
	margin: 0 0 32px;
}

.bvp-login-error {
	background: rgba(220, 50, 50, .15);
	border: 1px solid rgba(220, 50, 50, .35);
	color: #ff8080;
	border-radius: var(--bvp-radius-sm);
	padding: 10px 14px;
	font-size: 14px;
	margin-bottom: 20px;
	text-align: center;
}

.bvp-form-group { margin-bottom: 18px; }

.bvp-form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #b0bec5;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.bvp-form-input {
	width: 100%;
	padding: 13px 14px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: var(--bvp-radius-sm);
	color: var(--bvp-white);
	font-size: 16px; /* 16px prevents iOS zoom on focus */
	font-family: inherit;
	transition: border-color .15s, background .15s;
	outline: none;
	-webkit-appearance: none;
}

.bvp-form-input::placeholder { color: rgba(255,255,255,.3); }
.bvp-form-input:focus {
	border-color: var(--bvp-gold);
	background: rgba(255,255,255,.1);
}

.bvp-btn-submit {
	width: 100%;
	padding: 15px;
	background: var(--bvp-gold);
	color: #ffffff;
	border: none;
	border-radius: var(--bvp-radius-sm);
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s;
	margin-top: 8px;
	letter-spacing: .2px;
	-webkit-appearance: none;
	touch-action: manipulation;
}

.bvp-btn-submit:hover { background: var(--bvp-gold-dark); }
.bvp-btn-submit:active { background: var(--bvp-gold-dark); transform: scale(.99); }

.bvp-login-footer {
	margin-top: 28px;
	text-align: center;
	font-size: 13px;
	color: #5a6a75;
}

.bvp-login-footer a { color: var(--bvp-gold); }
.bvp-login-footer a:hover { color: var(--bvp-gold-light); }

/* ═══════════════════════════════════════════════
   PORTAL LAYOUT (authenticated)
═══════════════════════════════════════════════ */

.bvp-layout {
	display: flex;
	min-height: 100vh;
}

/* ── Sidebar nav ─────────────────────────────── */

.bvp-sidebar {
	width: var(--bvp-nav-width);
	background: var(--bvp-teal);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 200;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bvp-sidebar-brand {
	padding: 24px 20px 20px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	flex-shrink: 0;
}

.bvp-sidebar-brand img {
	height: 36px;
	width: auto;
	display: block;
}

.bvp-sidebar-client {
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	flex-shrink: 0;
}

.bvp-sidebar-client-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--bvp-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bvp-sidebar-client-label {
	font-size: 11px;
	color: rgba(255,255,255,.5);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 3px;
}

.bvp-sidebar-nav {
	flex: 1;
	padding: 12px 0;
}

.bvp-nav-section-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: rgba(255,255,255,.35);
	padding: 12px 20px 4px;
}

.bvp-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	color: rgba(255,255,255,.75);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background .12s, color .12s;
	border-left: 3px solid transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bvp-nav-item:hover {
	background: rgba(255,255,255,.08);
	color: var(--bvp-white);
	text-decoration: none;
}

.bvp-nav-item.bvp-nav-active {
	background: rgba(220,176,100,.12);
	color: var(--bvp-gold);
	border-left-color: var(--bvp-gold);
	font-weight: 600;
}

.bvp-nav-item.bvp-nav-disabled {
	color: rgba(255,255,255,.3);
	cursor: default;
	pointer-events: none;
}

.bvp-nav-item svg,
.bvp-nav-item .bvp-nav-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: .8;
}

.bvp-nav-item.bvp-nav-active svg,
.bvp-nav-item.bvp-nav-active .bvp-nav-icon { opacity: 1; }

.bvp-nav-badge {
	margin-left: auto;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 10px;
	background: rgba(255,255,255,.15);
	color: rgba(255,255,255,.6);
}

.bvp-nav-badge-soon {
	background: rgba(220,176,100,.15);
	color: rgba(220,176,100,.6);
}

.bvp-sidebar-footer {
	padding: 16px 20px;
	border-top: 1px solid rgba(255,255,255,.08);
	flex-shrink: 0;
}

.bvp-sidebar-footer a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.45);
	font-size: 13px;
	transition: color .12s;
	padding: 8px 0;
}

.bvp-sidebar-footer a:hover {
	color: rgba(255,255,255,.75);
	text-decoration: none;
}

/* ── Sidebar overlay (mobile) ────────────────── */

.bvp-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 190;
	-webkit-tap-highlight-color: transparent;
}

.bvp-sidebar-overlay.bvp-overlay-visible { display: block; }

/* ── Main content area ───────────────────────── */

.bvp-main {
	margin-left: var(--bvp-nav-width);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bvp-topbar {
	background: var(--bvp-white);
	height: var(--bvp-topbar-h);
	border-bottom: 1px solid var(--bvp-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
	gap: 12px;
}

/* Hamburger button — hidden on desktop */
.bvp-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	border-radius: var(--bvp-radius-sm);
	cursor: pointer;
	color: var(--bvp-charcoal);
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
	padding: 0;
	margin-right: 4px;
}

.bvp-menu-toggle:hover { background: var(--bvp-off-white); }

.bvp-topbar-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--bvp-charcoal);
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bvp-topbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--bvp-muted);
	flex-shrink: 0;
}

.bvp-topbar-user {
	font-size: 13px;
	color: var(--bvp-muted);
}

.bvp-topbar-logout {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--bvp-muted);
	font-size: 14px;
	font-weight: 500;
	padding: 7px 12px;
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius-sm);
	transition: all .15s;
	white-space: nowrap;
}

.bvp-topbar-logout:hover {
	color: var(--bvp-charcoal);
	border-color: #aaa;
	text-decoration: none;
}

.bvp-content {
	flex: 1;
	padding: 28px 32px;
	max-width: 1200px;
	width: 100%;
}

/* ═══════════════════════════════════════════════
   DASHBOARD COMPONENTS
═══════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────── */

.bvp-page-header { margin-bottom: 24px; }

.bvp-page-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--bvp-charcoal);
	margin: 0 0 4px;
}

.bvp-page-subtitle {
	font-size: 14px;
	color: var(--bvp-muted);
	margin: 0;
}

/* ── Plan/rate card ──────────────────────────── */

.bvp-plan-banner {
	background: linear-gradient(135deg, var(--bvp-teal) 0%, var(--bvp-teal-dark) 100%);
	border-radius: var(--bvp-radius);
	padding: 22px 24px;
	color: var(--bvp-white);
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	box-shadow: var(--bvp-shadow);
}

.bvp-plan-info { flex: 1; min-width: 180px; }

.bvp-plan-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: rgba(255,255,255,.55);
	margin-bottom: 4px;
	font-weight: 600;
}

.bvp-plan-name {
	font-size: 20px;
	font-weight: 700;
	color: var(--bvp-gold);
	margin-bottom: 2px;
}

.bvp-plan-desc {
	font-size: 13px;
	color: rgba(255,255,255,.65);
}

.bvp-plan-rate-group {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}

.bvp-plan-stat { text-align: center; }

.bvp-plan-stat-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--bvp-white);
	line-height: 1.1;
}

.bvp-plan-stat-label {
	font-size: 11px;
	color: rgba(255,255,255,.5);
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-top: 2px;
}

/* ── Section heading ─────────────────────────── */

.bvp-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 8px;
}

.bvp-section-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--bvp-charcoal);
	margin: 0;
}

.bvp-section-divider {
	height: 1px;
	background: var(--bvp-border);
	margin: 28px 0 24px;
}

/* ── Site health cards ───────────────────────── */

.bvp-sites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.bvp-site-card {
	background: var(--bvp-white);
	border-radius: var(--bvp-radius);
	border: 1px solid var(--bvp-border);
	box-shadow: var(--bvp-shadow);
	overflow: hidden;
	transition: box-shadow .15s;
}

.bvp-site-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.bvp-site-card-header {
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--bvp-border);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.bvp-site-card-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--bvp-charcoal);
	margin: 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bvp-site-card-url { font-size: 12px; color: var(--bvp-muted); }

.bvp-site-status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 4px;
}

.bvp-dot-up    { background: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,.2); }
.bvp-dot-down  { background: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,.2); }
.bvp-dot-unk   { background: #bbb; }

.bvp-site-card-body {
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bvp-site-stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
}

.bvp-site-stat-label {
	color: var(--bvp-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.bvp-site-stat-label svg { width: 14px; height: 14px; opacity: .6; }

.bvp-site-stat-value { font-weight: 600; color: var(--bvp-text); }
.bvp-site-stat-value.bvp-ok    { color: #27ae60; }
.bvp-site-stat-value.bvp-warn  { color: #e67e22; }
.bvp-site-stat-value.bvp-error { color: #e74c3c; }
.bvp-site-stat-value.bvp-muted { color: var(--bvp-muted); font-weight: 400; }

.bvp-site-card-footer {
	padding: 10px 20px;
	background: var(--bvp-off-white);
	border-top: 1px solid var(--bvp-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bvp-site-plan-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 3px 9px;
	border-radius: 20px;
	background: var(--bvp-teal);
	color: var(--bvp-white);
}

.bvp-site-polled { font-size: 11px; color: var(--bvp-muted); }

/* ── Quick links grid ────────────────────────── */

.bvp-quicklinks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 28px;
}

.bvp-quicklink-card {
	background: var(--bvp-white);
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius);
	padding: 20px 16px;
	text-align: center;
	text-decoration: none;
	color: var(--bvp-text);
	transition: box-shadow .15s, border-color .15s, transform .1s;
	display: block;
	-webkit-tap-highlight-color: transparent;
}

.bvp-quicklink-card:hover {
	box-shadow: var(--bvp-shadow);
	border-color: var(--bvp-gold);
	color: var(--bvp-text);
	text-decoration: none;
	transform: translateY(-2px);
}

.bvp-quicklink-icon { font-size: 28px; margin-bottom: 8px; }

.bvp-quicklink-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--bvp-charcoal);
	display: block;
}

/* ── Empty state ─────────────────────────────── */

.bvp-empty-state {
	background: var(--bvp-white);
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius);
	padding: 48px 24px;
	text-align: center;
	color: var(--bvp-muted);
}

.bvp-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: .35; }

.bvp-empty-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--bvp-text);
	margin: 0 0 6px;
}

.bvp-empty-desc { font-size: 14px; margin: 0; }

/* ── Alert / notice ──────────────────────────── */

.bvp-alert {
	border-radius: var(--bvp-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	margin-bottom: 20px;
}

.bvp-alert-ok    { background: var(--bvp-ok-bg); color: var(--bvp-ok-text); border: 1px solid rgba(30,126,52,.25); }
.bvp-alert-warn  { background: var(--bvp-warn-bg); color: var(--bvp-warn); border: 1px solid rgba(133,100,4,.25); }
.bvp-alert-error { background: var(--bvp-error-bg); color: var(--bvp-error); border: 1px solid rgba(132,32,41,.25); }

/* ── Buttons ─────────────────────────────────── */

.bvp-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: var(--bvp-radius-sm);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	text-decoration: none;
	border: 1px solid transparent;
	-webkit-appearance: none;
	touch-action: manipulation;
	white-space: nowrap;
}

.bvp-btn-primary {
	background: var(--bvp-gold);
	color: var(--bvp-charcoal);
	border-color: var(--bvp-gold);
}

.bvp-btn-primary:hover {
	background: var(--bvp-gold-dark);
	border-color: var(--bvp-gold-dark);
	color: var(--bvp-charcoal);
	text-decoration: none;
}

.bvp-btn-secondary {
	background: var(--bvp-white);
	color: var(--bvp-text);
	border-color: var(--bvp-border);
}

.bvp-btn-secondary:hover {
	border-color: #aaa;
	color: var(--bvp-charcoal);
	text-decoration: none;
}

/* ── Status badges ───────────────────────────── */

.bvp-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2px;
	white-space: nowrap;
}

.bvp-badge-open     { background: #fff3e0; color: #e65100; }
.bvp-badge-pending  { background: #e3f2fd; color: #1565c0; }
.bvp-badge-resolved { background: #e8f5e9; color: #2e7d32; }
.bvp-badge-closed   { background: #f5f5f5; color: #757575; }
.bvp-badge-paid     { background: #e8f5e9; color: #2e7d32; }
.bvp-badge-sent     { background: #e3f2fd; color: #1565c0; }
.bvp-badge-overdue  { background: #ffebee; color: #c62828; }
.bvp-badge-draft    { background: #f5f5f5; color: #757575; }
.bvp-badge-partial  { background: #fff3e0; color: #e65100; }

/* ═══════════════════════════════════════════════
   RESPONSIVE TABLES
   Add data-label attrs in PHP for mobile card view
═══════════════════════════════════════════════ */

.bvp-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius);
}

.bvp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--bvp-white);
}

.bvp-table th {
	background: var(--bvp-off-white);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--bvp-muted);
	padding: 11px 16px;
	text-align: left;
	border-bottom: 1px solid var(--bvp-border);
	white-space: nowrap;
}

.bvp-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--bvp-border);
	vertical-align: middle;
}

.bvp-table tr:last-child td { border-bottom: none; }
.bvp-table tbody tr:hover { background: #fafafa; }

/* ── Invoice / billing specific ─────────────── */

.bvp-invoice-num { color: var(--bvp-gold); font-weight: 600; }
.bvp-invoice-num:hover { color: var(--bvp-gold-dark); }

/* ── Ticket list specific ────────────────────── */

.bvp-ticket-subject { font-weight: 600; color: var(--bvp-charcoal); }
.bvp-ticket-subject a { color: var(--bvp-charcoal); }
.bvp-ticket-subject a:hover { color: var(--bvp-teal); text-decoration: none; }

/* ── Outstanding balance card ────────────────── */

.bvp-balance-row {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.bvp-balance-card {
	background: var(--bvp-white);
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius);
	padding: 20px 24px;
	flex: 1;
	min-width: 200px;
}

.bvp-balance-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--bvp-muted);
	margin-bottom: 6px;
}

.bvp-balance-amount {
	font-size: 28px;
	font-weight: 700;
	color: var(--bvp-charcoal);
}

.bvp-balance-amount.bvp-balance-owed { color: #e65100; }
.bvp-balance-card-help { color: var(--bvp-muted); font-size: 13px; }

/* ── Invoice detail summary cards ────────────── */

.bvp-inv-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.bvp-inv-summary-card {
	background: var(--bvp-white);
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius);
	padding: 16px 18px;
}

.bvp-inv-summary-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--bvp-muted);
	margin-bottom: 6px;
}

.bvp-inv-summary-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--bvp-charcoal);
}

/* ── Comms list ──────────────────────────────── */

.bvp-comms-list { display: flex; flex-direction: column; gap: 12px; }

.bvp-comm-card {
	background: var(--bvp-white);
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius);
	padding: 18px 20px;
}

.bvp-comm-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.bvp-comm-subject {
	font-size: 15px;
	font-weight: 700;
	color: var(--bvp-charcoal);
	margin: 0;
}

.bvp-comm-meta {
	font-size: 12px;
	color: var(--bvp-muted);
	white-space: nowrap;
}

.bvp-comm-body {
	font-size: 14px;
	color: var(--bvp-text);
	line-height: 1.6;
}

/* ── Ticket form ─────────────────────────────── */

.bvp-ticket-form { max-width: 700px; }

.bvp-field-group { margin-bottom: 20px; }

.bvp-field-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--bvp-charcoal);
	margin-bottom: 6px;
}

.bvp-field-input,
.bvp-field-select,
.bvp-field-textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius-sm);
	font-size: 15px;
	font-family: inherit;
	color: var(--bvp-text);
	background: var(--bvp-white);
	transition: border-color .15s;
	outline: none;
	-webkit-appearance: none;
}

.bvp-field-input:focus,
.bvp-field-select:focus,
.bvp-field-textarea:focus { border-color: var(--bvp-gold); }

.bvp-field-textarea { resize: vertical; min-height: 120px; }

/* ── Ticket detail thread ────────────────────── */

.bvp-thread { display: flex; flex-direction: column; gap: 16px; }

.bvp-message {
	background: var(--bvp-white);
	border: 1px solid var(--bvp-border);
	border-radius: var(--bvp-radius);
	padding: 16px 20px;
}

.bvp-message-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.bvp-message-author {
	font-weight: 700;
	font-size: 14px;
	color: var(--bvp-charcoal);
}

.bvp-message-time {
	font-size: 12px;
	color: var(--bvp-muted);
}

.bvp-message-body {
	font-size: 14px;
	color: var(--bvp-text);
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}

.bvp-message-support { background: #f0f7ff; border-color: #b8d4f0; }

/* ── Breadcrumb ──────────────────────────────── */

.bvp-breadcrumb {
	font-size: 13px;
	color: var(--bvp-muted);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.bvp-breadcrumb a { color: var(--bvp-muted); }
.bvp-breadcrumb a:hover { color: var(--bvp-teal); text-decoration: none; }

/* ── Coming soon cards ───────────────────────── */

.bvp-coming-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.bvp-coming-card {
	background: var(--bvp-white);
	border: 1px dashed var(--bvp-border);
	border-radius: var(--bvp-radius);
	padding: 24px 20px;
	text-align: center;
	opacity: .7;
}

.bvp-coming-icon { font-size: 32px; margin-bottom: 10px; }
.bvp-coming-title { font-size: 14px; font-weight: 700; color: var(--bvp-text); margin: 0 0 4px; }
.bvp-coming-desc { font-size: 12px; color: var(--bvp-muted); margin: 0; }
.bvp-coming-badge {
	display: inline-block;
	margin-top: 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 3px 9px;
	border-radius: 20px;
	background: var(--bvp-warn-bg);
	color: var(--bvp-warn);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET (max 900px)
═══════════════════════════════════════════════ */

@media (max-width: 900px) {

	/* Sidebar slides off-screen; toggle controls it */
	.bvp-sidebar {
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: none;
	}

	.bvp-sidebar.bvp-sidebar-open {
		transform: translateX(0);
		box-shadow: 4px 0 32px rgba(0,0,0,.3);
	}

	.bvp-main { margin-left: 0; }

	/* Show hamburger button */
	.bvp-menu-toggle { display: flex; }

	/* Topbar adjustments */
	.bvp-topbar { padding: 0 16px; }
	.bvp-topbar-user { display: none; } /* Hide name — saves space */

	/* Content padding */
	.bvp-content { padding: 20px 16px; }

	/* Plan banner stacks */
	.bvp-plan-banner { flex-direction: column; padding: 18px 20px; }
	.bvp-plan-rate-group { justify-content: flex-start; }

	/* Sites grid single column */
	.bvp-sites-grid { grid-template-columns: 1fr; }

	/* Quick links: 2-up */
	.bvp-quicklinks-grid { grid-template-columns: repeat(2, 1fr); }

	/* Balance row stacks */
	.bvp-balance-row { flex-direction: column; }
	.bvp-balance-card { min-width: 0; }

	/* Invoice summary 2-up */
	.bvp-inv-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE (max 600px)
═══════════════════════════════════════════════ */

@media (max-width: 600px) {

	/* Login card tighter */
	.bvp-login-card { padding: 28px 20px 24px; }
	.bvp-login-heading { font-size: 19px; }

	/* Content */
	.bvp-content { padding: 16px 14px; }
	.bvp-page-title { font-size: 19px; }

	/* Plan stats in a row, smaller */
	.bvp-plan-stat-value { font-size: 20px; }

	/* Topbar logout text — icon only */
	.bvp-topbar-logout span.bvp-logout-label { display: none; }

	/* Tables: responsive card layout */
	.bvp-table thead { display: none; }

	.bvp-table tbody tr {
		display: block;
		border: 1px solid var(--bvp-border);
		border-radius: var(--bvp-radius);
		margin-bottom: 10px;
		background: var(--bvp-white);
		padding: 4px 0;
		box-shadow: var(--bvp-shadow);
	}

	.bvp-table-wrap {
		border: none;
		background: transparent;
		overflow-x: visible;
	}

	.bvp-table { background: transparent; }

	.bvp-table tbody tr:last-child { margin-bottom: 0; }

	.bvp-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		padding: 10px 16px;
		border-bottom: 1px solid #f0f0f0;
		font-size: 14px;
	}

	.bvp-table td:last-child { border-bottom: none; }

	.bvp-table td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .4px;
		color: var(--bvp-muted);
		flex-shrink: 0;
		min-width: 80px;
	}

	/* Cells with no label (actions, etc) */
	.bvp-table td[data-label=""] { justify-content: flex-end; }
	.bvp-table td[data-label=""]::before { display: none; }

	/* Invoice summary: 2-up on small */
	.bvp-inv-summary-grid { grid-template-columns: repeat(2, 1fr); }
	.bvp-inv-summary-value { font-size: 17px; }

	/* Quick links: 2-up stays fine */

	/* Page header: tighter */
	.bvp-page-header { margin-bottom: 16px; }
	.bvp-section-divider { margin: 20px 0 16px; }

	/* Ticket form full width */
	.bvp-ticket-form { max-width: 100%; }

	/* Comm card */
	.bvp-comm-card-header { flex-direction: column; gap: 4px; }
	.bvp-comm-meta { align-self: flex-start; }

	/* Breadcrumb */
	.bvp-breadcrumb { font-size: 12px; }
}

/* ── Profile page ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	.bvp-profile-grid { grid-template-columns: 1fr !important; }
}