.CenteredPage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.Card {
    background: var(--CardBackground);
    border-radius: var(--RadiusLarge);
    box-shadow: var(--ShadowSoft);
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

.Logo {
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 28px;
}

.Logo span {
    display: block;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--MutedText);
    margin-top: 6px;
}

.Logo img {
    max-width: 80px;
    margin: 0 auto;
}

.Input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--RadiusMedium);
    border: 1px solid var(--BorderColor);
    background: var(--InputBackground);
    font-size: 16px;
    outline: none;
}

.Input:focus {
    border-color: var(--AccentColor);
    background: var(--SurfaceWhite);
}

.Input:disabled {
    background: var(--SecondaryBackground);
    cursor: not-allowed;
}

.ButtonPrimary,
.ButtonSecondary,
.ButtonDanger {
    width: 100%;
    padding: 12px;
    border-radius: var(--RadiusMedium);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ButtonPrimary {
    border: none;
    background: var(--AccentColor);
    color: var(--White);
}

.ButtonSecondary {
    border: 1px solid var(--BorderColor);
    background: var(--SurfaceWhite);
    color: var(--PrimaryColor);
    text-decoration: none;
}

.ButtonSecondary:visited {
    color: var(--PrimaryColor);
    text-decoration: none;
}

.ButtonSecondary:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ButtonDanger {
    margin-top: 20px;
    border: none;
    background: var(--DangerColor);
    color: var(--White);
}

.HelperText {
    margin-top: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--MutedText);
}

.feedback {
    background-color: var(--SurfaceInfo);
    border: 1px solid #4d73fc;
    padding: 12px;
    border-radius: var(--RadiusSmall);
    margin-bottom: 16px;
    text-align: center;
}

.fb-red {
    border-color: #fca5a5;
    background-color: var(--SurfaceDanger);
    color: var(--TextRed700);
}

.fb-orange {
    border-color: #fdba74;
    background-color: var(--SurfaceOrange50);
    color: var(--TextWarningStrong);
}

.ButtonSmall {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: var(--RadiusSmall);
    width: 200px;
}

.ButtonTiny {
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 6px;
    width: auto;
}
.ModalOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
}

.ModalCard {
    width: 100%;
    max-width: 360px;
    padding: 24px;
    border-radius: var(--RadiusLarge);
    background: var(--SurfaceWhite);
    box-shadow: var(--ShadowSoft);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.ModalCard img {
    max-width: 50px;
    max-height: 50px;
    margin: 8px;
}
.DialogMessage { white-space: pre-wrap; overflow-wrap: anywhere; }

.ModalActions {
    display: flex;
    gap: 10px;
}

.ModalActions button {
    flex: 1;
}

/* Shared layouts; page variants are configured in tokens.css. */

.WideCard {
    max-width: var(--WideCardMaxWidth, 1000px);
    padding: var(--WideCardPadding, 32px);
}

.DashboardHeader {
    display: flex;
    justify-content: space-between;
    align-items: var(--DashboardHeaderAlign, center);
    margin-bottom: var(--DashboardHeaderMargin, 24px);
}

/* Status variants retain legacy class names used by PHP. */

.StatusBadge {
    font-size: var(--StatusFontSize, 11px);
    font-weight: 700;
    text-transform: var(--StatusTransform, uppercase);
    padding: var(--StatusPadding, 4px 10px);
    border-radius: var(--StatusRadius, 6px);
}

.StatusBadge.online, .StatusBadge.onlines {
    background: var(--SurfaceGreen100);
    color: var(--TextGreen800);
}

.StatusBadge.offline, .StatusBadge.offlines {
    background: var(--SurfaceRed100);
    color: var(--TextRed800);
}

/* Dialog actions retain their existing JavaScript hooks. */

.BtnBack, .BtnSave, .BtnCancel, .BtnConfirm {
    flex: 1;
    border-radius: var(--RadiusSmall);
    padding: 10px 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.BtnSave, .BtnConfirm {
    background: var(--CompleteColor);
    color: var(--White);
    border-color: var(--CompleteColor);
}

.BtnBack, .BtnCancel {
    background: var(--DangerColor);
    color: var(--White);
    border-color: var(--DangerColor);
}