/**
 * xCloud Hosting — customer panel styling.
 * Scoped under .xcloud-hosting so it never leaks into the surrounding theme.
 * Design language mirrors app.xcloud.host: Inter UI, Geist Mono for data,
 * slate neutrals, a navy→blue brand and a signature cyan accent.
 */

.xcloud-hosting {
	--xc-bg: #f8f9fc;
	--xc-surface: #ffffff;
	--xc-surface-2: #f8fafc;
	--xc-border: #e2e8f0;
	--xc-border-2: #d7deea;
	--xc-ink: #1a202c;
	--xc-ink-2: #45526a;
	--xc-muted: #718096;
	--xc-navy: #002750;
	--xc-blue: #3b82f6;
	--xc-blue-dk: #1d58ab;
	--xc-cyan: #33ceff;
	--xc-violet: #7433ff;
	--xc-green: #10b981;
	--xc-green-bg: #e7f8f1;
	--xc-amber: #b8730a;
	--xc-amber-bg: #fdf1de;
	--xc-red: #d1443b;
	--xc-red-bg: #fdecec;
	--xc-radius: 16px;
	--xc-radius-sm: 10px;
	--xc-shadow: 0 1px 2px rgba(16, 29, 51, .04), 0 10px 24px -14px rgba(16, 29, 51, .16);
	--xc-shadow-sm: 0 1px 2px rgba(16, 29, 51, .05);
	--xc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--xc-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	font-family: var(--xc-font);
	color: var(--xc-ink);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	font-size: 15px;
}

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

/* ---- Header / breadcrumb ---------------------------------------------- */

.xc-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--xc-muted);
	text-decoration: none;
	margin-bottom: 18px;
}
.xc-back:hover { color: var(--xc-blue-dk); }

.xc-pagetitle {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 4px;
	color: var(--xc-navy);
}
.xc-pagelede { color: var(--xc-muted); font-size: .9375rem; margin: 0 0 22px; }

/* ---- Site hero (single view) ----------------------------------------- */

.xc-hero {
	position: relative;
	background: var(--xc-surface);
	border: 1px solid var(--xc-border);
	border-radius: var(--xc-radius);
	box-shadow: var(--xc-shadow);
	padding: 22px 24px;
	margin-bottom: 20px;
	overflow: hidden;
}
.xc-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--xc-cyan), var(--xc-blue) 55%, var(--xc-violet));
}
.xc-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.xc-hero__id { min-width: 0; }
.xc-hero__eyebrow {
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--xc-muted);
	margin: 0 0 4px;
}
.xc-hero__domain {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--xc-navy);
	word-break: break-word;
}
.xc-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 10px;
	font-size: .8125rem;
	color: var(--xc-muted);
}
.xc-hero__meta b { color: var(--xc-ink-2); font-weight: 600; }
.xc-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Status pill ------------------------------------------------------ */

