/* Login and status components from boxbms-layout/assets/css/ds-app.css. */
/* =====================================================================
 * TRANG ĐĂNG NHẬP
 * ===================================================================== */
.ds-auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; background: var(--ds-surface); }
.ds-auth__brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ds-space-600);
  color: #fff;
  background: var(--ds-nav-background);
}
/* Họa tiết kiểu Trello: các thẻ và cột trôi nổi mờ */
.ds-auth__brand::before, .ds-auth__brand::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: var(--ds-radius-xlarge);
  background: rgba(255, 255, 255, 0.08);
}
.ds-auth__brand::before { width: 18rem; height: 26rem; right: -4rem; top: 12%; transform: rotate(8deg); }
.ds-auth__brand::after { width: 14rem; height: 18rem; right: 12rem; bottom: -6rem; transform: rotate(-6deg); }
.ds-auth__logo { height: 2.25rem; width: auto; align-self: flex-start; }
.ds-auth__headline { max-width: 28rem; }
.ds-auth__headline h1 { font: var(--ds-font-heading-xxlarge); font-size: 2.5rem; line-height: 3rem; letter-spacing: -0.03em; color: #fff; margin-bottom: var(--ds-space-200); }
.ds-auth__headline p { font: var(--ds-font-body-large); color: rgba(255, 255, 255, 0.85); margin: 0; }
.ds-auth__features { display: flex; flex-wrap: wrap; gap: var(--ds-space-100); }
.ds-auth__features span { display: inline-flex; align-items: center; gap: var(--ds-space-075); padding: var(--ds-space-075) var(--ds-space-150); font-weight: var(--ds-font-weight-medium); background: rgba(255, 255, 255, 0.14); border-radius: var(--ds-radius-full); }
.ds-auth__panel { display: flex; align-items: center; justify-content: center; padding: var(--ds-space-500) var(--ds-space-300); }
.ds-auth__form { width: 100%; max-width: 24rem; }
.ds-auth__form h2 { font: var(--ds-font-heading-xlarge); margin-bottom: var(--ds-space-075); }
.ds-auth__form .lead { font: var(--ds-font-body); color: var(--ds-text-subtle); margin-bottom: var(--ds-space-400); }
.ds-password { position: relative; }
.ds-password .form-control { padding-right: var(--ds-space-500); }
.ds-password__toggle { position: absolute; right: var(--ds-space-050); top: 50%; transform: translateY(-50%); }
.ds-auth__foot { margin-top: var(--ds-space-400); font: var(--ds-font-body-small); color: var(--ds-text-subtlest); text-align: center; }
@media (max-width: 991.98px) {
  .ds-auth { grid-template-columns: minmax(0, 1fr); }
  .ds-auth__brand { padding: var(--ds-space-300) var(--ds-space-200); min-height: auto; gap: var(--ds-space-300); }
  .ds-auth__headline h1 { font-size: 1.5rem; line-height: 2rem; margin-bottom: var(--ds-space-100); }
  .ds-auth__headline p, .ds-auth__features { display: none; }
  .ds-auth__brand::before { width: 10rem; height: 12rem; top: -2rem; right: -2rem; }
  .ds-auth__brand::after { display: none; }
  .ds-auth__panel { align-items: flex-start; padding: var(--ds-space-400) var(--ds-space-200); }
}

/* =====================================================================
 * TRANG TRẠNG THÁI / LỖI (BoxBMS: layouts.status)
 * ===================================================================== */
.ds-status { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--ds-space-400) var(--ds-space-200); background: var(--ds-surface-sunken); }
/* component.ui.brand-backdrop: nền màu chủ đạo 6% */
.ds-status::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(var(--ds-brand-bold-rgb), 0.06); }
.ds-status__card { width: 100%; max-width: 30rem; padding: var(--ds-space-500) var(--ds-space-400); text-align: center; background: var(--ds-surface-raised); border-radius: var(--ds-radius-xlarge); box-shadow: var(--ds-shadow-overlay); }
.ds-status__logo { margin-bottom: var(--ds-space-400); }
.ds-status__code { font-size: 4.5rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--ds-text-brand); margin-bottom: var(--ds-space-200); }
.ds-status__icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--ds-space-200); font-size: 2rem; border-radius: var(--ds-radius-full); color: var(--ds-icon-brand); background: var(--ds-background-brand-subtlest); }
.ds-status__title { font: var(--ds-font-heading-large); margin-bottom: var(--ds-space-100); }
.ds-status__message { color: var(--ds-text-subtle); margin-bottom: var(--ds-space-300); }
.ds-status__details { margin: 0 0 var(--ds-space-300); padding: var(--ds-space-150) var(--ds-space-200); text-align: left; font: var(--ds-font-body-small); color: var(--ds-text-subtle); background: var(--ds-surface-sunken); border-radius: var(--ds-radius-medium); }
.ds-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-100); }


.ds-logo-chip { display: inline-flex; align-items: center; padding: var(--ds-space-075) var(--ds-space-150); background: var(--ds-nav-background); border-radius: var(--ds-radius-large); }
.ds-logo-chip img { height: 1.5rem; width: auto; max-width: 100%; object-fit: contain; }
.ds-brand-name { font: var(--ds-font-heading-large); color: var(--ds-text-inverse); overflow-wrap: anywhere; }
.ds-auth__logo { max-width: 100%; object-fit: contain; }
.ds-auth { grid-template-rows: 1fr; }
.ds-status__card, .ds-auth__form { overflow-wrap: anywhere; }
.ds-password .form-control.is-invalid { background-image: none; }
.ds-status__details ul { margin-bottom: 0; padding-left: var(--ds-space-200); }
@media (max-width: 991.98px) {
  .ds-auth { grid-template-rows: auto 1fr; }
}