html, body {
    font-family: 'Sarabun', 'Segoe UI', Tahoma, sans-serif;
    background: #f4f6f9;
    color: #1d2733;
}

h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

h1:focus {
    outline: none;
}

.card-panel {
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table-wrap {
    overflow-x: auto;
}

.account-box {
    max-width: 380px;
    margin: 4rem auto;
}

/* Room status colours, kept close to the legacy room grid. */
.status-Rented { background: #fff7b3; }
.status-OwnerOccupied { background: #d6e4ff; }
.status-NotSold { background: #ffd1d1; }
.status-MeterCut { background: #ffe0b3; }
.status-Cooperative { background: #e1e1e1; }
.status-Vacant { background: #d8f5d8; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "เกิดข้อผิดพลาด";
}

/* Password field with an eye button (Components/Shared/PasswordToggle.razor) */
.pw-field { position: relative; }
.pw-field input { padding-right: 2.6rem; }
.pw-toggle {
    position: absolute; top: 0; right: 0; height: calc(1.5em + .75rem + 2px); width: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: #6c757d; cursor: pointer; border-radius: 0 .375rem .375rem 0;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: #0d6efd; }
.pw-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-toggle .pw-hide, .pw-toggle[aria-pressed="true"] .pw-show { display: none; }
.pw-toggle[aria-pressed="true"] .pw-hide { display: block; }
/* Edge/IE draw their own reveal eye on password inputs; ours replaces it. */
.pw-field input::-ms-reveal, .pw-field input::-ms-clear { display: none; }

/* text-bg-* arrived in Bootstrap 5.2; the bundled 5.1 lacks them, which left badge text white on white. */
.text-bg-light { color: #212529 !important; background-color: #f8f9fa !important; }
.text-bg-warning { color: #000 !important; background-color: #ffc107 !important; }
.text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.text-bg-success { color: #fff !important; background-color: #198754 !important; }
.text-bg-danger { color: #fff !important; background-color: #dc3545 !important; }
.text-bg-info { color: #000 !important; background-color: #0dcaf0 !important; }

/* Two-step verification pages */
.account-box-wide { max-width: 520px; }
.setup-steps { padding-left: 1.2rem; }
.setup-steps li { margin-bottom: .75rem; }
.setup-steps .qr { margin: .5rem 0; }
.setup-steps .qr img { border: 1px solid #dde3ea; border-radius: .4rem; image-rendering: pixelated; }
.manual-key { white-space: nowrap; font-size: .95em; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem .75rem; font-size: 1rem; }
.otp { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.app-user-name, .app-user-name:hover, .app-user-name:visited { color: #fff; text-decoration: none; }
.app-user-name:hover { text-decoration: underline; }