h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* =========================================
                ũ   (      ̵ )
   ========================================= */

@media (max-width: 900px) {

    html {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    body {
        /* body    1100         ؾ    ũ          */
        width: 1100px !important;
        min-width: 1100px !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    /*  ߶󳻴    Ģ      */
    .monitor-page,
    .site-page {
        width: 1100px !important;
        min-width: 1100px !important;
        overflow: visible !important;
        touch-action: auto !important;
    }

    /* fixed      ũ                         */
    .remote-full {
        position: static !important;
        inset: auto !important;
        width: 1100px !important;
        min-width: 1100px !important;
        height: calc(100dvh - 190px) !important;
        min-height: 400px !important;
    }

        /*      ȭ                     ũ       */
        .remote-full img {
            touch-action: none !important;
        }
}
/* =========================================
          ũ   /           
   ========================================= */

html {
    width: auto !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

body {
    width: auto !important;
    min-width: 1100px !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
}

.monitor-page,
.site-page {
    width: auto !important;
    min-width: 1100px !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    touch-action: auto !important;
}

/* fixed      ũ                         */
.remote-full {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 1100px !important;
    height: calc(100dvh - 190px) !important;
    min-height: 400px !important;
}

    .remote-full img {
        touch-action: auto !important;
    }

/*  ִ ȭ  ߿              */
html.bg-remote-max {
    height: 100% !important;
    overflow: hidden !important;
}

    html.bg-remote-max body,
    html.bg-remote-max .monitor-page {
        width: auto !important;
        min-width: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    html.bg-remote-max .remote-full {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        min-width: 0 !important;
        height: 100dvh !important;
    }


/* ============================================================
   2026-10-05 mobile page horizontal overflow fix
   - release legacy 1100px page width before remote connection
   - bg-mobile-remote remains controlled by monitor CSS/JS
   ============================================================ */
@media (max-width: 900px) {
    html:not(.bg-mobile-remote),
    html:not(.bg-mobile-remote) body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }

        html:not(.bg-mobile-remote) body {
            overflow-y: auto !important;
        }

        html:not(.bg-mobile-remote) .monitor-page,
        html:not(.bg-mobile-remote) .site-page {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            overflow-x: hidden !important;
        }
}

/* 사용자관리 및 암호변경 - 기존 AutoViewerServer 로그인 테마 */
.account-admin-page,.account-password-page{min-height:100vh;box-sizing:border-box;padding:32px 20px;background:radial-gradient(circle at top,#173d70 0%,#0c1c32 45%,#07111f 100%);font-family:"Segoe UI","Malgun Gothic",sans-serif;color:#172235}
.account-admin-shell{max-width:1020px;margin:0 auto;background:#f5f8fc;border-radius:16px;padding:27px;box-shadow:0 20px 60px #0005}
.account-admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.account-admin-head h2{margin:0;color:#172235}.account-admin-head p{margin:5px 0;color:#718096}
.account-admin-page input:not([type=checkbox]),.account-password-page input{min-height:40px;box-sizing:border-box;padding:8px 12px;border:1px solid #cbd3df;border-radius:7px;background:white;color:#1e293b}
.account-admin-page button,.account-password-page button{padding:10px 14px;border:0;border-radius:7px;background:linear-gradient(90deg,#0878e6,#079cf0);color:white;font-weight:700;cursor:pointer}
.account-admin-page button:hover,.account-password-page button:hover{filter:brightness(1.05)}
.account-admin-page .account-close{border:1px solid #cbd3df;border-radius:7px;background:white;padding:10px 15px;text-decoration:none;color:#334155;font-weight:700}
.account-user-card{margin:14px 0;padding:20px;border:1px solid #e1e5ea;border-radius:11px;background:#fff;box-shadow:0 2px 10px #0001}.account-user-card h3{margin-top:0;color:#1e293b}
.account-group-tree{margin:9px 0;border:1px solid #e1e5ea;border-radius:8px;overflow:hidden}.account-group-tree summary{padding:10px 14px;cursor:pointer;background:#f5f8fc;font-weight:700;color:#334155}.account-group-tree[open] summary{border-bottom:1px solid #e1e5ea}
.account-password-page{display:flex;align-items:center;justify-content:center}.account-password-card{width:390px;max-width:100%;box-sizing:border-box;padding:36px;background:#fffc;border-radius:16px;box-shadow:0 24px 70px #0005}.account-password-card h2{text-align:center}.account-password-card input{width:100%}.account-password-card button{margin-right:8px}.account-logo{width:58px;height:58px;margin:0 auto 15px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#0879e8,#00b9ff);color:#fff;font-size:22px;font-weight:800}
@media(max-width:600px){.account-admin-shell{padding:16px}.account-admin-page{padding:12px}.account-user-card{padding:12px}}

/* 사용자별 접이식 목록: 기존 관리페이지 팔레트 유지 */
.account-admin-page .account-user-toggle{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:11px 13px;background:#edf5ff;color:#1e293b;border:1px solid #d6e5f6;border-radius:8px;font-size:16px;font-weight:700}
.account-admin-page .account-user-toggle:hover{background:#deeeff;filter:none}
.account-user-chevron{display:inline-block;width:16px;color:#0878e6;font-size:17px}
.account-user-pending{margin-left:auto;color:#a45d16;font-size:12px;font-weight:600}
.account-user-toggle + div{margin-top:10px}

/* User management action buttons: clear distinctions from the primary create action. */
.account-admin-page button.account-action-reset{background:#d97706;color:#fff}
.account-admin-page button.account-action-delete{background:#dc2626;color:#fff}
.account-admin-page button.account-action-toggle{background:#475569;color:#fff}
.account-admin-page button.account-action-save{background:#16803d;color:#fff}
.account-admin-page button.account-action-reset:hover,
.account-admin-page button.account-action-delete:hover,
.account-admin-page button.account-action-toggle:hover,
.account-admin-page button.account-action-save:hover{filter:brightness(1.09)}