/* Mi Suprohosting — portal shell, empty states, service states and the home showcase.
 * Loads after supro-front.css. Light surfaces with navy text; dark surfaces only with #e6eef6+ text. */

/* Home showcase */
.supro-mi-preview { display: grid; min-height: 555px; grid-template-columns: 82px minmax(0,1fr); overflow: hidden; border: 1px solid #cddbe7; border-radius: 25px; background: #fff; box-shadow: var(--supro-shadow); }
.supro-mi-preview > aside { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 25px 13px; background: var(--supro-navy); }
.supro-mi-preview > aside img { width: 37px; height: 37px; margin-bottom: 20px; object-fit: contain; }
.supro-mi-preview > aside > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 10px; color: #e6eef6; }
.supro-mi-preview > aside > span.is-active { background: var(--supro-blue); color: var(--supro-navy); }
.supro-mi-preview > aside svg { width: 26px; height: 26px; }
.supro-mi-preview__main { display: flex; flex-direction: column; min-width: 0; padding: 32px; background: #f7fafc; }
.supro-mi-preview__main > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.supro-mi-preview__main > header div { min-width: 0; line-height: 1.4; }
.supro-mi-preview__main > header small { display: block; margin-bottom: 5px; color: #0a7bad; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.supro-mi-preview__main > header strong { color: var(--supro-navy); font-family: Inter, sans-serif; font-size: 20px; line-height: 1.3; }
.supro-mi-preview__badge { padding: 7px 12px; border-radius: 20px; background: var(--supro-pale-blue); color: #0a6f9c; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.supro-mi-preview__cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.supro-mi-preview__cards article { display: grid; min-height: 136px; padding: 16px; border: 1px solid var(--supro-line); border-radius: 13px; background: #fff; min-width: 0; align-content: start; gap: 6px; }
.supro-mi-preview__cards svg { width: 30px; height: 30px; color: #086b94; }
.supro-mi-preview__cards small { color: var(--supro-muted); font-size: 14px; line-height: 1.5; }
.supro-mi-preview__cards b { color: var(--supro-navy); font-family: Inter, sans-serif; font-size: 26px; line-height: 1; }
.supro-mi-preview__states { margin-top: auto; padding: 18px 20px; border: 1px solid var(--supro-line); border-radius: 15px; background: #fff; }
.supro-mi-preview__states > small { display: block; margin-bottom: 12px; color: var(--supro-muted); font-size: 14px; font-weight: 700; }
.supro-mi-preview__states > div { display: flex; flex-wrap: wrap; gap: 8px; }
.supro-panel__action { flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.supro-panel__note { width: 100%; margin: 0; color: var(--supro-muted); font-size: 15px; line-height: 1.6; text-align: center; }

/* Service state badge: the colour and the label are set only from backend states. */
.supro-state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 20px; background: #e9edf1; color: #3f4b5d; font-size: 14px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.supro-state i { width: 9px; height: 9px; border-radius: 50%; background: #b0b8c1; flex-shrink: 0; }
.supro-state b { font-weight: 800; }
.supro-state--active { background: #e6f2d5; color: #35561a; }
.supro-state--active i { background: #4caf50; }
.supro-state--pending { background: #fff3c4; color: #5c4300; }
.supro-state--pending i { background: #f5c000; }
.supro-state--action_required { background: #ffe4cf; color: #7a3300; }
.supro-state--action_required i { background: #f5820a; }
.supro-state--suspended { background: #fde0e0; color: #8a1c1c; }
.supro-state--suspended i { background: #e53935; }
.supro-state--ended { background: #e9edf1; color: #4a5566; }
.supro-state--ended i { background: #b0b8c1; }

/* Portal shell */
/* Navy on brand blue measures 4.35:1; a slightly deeper navy reaches AA (>= 4.5:1) without changing the look. */
.supro-portal .supro-button:not(.supro-button--outline):not(.supro-button--dark):not(.supro-button--text),
.supro-panel .supro-button:not(.supro-button--outline):not(.supro-button--dark):not(.supro-button--text),
.supro-portal__side nav button.is-active { color: #1c2b4a; }
.supro-panel-bento .is-large span { color: #fff; }
.supro-portal__side nav button span { white-space: nowrap; }
.supro-portal__head { flex-wrap: wrap; gap: 14px; }
.supro-portal__head > div:first-child { flex: 1 1 320px; min-width: 0; }
.supro-portal__head p { margin: 8px 0 0; max-width: 620px; color: var(--supro-muted); font-size: 16px; line-height: 1.55; }
.supro-portal__session { flex-wrap: wrap; }
.supro-portal__user { color: var(--supro-navy); font-size: 15px; font-weight: 700; }
.supro-portal__status { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 13px 16px; border: 1px solid #bfe3f5; border-radius: 12px; background: var(--supro-pale-blue); color: #0f3c56; font-size: 15px; line-height: 1.5; }
.supro-portal__status:empty { display: none; }
[data-portal-state="error"] .supro-portal__status { border-color: #f3c2c2; background: #fdecec; color: #7a1f1f; }
[data-portal-state="suspended"] .supro-portal__status { border-color: #f6c9a6; background: #fff1e6; color: #7a3300; }
[data-portal-state="pending"] .supro-portal__status { border-color: #efd98a; background: #fff8dc; color: #5c4300; }
[data-portal-state="empty"] .supro-portal__status,
[data-portal-state="active"] .supro-portal__status { border-color: #cfe4b3; background: #f1f8e6; color: #35561a; }
.supro-portal__view { animation: supro-portal-view 220ms ease; }
.supro-portal__metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.supro-portal__metrics div { min-width: 0; }
.supro-portal__metrics strong { display: block; }
.supro-portal__metrics span[data-portal-note] { display: block; margin-top: 4px; color: var(--supro-muted); font-size: 13px; line-height: 1.4; }
.supro-portal__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.supro-portal__card { min-width: 0; padding: 20px; border: 1px solid var(--supro-line); border-radius: 14px; background: #fff; }
.supro-portal__card--support { background: var(--supro-navy); border-color: var(--supro-navy); }
.supro-portal__card--support h3 { color: #fff; }
.supro-portal__card--support .supro-portal__empty { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.supro-portal__card--support .supro-portal__empty p { color: #f0f5fa; }
.supro-portal__card--support .supro-button--dark { background: var(--supro-green); color: var(--supro-navy); box-shadow: none; }
.supro-portal__more { border: 0; background: transparent; color: #086b94; font-size: 14px; font-weight: 700; min-height: 44px; cursor: pointer; }
.supro-portal__count { color: var(--supro-muted); font-size: 14px; font-weight: 700; }
.supro-portal__empty { display: grid; justify-items: start; gap: 12px; padding: 20px; border: 1px dashed #c4d3e0; border-radius: 12px; background: #f8fbfd; }
.supro-portal__empty p { margin: 0; color: var(--supro-navy); font-size: 16px; font-weight: 600; line-height: 1.55; }
.supro-portal__empty small { display: block; color: var(--supro-muted); font-size: 14px; line-height: 1.5; }
.supro-portal__empty--wide { padding: 32px 26px; }
.supro-portal__list { display: grid; gap: 10px; }
.supro-portal__list:empty { display: none; }
.supro-portal__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--supro-line); border-radius: 11px; background: #fff; }
.supro-portal__row > div { min-width: 0; line-height: 1.4; }
.supro-portal__row strong { display: block; color: var(--supro-navy); font-size: 15px; overflow-wrap: anywhere; }
.supro-portal__row small { color: var(--supro-muted); font-size: 14px; }
.supro-portal__services { display: grid; gap: 14px; }
.supro-portal__services:empty { display: none; }
.supro-portal__security { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.supro-portal__security li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--supro-line); border-radius: 12px; background: #fff; }
.supro-portal__security svg { width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--supro-pale-blue); color: #086b94; flex-shrink: 0; }
.supro-portal__security strong { display: block; color: var(--supro-navy); font-size: 16px; line-height: 1.4; }
.supro-portal__security span { display: block; color: var(--supro-muted); font-size: 14px; line-height: 1.5; }

/* Service card: name, domain, plan, state, start date, renewal, amount, usage, access and support. */
.supro-service { padding: 18px 20px; border: 1px solid var(--supro-line); border-radius: 14px; background: #fff; }
.supro-service__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.supro-service__head > div { min-width: 0; }
.supro-service__head small { display: block; margin-bottom: 4px; color: #0a7bad; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.supro-service__head h4 { margin: 0 0 2px; color: var(--supro-navy); font-family: Inter, sans-serif; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.supro-service__domain { color: var(--supro-muted); font-size: 15px; overflow-wrap: anywhere; }
.supro-service__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 16px 0 0; }
.supro-service__facts > div { padding: 10px 12px; border-radius: 10px; background: #f6f9fc; }
.supro-service__facts dt { color: var(--supro-muted); font-size: 13px; }
.supro-service__facts dd { margin: 2px 0 0; color: var(--supro-navy); font-size: 15px; font-weight: 700; }
.supro-service__usage { display: grid; gap: 10px; margin-top: 16px; }
.supro-meter { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; color: var(--supro-muted); font-size: 14px; }
.supro-meter b { color: var(--supro-navy); }
.supro-meter em { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 6px; background: #e5edf4; }
.supro-meter em i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--supro-blue),var(--supro-blue-light)); }
.supro-service__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.supro-service__actions:empty { display: none; }

@keyframes supro-portal-view { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
	.supro-portal__metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 920px) {
	.supro-portal__grid { grid-template-columns: 1fr; }
	.supro-service__facts { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
	/* The side rail becomes a horizontal, scrollable menu so every section stays reachable on phones. */
	.supro-portal { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
	.supro-portal__side { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.supro-portal__side > img { display: none; }
	.supro-portal__side nav { display: flex; gap: 6px; }
	.supro-portal__side nav button { min-height: 42px; justify-content: flex-start; padding: 8px 12px; font-size: 14px; }
	.supro-portal__side nav svg { width: 22px; height: 22px; }
	.supro-portal__head { position: relative; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
	.supro-portal__head > div:first-child { flex: 0 0 auto; padding-right: 54px; }
	.supro-portal__head h2 { font-size: 23px; }
	.supro-portal__head p { font-size: 15px; }
	.supro-portal__session { justify-content: flex-start; gap: 8px; }
	.supro-portal__session .supro-button { padding-inline: 14px; }
	.supro-portal__session .supro-icon-button { position: absolute; top: 0; right: 0; margin: 0; }
	.supro-portal__empty--wide { padding: 24px 18px; }
	.supro-mi-preview { min-height: 0; grid-template-columns: 55px minmax(0,1fr); }
	.supro-mi-preview > aside { padding-inline: 7px; }
	.supro-mi-preview > aside > span { width: 38px; }
	.supro-mi-preview__main { padding: 20px 14px; }
}

@media (max-width: 420px) {
	.supro-mi-preview__cards,
	.supro-portal__metrics { grid-template-columns: minmax(0,1fr); }
	.supro-mi-preview__badge { display: none; }
	.supro-mi-preview__main > header strong { font-size: 18px; }
	.supro-mi-preview__states > div { display: grid; }
	.supro-service__actions .supro-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.supro-portal__view { animation: none; }
}