/* Advantech SSO front-end kit — sign-in page + user badge. Classes start with adv-sso-. */
:root {
  --adv-sso-blue: #004280;
  --adv-sso-blue-hover: #0a5398;
  --adv-sso-tint: #e8f0f8;
  --adv-sso-ink: #17232f;
  --adv-sso-muted: #5a6a7a;
  --adv-sso-line: #d8e0e8;
  --adv-sso-paper: #f3f5f8;
  --adv-sso-card: #fff;
  --adv-sso-danger: #b3261e;
  --adv-sso-font: "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
}

/* hide signed-in / signed-out blocks until the state is known */
.sso-loading [data-sso-show] { display: none !important; }
[data-sso-show][hidden] { display: none !important; }

/* ---------- sign-in page ---------- */
.adv-sso-page {
  margin: 0; min-height: 100vh; padding: 24px 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--adv-sso-paper); color: var(--adv-sso-ink);
  font: 15px/1.6 var(--adv-sso-font);
}
.adv-sso-card {
  width: 100%; max-width: 420px; overflow: hidden;
  background: var(--adv-sso-card); border: 1px solid var(--adv-sso-line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 40, 80, .08);
}
.adv-sso-card-logo { display: block; background: var(--adv-sso-blue); }
.adv-sso-card-logo img { display: block; width: 100%; height: auto; }
.adv-sso-card-body { padding: 28px 32px 32px; display: grid; gap: 16px; }
.adv-sso-title { margin: 0; font-size: 22px; line-height: 1.3; }
.adv-sso-lead { margin: 0; color: var(--adv-sso-muted); }
.adv-sso-error {
  margin: 0; padding: 10px 14px; border-left: 4px solid var(--adv-sso-danger);
  background: #fbeceb; color: #7d1913; border-radius: 4px;
}
.adv-sso-info {
  margin: 0; padding: 10px 14px; border-left: 4px solid #d99a00;
  background: #fdf1d6; color: #5c3b00; border-radius: 4px;
}
.adv-sso-foot { margin: 0; font-size: 12.5px; color: var(--adv-sso-muted); text-align: center; }

/* ---------- buttons ---------- */
.adv-sso-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 0 18px;
  font: 600 15px/1 var(--adv-sso-font); text-decoration: none; cursor: pointer;
  color: #fff; background: var(--adv-sso-blue); border: 1px solid transparent; border-radius: 4px;
}
.adv-sso-btn:hover { background: var(--adv-sso-blue-hover); color: #fff; }
.adv-sso-btn:focus-visible, .adv-sso-link:focus-visible { outline: 3px solid #6fa8e0; outline-offset: 2px; }
.adv-sso-btn.adv-sso-block { display: flex; width: 100%; min-height: 46px; }
.adv-sso-btn.adv-sso-secondary { color: var(--adv-sso-blue); background: #fff; border-color: var(--adv-sso-blue); }
.adv-sso-btn.adv-sso-secondary:hover { background: var(--adv-sso-tint); }
.adv-sso-ms { width: 18px; height: 18px; flex: none; }

/* ---------- <div data-sso="button"> (drop-in for an existing login page) ---------- */
.adv-sso-button-wrap { display: block; margin: 12px 0; font-family: var(--adv-sso-font); }
.adv-sso-button-wrap .adv-sso-btn.adv-sso-signin {
  box-sizing: border-box; margin: 0; min-height: 44px; padding: 0 20px;
  font: 600 15px/1.2 var(--adv-sso-font); letter-spacing: normal; text-transform: none;
  text-decoration: none; text-align: center; white-space: nowrap; box-shadow: none;
}
.adv-sso-button-wrap .adv-sso-btn.adv-sso-signin.adv-sso-block { display: flex; width: 100%; }
.adv-sso-button-wrap .adv-sso-btn.adv-sso-signin:not(.adv-sso-block) { display: inline-flex; width: auto; }
.adv-sso-button-wrap .adv-sso-ms { width: 18px; height: 18px; flex: none; display: block; }
.adv-sso-divider {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  color: var(--adv-sso-muted); font: 13px/1 var(--adv-sso-font);
}
.adv-sso-divider::before, .adv-sso-divider::after { content: ""; flex: 1; border-top: 1px solid var(--adv-sso-line); }

/* ---------- user badge ---------- */
.adv-sso-badge { display: inline-flex; align-items: center; gap: 10px; font: 14px/1.3 var(--adv-sso-font); }
.adv-sso-avatar { border-radius: 50%; object-fit: cover; flex: none; background: var(--adv-sso-tint); }
.adv-sso-initials {
  display: inline-grid; place-items: center;
  color: var(--adv-sso-blue); font-weight: 600; font-size: 13px; letter-spacing: .02em;
}
.adv-sso-who { display: grid; min-width: 0; }
.adv-sso-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-sso-who small { color: var(--adv-sso-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-sso-link { color: inherit; opacity: .85; font-size: 13px; text-underline-offset: 2px; }
.adv-sso-link:hover { opacity: 1; }

/* on a dark header: <div data-sso="user" class="adv-sso-on-dark"> */
.adv-sso-on-dark { color: #fff; }
.adv-sso-on-dark .adv-sso-who small { color: #c7d7e8; }

/* ---------- simple app header (optional) ---------- */
.adv-sso-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px; background: var(--adv-sso-blue); color: #fff; font-family: var(--adv-sso-font);
}
.adv-sso-header img { height: 32px; width: auto; display: block; }

@media (max-width: 480px) {
  .adv-sso-card-body { padding: 24px 20px 28px; }
  .adv-sso-who small { display: none; }
}

/* a value hidden by the SSO's masking rules (shown as *) */
.adv-sso-masked { color: #6b7785; font-style: italic; letter-spacing: .05em; cursor: help; }