/* ENCORE Admin & Super Admin security UI */
.encore-admin-auth {
    width: min(100% - 2rem, 30rem);
    margin: 6vh auto 0;
}

.encore-admin-auth__panel {
    border: 1px solid #31506d;
    border-radius: 14px;
    background: #10243a;
    color: #f7f9fb;
    padding: 1rem;
    box-shadow: 0 18px 45px rgb(0 0 0 / 22%);
}

.encore-admin-auth__title {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
}

.encore-admin-field {
    display: grid;
    gap: .35rem;
    margin-block: .75rem;
}

.encore-admin-field input,
.encore-admin-field select {
    min-height: 2.65rem;
    padding: .55rem .7rem;
    border: 1px solid #54708d;
    border-radius: 9px;
    background: #f8fafc;
    color: #14233a;
    font: inherit;
}

.encore-admin-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

.encore-admin-security-table {
    width: 100%;
    border-collapse: collapse;
}

.encore-admin-security-table th,
.encore-admin-security-table td {
    padding: .55rem .5rem;
    border-bottom: 1px solid #d7dde7;
    text-align: left;
    vertical-align: middle;
}

.encore-admin-security-table__actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.encore-admin-security-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding-inline: .55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: .8rem;
}

.encore-admin-security-warning {
    border-inline-start: 4px solid currentColor;
    padding: .65rem .75rem;
    margin-block: .75rem;
}

.encore-admin-security-danger {
    font-weight: 700;
}

/* Integrated account-management page */
.encore-admin-security-page {
    place-items: start center;
    padding: clamp(1rem, 2vw, 2rem);
}

.encore-admin-security-page .encore-admin-security-integrated {
    width: min(1180px, 100%);
    max-width: none;
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid #36536f;
    border-radius: 18px;
    background: #0f2137;
    color: #f7f9fb;
    box-shadow: 0 24px 60px rgb(0 0 0 / 26%);
}

.encore-admin-security-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .15rem .1rem .35rem;
}

.encore-admin-security-header .eyebrow {
    margin: 0 0 .35rem;
    color: #6ee7dc;
}

.encore-admin-security-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    line-height: 1.05;
}

.encore-admin-security-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: .65rem 0 0;
    color: #c7d4e2;
    font-size: .95rem;
}

.encore-admin-security-subtitle strong {
    color: #fff;
}

.encore-admin-back-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .55rem .8rem;
    border: 1px solid #42627f;
    border-radius: 10px;
    background: #132b45;
    color: #d9f5f1;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}

.encore-admin-back-link:hover,
.encore-admin-back-link:focus-visible {
    background: #193855;
    border-color: #6ee7dc;
}

.encore-admin-security-page .flash {
    margin: 0;
    color: #fff;
}

.encore-admin-security-page .flash-success {
    border: 1px solid #2e8c62;
    border-left: 4px solid #42b883;
    background: #123a31;
}

.encore-admin-security-page .flash-error {
    border: 1px solid #9d4e52;
    border-left: 4px solid #ef6b70;
    background: #3a1d28;
}

.encore-admin-security-page .encore-admin-security-panel {
    margin: 0;
    padding: clamp(1rem, 2vw, 1.3rem);
    border: 1px solid #35526e;
    border-radius: 14px;
    background: #142a42;
    color: #eef4fa;
    box-shadow: 0 10px 30px rgb(0 0 0 / 14%);
}

.encore-admin-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid #2d4862;
}

.encore-admin-panel-heading h2 {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.2;
}

.encore-admin-panel-heading p,
.encore-admin-security-panel > p,
.encore-admin-form-help {
    margin: 0;
    color: #bac9d8;
    font-size: .9rem;
    line-height: 1.45;
}

.encore-admin-security-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1rem;
    align-items: end;
}

.encore-admin-security-form label,
.encore-admin-manage-form label {
    display: grid;
    gap: .38rem;
    min-width: 0;
}

.encore-admin-security-form label > span,
.encore-admin-manage-form label > span {
    color: #e7eef6;
    font-size: .8rem;
    font-weight: 800;
}

.encore-admin-security-form input,
.encore-admin-manage-form input,
.encore-admin-security-form select,
.encore-admin-manage-form select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .62rem .75rem;
    border: 1px solid #71869b;
    border-radius: 9px;
    background: #f8fafc;
    color: #14233a;
    font: inherit;
    line-height: 1.2;
}

.encore-admin-security-form input::placeholder,
.encore-admin-manage-form input::placeholder {
    color: #69798b;
}

.encore-admin-security-form input:focus,
.encore-admin-manage-form input:focus,
.encore-admin-security-form select:focus,
.encore-admin-manage-form select:focus {
    border-color: #29bdb4;
    outline: 3px solid rgb(93 214 207 / 24%);
    outline-offset: 1px;
}

.encore-admin-form-action {
    display: flex;
    justify-content: flex-start;
    align-items: end;
}

.encore-admin-security-form--password .encore-admin-form-action {
    grid-column: 2;
}

.encore-admin-primary-button,
.encore-admin-secondary-button,
.encore-admin-manage-form button {
    min-height: 42px;
    padding: .6rem .85rem;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: .86rem;
    font-weight: 900;
    cursor: pointer;
}

.encore-admin-primary-button {
    background: #34c5bb;
    color: #07131f;
}

.encore-admin-primary-button:hover,
.encore-admin-primary-button:focus-visible {
    background: #6ee7dc;
}

