/* vpsttt-panel: tạo bởi panel-web.sh từ /etc/vpsttt/brand.json. Đừng sửa tay: đổi logo / màu trong panel (Cấu hình -> Thương hiệu). */
@font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Bold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }
body.login-pf {
  font-family: "DejaVu Sans", system-ui, sans-serif;
  --pf-v5-global--FontFamily--text: "DejaVu Sans", system-ui, sans-serif;
  --pf-v5-global--FontFamily--heading: "DejaVu Sans", system-ui, sans-serif;
  --vps-brand: #7744c8;
  --vps-brand-fg: #ffffff;
  --vps-brand-dark: color-mix(in srgb, var(--vps-brand) 84%, #000);
  background:
    radial-gradient(60rem 40rem at 88% 8%, color-mix(in srgb, var(--vps-brand) 42%, transparent), transparent 70%),
    radial-gradient(48rem 34rem at 0% 100%, color-mix(in srgb, var(--vps-brand) 24%, transparent), transparent 70%),
    linear-gradient(160deg, #0b1220 0%, #111827 55%, #0b1220 100%);
  background-color: #0b1220;
  background-attachment: fixed;
}

.login-pf .container {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .65);
}
.login-pf .details { border-radius: 0 0 16px 16px; }

#brand {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}
#brand::before { content: "VPSTTT AI Workspace"; }
#index-brand::before { content: "VPSTTT"; }

/* Màu thương hiệu thay cho màu xanh mặc định (#06c) của trang đăng nhập Cockpit. */
.login-pf a, .login-pf summary, .login-pf .host-name { color: var(--vps-brand); }
.login-pf .caret polygon { fill: var(--vps-brand); }
.login-pf .form-control[type=text]:hover, .login-pf .form-control[type=password]:hover,
.login-pf .form-control[type=text]:focus, .login-pf .form-control[type=password]:focus,
.login-pf .pf-v5-c-button.pf-m-control:hover { border-block-end-color: var(--vps-brand); }
#login-button.pf-m-primary {
  background-color: var(--vps-brand);
  border-color: var(--vps-brand);
  color: var(--vps-brand-fg);
  border-radius: 8px;
  font-weight: 600;
}
#login-button.pf-m-primary:not([disabled]):hover,
#login-button.pf-m-primary:not([disabled]):focus,
#login-button.pf-m-primary:active {
  background-color: var(--vps-brand-dark);
  border-color: var(--vps-brand-dark);
  color: var(--vps-brand-fg);
}

#badge {
  display: block;
  align-self: center;
  justify-self: center;
}
/* Chế độ tối: Cockpit phủ một lớp đen lên nền; nền đã tối sẵn nên giảm lớp phủ, đưa logo lên trên. */
.pf-v5-theme-dark .login-pf::after { opacity: .3; }
.pf-v5-theme-dark #badge { position: relative; z-index: 2; }
#badge {
  inline-size: auto;
  block-size: auto;
  background: none;
  color: #fff;
  font: 800 4rem/1 "DejaVu Sans", system-ui, sans-serif;
  letter-spacing: .06em;
}
/* login.js của Cockpit chép nội dung ::before vào làm chữ của #badge, nên ẩn bản ::before đi. */
#badge::before { content: "VPSTTT"; display: none; }
#badge::after {
  content: "AI Workspace";
  display: block;
  margin-block-start: .75rem;
  font: 500 1.35rem/1.3 "DejaVu Sans", system-ui, sans-serif;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .02em;
}
@keyframes vps-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes vps-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vps-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes vps-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5%, 4%, 0) scale(1.1); }
}
@keyframes vps-pulse { 50% { opacity: .7; } }
/* Nền: hai vệt sáng màu thương hiệu trôi rất chậm (lớp riêng, chỉ transform: không vẽ lại cả trang). */
body.login-pf::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(36rem 26rem at 78% 18%, color-mix(in srgb, var(--vps-brand) 32%, transparent), transparent 70%),
    radial-gradient(30rem 22rem at 12% 88%, color-mix(in srgb, var(--vps-brand) 20%, transparent), transparent 70%);
  animation: vps-drift 20s ease-in-out infinite;
  will-change: transform;
}
/* Nội dung nổi trên lớp nền trôi (z-index -1 thì bị nền của body che mất) và trên lớp phủ tối của Cockpit (::after,
   z 1, chỉ để làm tối nền), như logo ở chế độ tối (z 2). */
#banner, #badge, #main, #login-details, #recent-hosts { position: relative; z-index: 2; }
/* Mở trang: khung đăng nhập trượt lên, logo hiện theo sau một nhịp. */
#main, #login-details { animation: vps-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
#login-details { animation-delay: .06s; }
#badge { animation: vps-pop .5s cubic-bezier(.2, .7, .2, 1) .12s both; }
/* Bước nhập mã 2 lớp, thông báo lỗi / thông tin, Tuỳ chọn khác: hiện ra mượt. */
#conversation-group:not([hidden]), #error-group:not([hidden]), #info-group:not([hidden]), #server-group:not([hidden]),
#hostkey-group:not([hidden]), #login-wait-validating:not([hidden]), #login-fatal:not([hidden]) {
  animation: vps-in .25s ease-out both;
}
/* Nút Đăng nhập: rê thì nhích lên + bóng, bấm thì lún, đang kiểm tra thì nhấp nháy nhẹ. */
#login-button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
#login-button:not([disabled]):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--vps-brand) 70%, transparent);
}
#login-button:not([disabled]):active { transform: translateY(0) scale(.98); box-shadow: none; }
#login-button[spinning] { animation: vps-pulse 1.2s ease-in-out infinite; }
/* Ô nhập: bấm vào thì gạch chân màu thương hiệu dày lên mượt. */
.login-pf .form-control { transition: border-color .2s ease, box-shadow .2s ease; }
.login-pf .form-control:focus { box-shadow: inset 0 -2px 0 var(--vps-brand); }
@media (prefers-reduced-motion: reduce) {
  body.login-pf::before, #main, #login-details, #badge, #conversation-group, #error-group, #info-group, #server-group,
  #hostkey-group, #login-wait-validating, #login-fatal, #login-button { animation: none !important; transition: none !important; }
  #login-button:not([disabled]):hover { transform: none; }
}
@media (max-width: 1023px) {
  body.login-pf {
    display: grid;
    grid-template-areas: "banner" "logo" "login" "details" "recent";
    grid-template-rows: auto auto auto auto 1fr;
  }
  #badge { margin: 2rem auto 1.5rem; }
  #badge { font-size: 2.75rem; }
}