.xc-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	white-space: nowrap;
}
.xc-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xc-pill--active { color: var(--xc-green); background: var(--xc-green-bg); border-color: #bcebd7; }
.xc-pill--provisioning,
.xc-pill--switching_domain { color: var(--xc-amber); background: var(--xc-amber-bg); border-color: #f6dcae; }
.xc-pill--failed,
.xc-pill--suspended { color: var(--xc-red); background: var(--xc-red-bg); border-color: #f4c9c6; }
.xc-pill--terminated { color: var(--xc-muted); background: #eef1f5; border-color: var(--xc-border); }
.xc-pill--provisioning .xc-pill__dot,
.xc-pill--switching_domain .xc-pill__dot { animation: xc-pulse 1.4s ease-in-out infinite; }

@keyframes xc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---- Buttons ---------------------------------------------------------- */

.xcloud-hosting form { margin: 0; }

.xc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: var(--xc-radius-sm);
	font-family: var(--xc-font);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	border: 1px solid var(--xc-border-2);
	background: var(--xc-surface);
	color: var(--xc-ink);
	text-decoration: none;
	transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
	white-space: nowrap;
}
.xc-btn:hover { background: var(--xc-surface-2); border-color: #c2ccdb; color: var(--xc-ink); }
.xc-btn:active { transform: translateY(1px); }
.xc-btn:focus-visible { outline: 2px solid var(--xc-blue); outline-offset: 2px; }
.xc-btn svg { width: 15px; height: 15px; flex: none; }

.xc-btn--primary {
	background: var(--xc-blue);
	border-color: var(--xc-blue);
	color: #fff;
	box-shadow: 0 1px 2px rgba(59, 130, 246, .35);
}
.xc-btn--primary:hover { background: var(--xc-blue-dk); border-color: var(--xc-blue-dk); color: #fff; }

.xc-btn--danger { color: var(--xc-red); border-color: #f0c4c1; background: #fff; }
.xc-btn--danger:hover { background: var(--xc-red-bg); border-color: #e9a9a4; color: var(--xc-red); }

.xc-btn--sm { padding: 7px 11px; font-size: .75rem; }
.xc-btn[disabled] { opacity: .5; cursor: not-allowed; }
.xc-btn--block { width: 100%; }

/* ---- Card grid -------------------------------------------------------- */

.xc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	align-items: start;
}
.xc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.xc-card {
	background: var(--xc-surface);
	border: 1px solid var(--xc-border);
	border-radius: var(--xc-radius);
	box-shadow: var(--xc-shadow-sm);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.xc-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.xc-card__icon {
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: #eef4ff;
	color: var(--xc-blue);
}
.xc-card__icon svg { width: 18px; height: 18px; }
.xc-card__icon--cyan { background: #e2f7ff; color: #0891b2; }
.xc-card__icon--violet { background: #f1eaff; color: var(--xc-violet); }
.xc-card__icon--green { background: var(--xc-green-bg); color: var(--xc-green); }
.xc-card__icon--slate { background: #eef1f6; color: var(--xc-ink-2); }
.xc-card__title { font-size: .9375rem; font-weight: 600; margin: 0; color: var(--xc-ink); }
.xc-card__body { color: var(--xc-ink-2); font-size: .875rem; }
.xc-card__body p { margin: 0 0 8px; }
.xc-card__body p:last-child { margin-bottom: 0; }
.xc-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.xc-card__hint { font-size: .75rem; color: var(--xc-muted); margin: 0; }

/* key / value rows */
.xc-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .8125rem; }
.xc-kv dt { color: var(--xc-muted); }
.xc-kv dd { margin: 0; color: var(--xc-ink); font-weight: 500; text-align: right; word-break: break-word; }

/* big metric */
.xc-metric { display: flex; align-items: baseline; gap: 8px; }
.xc-metric__num { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--xc-navy); line-height: 1; }
.xc-metric__label { font-size: .8125rem; color: var(--xc-muted); }

/* ---- Credential chips ------------------------------------------------- */

.xc-cred { display: flex; flex-direction: column; gap: 3px; }
.xc-cred + .xc-cred { margin-top: 10px; }
.xc-cred__label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--xc-muted); }
.xc-cred__row {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--xc-surface-2);
	border: 1px solid var(--xc-border);
	border-radius: 9px;
	padding: 6px 6px 6px 11px;
}
.xc-cred__val {
	font-family: var(--xc-mono);
	font-size: .8125rem;
	color: var(--xc-ink);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.xc-cred__val.is-masked { letter-spacing: .12em; }
.xc-iconbtn {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--xc-muted);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.xc-iconbtn:hover { background: #eaeef4; color: var(--xc-ink); }
.xc-iconbtn:focus-visible { outline: 2px solid var(--xc-blue); outline-offset: 1px; }
.xc-iconbtn svg { width: 15px; height: 15px; }
.xc-iconbtn.is-done { color: var(--xc-green); }

/* ---- Notices / states ------------------------------------------------- */

.xc-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid var(--xc-border);
	border-radius: var(--xc-radius);
	padding: 16px 18px;
	background: var(--xc-surface);
	box-shadow: var(--xc-shadow-sm);
	font-size: .9rem;
	color: var(--xc-ink-2);
}
.xc-note__ico { flex: none; margin-top: 1px; }
.xc-note__ico svg { width: 20px; height: 20px; }
.xc-note b { color: var(--xc-ink); }
.xc-note--info { border-left: 3px solid var(--xc-blue); }
.xc-note--info .xc-note__ico { color: var(--xc-blue); }
.xc-note--warn { border-left: 3px solid var(--xc-amber); background: var(--xc-amber-bg); }
.xc-note--warn .xc-note__ico { color: var(--xc-amber); }
.xc-note--error { border-left: 3px solid var(--xc-red); background: var(--xc-red-bg); }
.xc-note--error .xc-note__ico { color: var(--xc-red); }
.xc-note--success { border-left: 3px solid var(--xc-green); background: var(--xc-green-bg); }
.xc-note--success .xc-note__ico { color: var(--xc-green); }
.xc-note--block { margin-bottom: 20px; }

/* ---- Domain setup panel ---------------------------------------------- */

.xc-steps { margin: 4px 0 12px; padding: 0; list-style: none; counter-reset: xc; display: grid; gap: 8px; }
.xc-steps li { position: relative; padding-left: 30px; font-size: .8125rem; color: var(--xc-ink-2); }
.xc-steps li::before {
	counter-increment: xc;
	content: counter(xc);
	position: absolute; left: 0; top: -1px;
	width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #eef4ff; color: var(--xc-blue);
	font-size: .6875rem; font-weight: 700;
}
.xc-field { display: flex; gap: 8px; margin-top: 4px; }
.xc-input {
	flex: 1;
	min-width: 0;
	font-family: var(--xc-font);
	font-size: .875rem;
	padding: 9px 12px;
	border: 1px solid var(--xc-border-2);
	border-radius: var(--xc-radius-sm);
	background: #fff;
	color: var(--xc-ink);
}
.xc-input:focus { outline: none; border-color: var(--xc-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }
.xc-code { font-family: var(--xc-mono); font-size: .8125rem; background: #eef1f6; padding: 1px 6px; border-radius: 5px; color: var(--xc-navy); }

/* ---- List view -------------------------------------------------------- */

.xc-sites { display: grid; gap: 14px; }
.xc-site {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--xc-surface);
	border: 1px solid var(--xc-border);
	border-radius: var(--xc-radius);
	box-shadow: var(--xc-shadow-sm);
	padding: 16px 18px;
	transition: border-color .15s, box-shadow .15s;
}
.xc-site:hover { border-color: var(--xc-border-2); box-shadow: var(--xc-shadow); }
.xc-site__mark {
	width: 42px; height: 42px; flex: none;
	display: grid; place-items: center;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--xc-cyan), var(--xc-blue));
	color: #fff;
}
.xc-site__mark svg { width: 21px; height: 21px; }
.xc-site__main { min-width: 0; flex: 1; }
.xc-site__name { font-size: 1rem; font-weight: 600; color: var(--xc-navy); margin: 0; word-break: break-word; }
.xc-site__meta { font-size: .8125rem; color: var(--xc-muted); margin: 2px 0 0; }
.xc-site__right { display: flex; align-items: center; gap: 14px; flex: none; }

/* ---- Empty state ------------------------------------------------------ */

.xc-empty {
	text-align: center;
	background: var(--xc-surface);
	border: 1px dashed var(--xc-border-2);
	border-radius: var(--xc-radius);
	padding: 48px 24px;
}
.xc-empty__ico {
	width: 56px; height: 56px; margin: 0 auto 14px;
	display: grid; place-items: center;
	border-radius: 16px;
	background: #eef4ff; color: var(--xc-blue);
}
.xc-empty__ico svg { width: 28px; height: 28px; }
.xc-empty h3 { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 600; color: var(--xc-ink); }
.xc-empty p { margin: 0; color: var(--xc-muted); font-size: .9rem; }

/* ---- Utility ---------------------------------------------------------- */

.xc-muted { color: var(--xc-muted); }
.xc-hr { border: 0; border-top: 1px solid var(--xc-border); margin: 4px 0; }
.xc-details { border-top: 1px solid var(--xc-border); padding-top: 10px; margin-top: 2px; }
.xc-details summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--xc-blue-dk); list-style: none; }
.xc-details summary::-webkit-details-marker { display: none; }
.xc-details textarea {
	width: 100%; margin-top: 8px; font-family: var(--xc-mono); font-size: .75rem;
	border: 1px solid var(--xc-border-2); border-radius: 9px; padding: 8px; resize: vertical;
}

@media (max-width: 600px) {
	.xc-hero__actions { width: 100%; }
	.xc-hero__actions .xc-btn { flex: 1; }
	.xc-site { flex-wrap: wrap; }
	.xc-site__right { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.xcloud-hosting * { animation: none !important; transition: none !important; }
}