.encore-admin-secondary-button,
.encore-admin-manage-form button:not(.danger-button) {
    background: #d8e8f5;
    color: #14233a;
}

.encore-admin-secondary-button:hover,
.encore-admin-secondary-button:focus-visible,
.encore-admin-manage-form button:not(.danger-button):hover,
.encore-admin-manage-form button:not(.danger-button):focus-visible {
    background: #fff;
}

.encore-admin-form-help {
    margin-top: .7rem;
    font-size: .78rem;
}

.encore-admin-role-badge,
.encore-admin-status-badge,
.encore-admin-protected-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 26px;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.encore-admin-role-badge.is-super {
    border: 1px solid #d8a94a;
    background: #43351e;
    color: #ffd98d;
}

.encore-admin-role-badge.is-admin {
    border: 1px solid #4a91bb;
    background: #17364e;
    color: #bde8ff;
}

.encore-admin-status-badge.is-active {
    border: 1px solid #3d9c70;
    background: #17392d;
    color: #9fe3bd;
}

.encore-admin-status-badge.is-disabled {
    border: 1px solid #8c5860;
    background: #3b252d;
    color: #ffc1c5;
}

.encore-admin-protected-badge {
    border: 1px solid #58708a;
    background: #1a3149;
    color: #cad7e3;
}

.encore-admin-table-scroll {
    overflow-x: auto;
    border: 1px solid #34516d;
    border-radius: 11px;
    background: #0f2237;
}

.encore-admin-security-account-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: transparent !important;
    color: #eef4fa !important;
}

.encore-admin-security-account-table th,
.encore-admin-security-account-table td {
    padding: .75rem .8rem;
    border-bottom: 1px solid #29445f;
    color: #eef4fa !important;
    text-align: left;
    vertical-align: middle;
}

.encore-admin-security-account-table th {
    background: #18314b !important;
    color: #b9d6eb !important;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.encore-admin-security-account-table tbody tr:last-child td {
    border-bottom: 0;
}

.encore-admin-security-account-table tbody tr:hover td {
    background: #132c45;
}

.encore-admin-last-login {
    color: #c5d2df !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.encore-admin-manage-details {
    min-width: 140px;
}

.encore-admin-manage-details > summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .42rem .65rem;
    border: 1px solid #527190;
    border-radius: 8px;
    background: #193650;
    color: #dff8f5;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.encore-admin-manage-details > summary::-webkit-details-marker {
    display: none;
}

.encore-admin-manage-details > summary::after {
    content: '▾';
    margin-left: .45rem;
    font-size: .72rem;
}

.encore-admin-manage-details[open] > summary::after {
    content: '▴';
}

.encore-admin-manage-stack {
    display: grid;
    gap: .7rem;
    width: min(760px, 76vw);
    margin-top: .65rem;
    padding: .7rem;
    border: 1px solid #476680;
    border-radius: 11px;
    background: #0c1d30;
    box-shadow: 0 16px 38px rgb(0 0 0 / 28%);
}

.encore-admin-manage-form {
    display: grid;
    grid-template-columns: minmax(130px, .75fr) repeat(2, minmax(150px, 1fr)) auto;
    gap: .6rem;
    align-items: end;
    padding: .7rem;
    border: 1px solid #2e4b67;
    border-radius: 9px;
    background: #132940;
}

.encore-admin-manage-form > div:first-child strong {
    display: block;
    color: #fff;
    font-size: .86rem;
}

.encore-admin-manage-form > div:first-child small {
    display: block;
    margin-top: .2rem;
    color: #aebfce;
    font-size: .72rem;
    line-height: 1.35;
}

.encore-admin-manage-form--compact {
    grid-template-columns: minmax(170px, 1fr) minmax(180px, 1fr) auto;
}

.encore-admin-manage-form--danger {
    border-color: #70404a;
    background: #2a1d28;
}

.encore-admin-manage-form .danger-button {
    min-height: 42px;
    padding: .6rem .85rem;
    border-radius: 9px;
}

.encore-admin-security-page :focus-visible {
    outline: 3px solid #6ee7dc;
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .encore-admin-security-form,
    .encore-admin-security-form--password .encore-admin-form-action {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .encore-admin-form-action {
        justify-content: stretch;
    }

    .encore-admin-form-action button {
        width: 100%;
    }

    .encore-admin-manage-stack {
        width: min(680px, 82vw);
    }

    .encore-admin-manage-form,
    .encore-admin-manage-form--compact {
        grid-template-columns: 1fr 1fr;
    }

    .encore-admin-manage-form > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .encore-admin-security-page {
        padding: .65rem;
    }

    .encore-admin-security-page .encore-admin-security-integrated {
        padding: .75rem;
        border-radius: 12px;
    }

    .encore-admin-security-header {
        flex-direction: column;
    }

    .encore-admin-back-link {
        width: 100%;
        justify-content: center;
    }

    .encore-admin-security-page .encore-admin-security-panel {
        padding: .85rem;
    }

    .encore-admin-manage-stack {
        width: min(92vw, 520px);
    }

    .encore-admin-manage-form,
    .encore-admin-manage-form--compact {
        grid-template-columns: 1fr;
    }

    .encore-admin-manage-form > div:first-child {
        grid-column: auto;
    }

    .encore-admin-manage-form button {
        width: 100%;
    }
}