/**
 * Unified app/admin styles (dark theme).
 * - Standalone pages: body.auth-page | body.policy-page
 * - App shell pages: body.page-no-sidebar, .page-select-instance
 * - Admin panels: wrap content in .admin-page
 */

:root {
    --admin-bg: rgba(22, 27, 34, 0.95);
    --admin-bg-elevated: #202c33;
    --admin-bg-muted: rgba(255, 255, 255, 0.04);
    --admin-border: #30363d;
    --admin-text: #e6edf3;
    --admin-text-muted: #9aa4b2;
    --admin-accent: #25d366;
    --admin-accent-dark: #128c7e;
    --admin-success-bg: rgba(37, 211, 102, 0.12);
    --admin-success-border: rgba(37, 211, 102, 0.32);
    --admin-success-text: #86efac;
    --admin-error-bg: rgba(248, 81, 73, 0.12);
    --admin-error-border: rgba(248, 81, 73, 0.32);
    --admin-error-text: #fca5a5;
    --admin-warning-bg: rgba(251, 191, 36, 0.1);
    --admin-warning-border: rgba(251, 191, 36, 0.28);
    --admin-warning-text: #fcd34d;
    --admin-page-gradient: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
}

/* Dashboard */
.dashboard-page {
    position: relative;
    padding: .35rem .55rem 1.75rem;
    color: var(--admin-text);
}

.dashboard-page::before {
    content: '';
    position: fixed;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 82% 10%, rgba(37, 211, 102, .075), transparent 26rem),
        radial-gradient(circle at 15% 75%, rgba(88, 166, 255, .055), transparent 24rem);
    pointer-events: none;
}

.dashboard-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    min-height: 170px;
    border: 1px solid rgba(37, 211, 102, .28);
    border-radius: 22px;
    background:
        linear-gradient(115deg, rgba(18, 140, 126, .34), rgba(21, 29, 36, .96) 52%, rgba(26, 39, 45, .98)),
        var(--admin-bg-elevated);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .04);
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    inset-inline-end: -45px;
    top: -115px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    border: 55px solid rgba(37, 211, 102, .07);
    background: rgba(37, 211, 102, .035);
    pointer-events: none;
}

.dashboard-hero > div:first-child { position: relative; z-index: 2; }
.dashboard-hero > div:first-child::after { content: ''; display: block; width: 52px; height: 3px; margin-top: 1rem; border-radius: 99px; background: linear-gradient(90deg, var(--admin-accent), transparent); }

.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .65rem;
    color: #7ddeab;
    font-size: .78rem;
    font-weight: 700;
}

.dashboard-hero h1 { margin: 0 0 .4rem; color: #fff; font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 750; text-shadow: 0 3px 18px rgba(0,0,0,.22); }
.dashboard-hero p { margin: 0; color: var(--admin-text-muted); font-size: .9rem; }
.dashboard-hero-badge { z-index: 2; display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(7, 14, 18, .48); color: #d9e1e8; white-space: nowrap; box-shadow: 0 10px 28px rgba(0,0,0,.18); backdrop-filter: blur(8px); }
.dashboard-hero-badge i { color: #67e89b; font-size: 1.1rem; }
.dashboard-grid { margin: 0; }

.dashboard-stat, .dashboard-panel {
    height: 100%;
    border: 1px solid var(--admin-border);
    border-radius: 15px;
    background: rgba(22, 27, 34, .82);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16), inset 0 1px rgba(255,255,255,.025);
}

.dashboard-stat { --stat-color: #79b8ff; position: relative; overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.dashboard-stat::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--stat-color), transparent 82%); }
.dashboard-stat::after { content: ''; position: absolute; width: 100px; height: 100px; inset-inline-end: -42px; bottom: -55px; border-radius: 50%; background: var(--stat-color); opacity: .045; }
.dashboard-stat:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--stat-color) 38%, transparent); box-shadow: 0 18px 42px rgba(0,0,0,.25); }
.dashboard-stat .card-body { position: relative; z-index: 1; padding: 1.25rem; }
.dashboard-stat-icon { float: left; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--stat-color) 25%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--stat-color) 12%, transparent); color: var(--stat-color); font-size: 1.3rem; box-shadow: 0 7px 18px color-mix(in srgb, var(--stat-color) 8%, transparent); }
.dashboard-stat h6 { padding-top: .1rem; color: var(--admin-text-muted) !important; font-size: .78rem; font-weight: 600; }
.dashboard-stat h3 { color: #fff; font-size: 1.65rem; font-weight: 750; line-height: 1.25; }
.dashboard-stat small { display: block; margin-top: .45rem; color: var(--admin-text-muted) !important; font-size: .72rem; }
.dashboard-stat-users { --stat-color: #79b8ff; }
.dashboard-stat-whatsapp { --stat-color: #67e89b; }
.dashboard-stat-open { --stat-color: #fbbf24; }
.dashboard-stat-closed { --stat-color: #a78bfa; }

.dashboard-panel { overflow: hidden; transition: border-color .2s ease; }
.dashboard-panel:hover { border-color: rgba(255,255,255,.15); }
.dashboard-panel .card-header { position: relative; padding: 1.05rem 1.15rem; border-bottom: 1px solid var(--admin-border); background: linear-gradient(90deg, rgba(37,211,102,.065), transparent 42%); }
.dashboard-panel .card-header::before { content: ''; position: absolute; inset-inline-start: 0; top: 28%; width: 3px; height: 44%; border-radius: 0 6px 6px 0; background: var(--admin-accent); }
.dashboard-panel .card-header h5 { color: var(--admin-text); font-size: .95rem; font-weight: 700; }
.dashboard-panel .card-header i { color: var(--admin-accent); }
.dashboard-panel .card-body { padding: 0; }
.dashboard-table { --bs-table-bg: transparent; --bs-table-color: var(--admin-text); --bs-table-border-color: var(--admin-border); --bs-table-hover-bg: rgba(255,255,255,.025); }
.dashboard-table thead th { padding: .75rem 1rem; border-bottom-width: 1px; background: rgba(255,255,255,.025); color: var(--admin-text-muted); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.dashboard-table tbody td { padding: .9rem 1rem; font-size: .82rem; vertical-align: middle; transition: background-color .16s ease; }
.dashboard-table tbody tr:hover td { background: rgba(37,211,102,.035); }
.dashboard-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-person { display: inline-flex; align-items: center; gap: .55rem; }
.dashboard-person i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(37,211,102,.1); color: #7ddeab; }
.dashboard-count { display: inline-flex; min-width: 30px; height: 25px; align-items: center; justify-content: center; padding: 0 .45rem; border-radius: 999px; background: rgba(37,211,102,.1); color: #86efac; font-weight: 700; }
.dashboard-panel .btn-outline-primary { border-color: rgba(37,211,102,.4); color: #7ddeab; border-radius: 8px; }
.dashboard-panel .btn-outline-primary:hover { border-color: var(--admin-accent); background: var(--admin-accent); color: #07130c; }

@media (max-width: 767.98px) {
    .dashboard-page { padding-inline: .15rem; }
    .dashboard-hero { align-items: flex-start; flex-direction: column; }
    .dashboard-hero-badge { padding: .45rem .7rem; font-size: .78rem; }
    .dashboard-table thead th, .dashboard-table tbody td { padding-inline: .75rem; }
}

/* ─── Standalone auth pages (login, subscription lock) ─── */

body.auth-page {
    direction: rtl;
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-page-gradient);
    color: var(--admin-text);
    font-family: 'Rubik', sans-serif;
}

.auth-page .auth-wrapper {
    width: 100%;
    max-width: 520px;
    padding: 1.5rem;
}

.auth-page .auth-wrapper.is-narrow {
    max-width: 470px;
}

.auth-page .auth-card {
    background: var(--admin-bg);
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.auth-page .auth-card.is-centered {
    text-align: center;
}

.auth-page .auth-logo {
    width: 72px;
    height: 72px;
    background: #fff;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.auth-page .auth-logo img {
    max-width: 56px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.auth-page .auth-status-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.auth-page .auth-status-icon.is-danger {
    background: var(--admin-error-bg);
    color: #f85149;
}

.auth-page .auth-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--admin-text);
}

.auth-page h2.auth-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: #fff;
}

.auth-page .auth-heading .brand {
    color: var(--admin-accent) !important;
}

.auth-page .auth-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.auth-page .auth-message {
    color: var(--admin-text-muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.auth-page .auth-btn {
    background: #238636;
    border: none;
    color: #fff;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.auth-page .auth-btn:hover {
    background: #2ea043;
    color: #fff;
}

.auth-page .alert {
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    border: none;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-page .alert-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--admin-error-text);
}

.auth-page .alert i {
    font-size: 20px;
    flex-shrink: 0;
}

.auth-page .form-floating {
    margin-bottom: 1.2rem;
}

.auth-page .form-floating > label {
    right: 0;
    left: auto;
    transform-origin: right center;
    background-color: transparent !important;
    transition: transform 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}

.auth-page .form-floating > label::after {
    background-color: transparent !important;
}

.auth-page .form-floating > .form-control:focus ~ label,
.auth-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: #c2c1c1 !important;
}

.auth-page .form-floating .form-control {
    height: 52px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
    text-align: right;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.auth-page .form-floating .form-control:focus {
    border-color: var(--admin-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
    color: #fff;
}

.auth-page .form-floating .form-control:-webkit-autofill,
.auth-page .form-floating .form-control:-webkit-autofill:hover,
.auth-page .form-floating .form-control:-webkit-autofill:focus,
.auth-page .form-floating .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(22, 27, 34, 0.95) inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #c2c1c1;
    transition: background-color 9999s ease-in-out 0s;
}

.auth-page .form-floating .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.auth-page .form-floating label {
    color: #c2c1c1;
    font-size: 0.9rem;
}

.auth-page .form-floating label i {
    margin-left: 0.35rem;
    font-size: 16px;
    color: inherit;
}

.auth-page .password-field-wrap .form-control {
    padding-inline-end: 2.75rem;
}

.auth-page .password-toggle-btn {
    position: absolute;
    inset-inline-end: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0.25rem;
    color: #c2c1c1;
    cursor: pointer;
    line-height: 1;
    z-index: 3;
}

.auth-page .password-toggle-btn:hover,
.auth-page .password-toggle-btn:focus {
    color: #d6d6d6;
    outline: 2px solid rgba(37, 211, 102, 0.35);
    outline-offset: 2px;
}

.auth-page .password-toggle-btn i {
    font-size: 1.15rem;
}

.auth-page .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0;
    margin-bottom: 1.2rem;
}

.auth-page .form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.auth-page .form-check-input:checked {
    background-color: var(--admin-accent);
    border-color: var(--admin-accent);
}

.auth-page .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}

.auth-page .form-check-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
    cursor: pointer;
    margin-right: 25px;
}

.auth-page .btn-primary {
    background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%);
    border: none;
    border-radius: 12px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    width: 100%;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25);
}

.auth-page .btn-primary:hover,
.auth-page .btn-primary:focus {
    background: linear-gradient(135deg, #20ba5a 0%, #1ea952 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

.auth-page .btn-primary i {
    margin-left: 0.5rem;
    font-size: 1.1rem;
}

.auth-page .auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-page .auth-footer p {
    margin-bottom: 0.5rem;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.6);
}

.auth-page .auth-footer p:last-child {
    font-size: 0.8rem;
    margin-bottom: 0;
}

.auth-page .auth-footer a {
    color: var(--admin-accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-page .auth-footer a:hover {
    color: #20ba5a;
    text-decoration: underline;
}

@media (max-width: 576px) {
    .auth-page .auth-wrapper {
        padding: 1rem;
    }

    .auth-page .auth-card {
        padding: 1.5rem 1.25rem;
    }
}

/* ─── Policy pages (privacy, terms) ─── */

body.policy-page {
    direction: rtl;
    background: #0d1117;
    color: var(--admin-text);
    line-height: 1.8;
    font-family: 'Rubik', sans-serif;
}

.policy-page .policy-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.policy-page .policy-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-page .policy-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.policy-page .policy-header .brand {
    color: var(--admin-accent);
}

.policy-page .policy-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0;
}

.policy-page .policy-body h2 {
    font-size: 1.2rem;
    color: var(--admin-accent);
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.policy-page .policy-body p {
    margin-bottom: 1rem;
    color: rgba(230, 237, 243, 0.9);
}

.policy-page .policy-body ul {
    margin-bottom: 1rem;
    padding-right: 1.5rem;
}

.policy-page .policy-body li {
    margin-bottom: 0.35rem;
}

.policy-page .policy-body a {
    color: var(--admin-accent);
    text-decoration: none;
}

.policy-page .policy-body a:hover {
    text-decoration: underline;
}

.policy-page .policy-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.policy-page .policy-footer a {
    color: var(--admin-accent);
    text-decoration: none;
}

.policy-page .policy-footer a:hover {
    text-decoration: underline;
}

.policy-page .policy-footer-meta {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.policy-page .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%);
    color: #fff;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    margin-bottom: 1rem;
    border: none;
    text-decoration: none;
}

.policy-page .btn-back:hover {
    color: #fff;
    opacity: 0.95;
}

/* ─── App shell: no sidebar layout ─── */

body.page-no-sidebar .app-content {
    margin-right: 0 !important;
}

body.page-no-sidebar header.header-main {
    padding-right: 20px !important;
}

body.page-select-instance .app-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-select-instance main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-select-instance main > .container-fluid {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.page-select-instance__center {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0.75rem;
}

/* ─── Instance selection page ─── */

.page-select-instance .instance-selector-card {
    width: 100%;
    margin: 0;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg);
}

.page-select-instance .instance-intro {
    text-align: center;
    margin-bottom: 20px;
}

.page-select-instance .instance-intro-icon {
    font-size: 40px;
    color: var(--admin-accent);
    margin-bottom: 10px;
}

.page-select-instance .instance-intro h2 {
    margin-bottom: 6px;
    color: var(--admin-text);
}

.page-select-instance .instance-card {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #161b22;
}

.page-select-instance .instance-card:hover {
    border-color: var(--admin-accent);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
    transform: translateY(-1px);
    background: #1c2128;
}

.page-select-instance .instance-card.is-selected {
    border-color: var(--admin-accent);
    background: var(--admin-success-bg);
}

.page-select-instance .instance-card h5 {
    color: var(--admin-text);
    margin-bottom: 4px;
}

.page-select-instance .instance-info {
    color: #b7c0cd;
    font-size: 13px;
}

.page-select-instance .instance-info code {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
    margin-top: 2px;
    direction: ltr;
}

.page-select-instance .btn-select {
    background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-dark) 100%);
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
}

.page-select-instance .btn-select:hover {
    background: linear-gradient(135deg, var(--admin-accent-dark) 0%, var(--admin-accent) 100%);
    color: #fff;
}

.page-select-instance .btn-select:disabled {
    background: #484f58;
    cursor: not-allowed;
    opacity: 0.7;
}

.page-select-instance .text-muted {
    color: var(--admin-text-muted) !important;
}

/* ─── Admin panel components ─── */

.admin-page {
    color: var(--admin-text);
}

.admin-page .main-title {
    color: var(--admin-text);
}

.admin-card {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--admin-bg);
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.admin-card-header {
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-bg-muted);
    color: var(--admin-text);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.admin-card-body {
    padding: 1.15rem;
}

.admin-card.is-danger {
    border-color: var(--admin-error-border);
}

.admin-card.is-danger .admin-card-header {
    color: var(--admin-error-text);
    border-bottom-color: var(--admin-error-border);
    background: var(--admin-error-bg);
}

.admin-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--admin-text-muted);
    margin: 1.25rem 0 0.65rem;
}

.admin-section-title:first-child {
    margin-top: 0;
}

.admin-help {
    font-size: 0.85rem;
    color: var(--admin-text-muted);
    background: var(--admin-bg-muted);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
}

.admin-help ul {
    margin: 0.35rem 0 0;
    padding-right: 1.1rem;
}

.admin-flash {
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.admin-flash.is-error {
    background: var(--admin-error-bg);
    border-color: var(--admin-error-border);
    color: var(--admin-error-text);
}

.admin-flash.is-success {
    background: var(--admin-success-bg);
    border-color: var(--admin-success-border);
    color: var(--admin-success-text);
}

.admin-flash.is-info {
    background: var(--admin-bg-muted);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

.admin-status-pill {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
}

.admin-status-pill.is-success {
    background: var(--admin-success-bg);
    color: var(--admin-success-text);
    border-color: var(--admin-success-border);
}

.admin-status-pill.is-failed {
    background: var(--admin-error-bg);
    color: var(--admin-error-text);
    border-color: var(--admin-error-border);
}

.admin-status-pill.is-running {
    background: var(--admin-warning-bg);
    color: var(--admin-warning-text);
    border-color: var(--admin-warning-border);
}

.admin-status-pill.is-neutral {
    background: var(--admin-bg-muted);
    color: var(--admin-text-muted);
}

.admin-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.admin-meta-grid dt {
    color: var(--admin-text-muted);
    margin: 0;
    font-weight: 500;
}

.admin-meta-grid dd {
    margin: 0;
    font-weight: 600;
    color: var(--admin-text);
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

@media (min-width: 576px) {
    .admin-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.admin-stat {
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    background: var(--admin-bg-elevated);
}

.admin-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.15rem;
    color: var(--admin-text);
}

.admin-stat-label {
    font-size: 0.78rem;
    color: var(--admin-text-muted);
    line-height: 1.3;
}

.admin-danger-note {
    font-size: 0.85rem;
    color: var(--admin-error-text);
    background: var(--admin-error-bg);
    border: 1px solid var(--admin-error-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
}

.admin-page .form-check-label,
.admin-page .form-label {
    color: var(--admin-text);
}

.admin-page .form-text,
.admin-page .text-muted {
    color: var(--admin-text-muted) !important;
}

/* ─── Instances admin: create tabs ─── */

.instance-create-tabs-wrap .nav-tabs {
    border-bottom: 1px solid var(--admin-border);
    gap: 6px;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.instance-create-tabs-wrap .nav-tabs .nav-item {
    flex: 1 1 0;
}

.instance-create-tabs-wrap .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    color: var(--admin-text-muted);
    background: transparent;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.instance-create-tabs-wrap .nav-tabs .nav-link:hover {
    color: var(--admin-text);
    background: #1c2128;
    border-color: var(--admin-border);
}

.instance-create-tabs-wrap .nav-tabs .nav-link.active {
    color: var(--admin-text);
    background: #161b22;
    border-color: var(--admin-border) var(--admin-border) #161b22;
}

/* ─── Quick templates admin ─── */

.qt-btn-add {
    background: #21262d;
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
    font-weight: 600;
}

.qt-btn-add:hover,
.qt-btn-add:focus {
    background: #30363d;
    color: #f0f6fc;
    border-color: #8b949e;
}

.qt-kind-badge {
    font-size: 0.75rem;
}

.qt-voice-preview-wrap {
    border: 1px dashed var(--admin-border);
    border-radius: 8px;
    padding: 12px;
    background: #161b22;
}

.qt-voice-preview-wrap.is-active {
    border-color: #58a6ff;
}

#qt-voice-record-btn.recording {
    color: #f85149;
}

.qt-step-panel {
    display: none;
}

.qt-step-panel.is-active {
    display: block;
}

.qt-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 576px) {
    .qt-type-grid {
        grid-template-columns: 1fr;
    }
}

.qt-type-card {
    border: 2px solid var(--admin-border);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    background: #161b22;
    transition: border-color 0.15s, background 0.15s;
}

.qt-type-card:hover {
    border-color: #58a6ff;
    background: #1c2128;
}

.qt-type-card.is-selected {
    border-color: #58a6ff;
    background: #1f2937;
    box-shadow: 0 0 0 1px #58a6ff;
}

.qt-type-card .qt-type-icon {
    font-size: 2rem;
    color: #58a6ff;
    margin-bottom: 8px;
    display: block;
}

.qt-type-card .qt-type-title {
    font-weight: 600;
    color: var(--admin-text);
    margin-bottom: 4px;
}

.qt-type-card .qt-type-desc {
    font-size: 0.8rem;
    color: #8b949e;
    margin: 0;
}

.qt-field-group {
    display: none;
}

.qt-field-group.is-visible {
    display: block;
}

.qt-type-badge-wrap {
    margin-bottom: 12px;
}

.qt-type-badge-wrap .badge {
    font-size: 0.85rem;
    padding: 6px 12px;
}

.qt-step-back {
    font-size: 0.875rem;
    padding: 0;
}

/* ─── Users page: active / deleted view tabs ─── */

.users-view-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    border-radius: 10px;
    background: var(--admin-bg-muted);
    border: 1px solid var(--admin-border);
}

.users-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    color: var(--admin-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.users-view-tab:hover {
    color: var(--admin-text);
    background: rgba(255, 255, 255, 0.06);
}

.users-view-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--admin-accent-dark), var(--admin-accent));
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
}

.users-view-tab.is-active.is-deleted {
    background: linear-gradient(135deg, #b45309, #f59e0b);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.users-view-tab i {
    font-size: 1rem;
    line-height: 1;
}

/* ─── Login page refresh ─── */
body.login-page {
    display: block;
    overflow-x: hidden;
    background: #0b1117;
}
.login-page .login-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(380px, .92fr) minmax(440px, 1.08fr);
}
.login-showcase {
    position: relative;
    isolation: isolate;
    min-height: 100%;
    overflow: hidden;
    padding: clamp(32px, 5vw, 72px);
    display: flex;
    color: #fff;
    background:
        linear-gradient(150deg, rgba(12, 29, 29, .97), rgba(10, 20, 27, .98)),
        #0d171d;
    border-left: 1px solid rgba(255, 255, 255, .06);
}
.login-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.login-showcase-content {
    width: min(100%, 560px);
    margin: auto;
    position: relative;
    z-index: 2;
}
.login-brand {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}
.login-brand-logo {
    min-width: 132px;
    min-height: 52px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
}
.login-brand-logo img {
    display: block;
    max-width: 190px;
    max-height: 90px;
    object-fit: contain;
}
.login-showcase-copy { margin-top: clamp(21px, 3vh, 105px);; }
.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(74, 222, 128, .2);
    border-radius: 999px;
    color: #86efac;
    background: rgba(37, 211, 102, .08);
    font-size: 11px;
    font-weight: 600;
}
.login-showcase-copy h1 {
    margin: 20px 0 14px;
    color: #f7fbf9;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 750;
    line-height: 1.27;
    letter-spacing: -.035em;
}
.login-showcase-copy h1 span { color: #3edd7c; }
.login-showcase-copy > p {
    max-width: 510px;
    margin: 0;
    color: #9fb0b8;
    font-size: 14px;
    line-height: 1.9;
}
.login-feature-list {
    margin-top: clamp(38px, 7vh, 72px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.login-feature-item {
    min-width: 0;
    padding: 13px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    backdrop-filter: blur(8px);
}
.login-feature-item > i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #4ade80;
    background: rgba(37, 211, 102, .11);
    font-size: 17px;
}
.login-feature-item span { min-width: 0; }
.login-feature-item strong,
.login-feature-item small { display: block; }
.login-feature-item strong {
    color: #dfe9e5;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.login-feature-item small {
    margin-top: 3px;
    color: #778993;
    font-size: 8.5px;
    line-height: 1.45;
}
.login-showcase-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}
.login-showcase-orb-one {
    width: 310px;
    height: 310px;
    top: -155px;
    left: -105px;
    background: radial-gradient(circle, rgba(37, 211, 102, .16), transparent 68%);
}
.login-showcase-orb-two {
    width: 390px;
    height: 390px;
    right: -230px;
    bottom: -210px;
    background: radial-gradient(circle, rgba(18, 140, 126, .2), transparent 68%);
}

.login-form-panel {
    min-width: 0;
    padding: clamp(24px, 5vw, 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 80% 12%, rgba(37, 211, 102, .07), transparent 28%),
        #0b1117;
}
.login-page .login-auth-card {
    width: min(100%, 460px);
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 22px;
    background: rgba(20, 28, 35, .78);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
    backdrop-filter: blur(14px);
}
.login-mobile-logo { display: none; }
.login-form-heading { margin-bottom: 30px; }
.login-welcome-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 211, 102, .2);
    border-radius: 12px;
    color: #4ade80;
    background: rgba(37, 211, 102, .1);
    font-size: 21px;
}
.login-page h2.auth-heading {
    margin-bottom: 8px;
    font-size: 1.65rem;
}
.login-page .auth-subtitle {
    margin: 0;
    color: #87969f;
    font-size: 12px;
    line-height: 1.7;
}
.login-page .form-floating { margin-bottom: 14px; }
.login-page .form-floating .form-control {
    height: 56px;
    border-color: rgba(148, 163, 184, .16);
    background: rgba(5, 10, 14, .38);
}
.login-page .form-check {
    margin: 5px 0 20px;
}
.login-page .form-check-label {
    margin-right: 0;
    color: #a5b1b8;
    font-size: 12px;
}
.login-page .btn-primary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
}
.login-page .btn-primary i {
    margin: 0;
    transition: transform .2s ease;
}
.login-page .btn-primary:hover i { transform: translateX(-4px); }
.login-page .auth-footer {
    margin-top: 26px;
    padding-top: 20px;
}
.login-page .auth-footer p { font-size: 10.5px; }
.login-page .auth-help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media (max-width: 980px) {
    .login-page .login-shell { grid-template-columns: 1fr; }
    .login-showcase { display: none; }
    .login-form-panel { min-height: 100vh; min-height: 100dvh; }
    .login-mobile-logo {
        margin: 0 auto 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .login-mobile-logo img {
                max-width: 181px;
        max-height: 72px;
        object-fit: contain;
    }
}
@media (max-width: 576px) {
    .login-form-panel {
        align-items: flex-start;
        padding: 24px 14px;
    }
    .login-page .login-auth-card {
        margin: auto 0;
        padding: 28px 20px;
        border-radius: 18px;
    }
    .login-welcome-icon { display: none; }
    .login-form-heading { margin-bottom: 24px; text-align: center; }
    .login-page h2.auth-heading { font-size: 1.45rem; }
}

#addUserForm input[name="username"],
#addUserForm input[name="password"] {
    background-color: rgba(22, 27, 34, 0.95) !important;
}

#addUserForm input[name="username"]:-webkit-autofill,
#addUserForm input[name="username"]:-webkit-autofill:hover,
#addUserForm input[name="username"]:-webkit-autofill:focus,
#addUserForm input[name="username"]:-webkit-autofill:active,
#addUserForm input[name="password"]:-webkit-autofill,
#addUserForm input[name="password"]:-webkit-autofill:hover,
#addUserForm input[name="password"]:-webkit-autofill:focus,
#addUserForm input[name="password"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(22, 27, 34, 0.95) inset !important;
    -webkit-text-fill-color: #e6edf3 !important;
    caret-color: #e6edf3;
    transition: background-color 9999s ease-in-out 0s;
}

/* Users page layout */
.page-users {
    padding: 0.25rem 0.35rem 1.5rem;
}

.users-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

.users-stats-row.is-compact {
    grid-template-columns: minmax(140px, 220px);
}

@media (max-width: 900px) {
    .users-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.users-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

@media (max-width: 991.98px) {
    .users-layout {
        grid-template-columns: 1fr;
    }

    .users-layout .admin-settings-aside {
        order: -1;
    }
}

.users-list-header {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.users-search-wrap {
    position: relative;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 320px;
}

.users-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    color: var(--admin-text-muted);
    pointer-events: none;
}

.users-search-wrap .form-control {
    padding-right: 2rem;
    background: var(--admin-bg);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

.users-table-wrap {
    border-radius: 0 0 12px 12px;
}

.users-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--admin-text);
    --bs-table-border-color: var(--admin-border);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    color: var(--admin-text);
    margin: 0;
}

.users-table thead th {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom-color: var(--admin-border);
    background: var(--admin-bg-muted);
    white-space: nowrap;
    padding: 0.75rem 1rem;
}

.users-table tbody td {
    padding: 0.85rem 1rem;
    border-color: var(--admin-border);
    vertical-align: middle;
}

.user-identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.22), rgba(37, 211, 102, 0.08));
    border: 1px solid rgba(37, 211, 102, 0.28);
    color: #7ddeab;
    font-size: 0.78rem;
    font-weight: 700;
}

.user-identity-text {
    min-width: 0;
}

.user-name {
    font-weight: 600;
    color: var(--admin-text);
    line-height: 1.3;
}

.user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--admin-text-muted);
}

.user-id-chip {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg-muted);
}

.users-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.users-pill.is-admin {
    background: rgba(248, 81, 73, 0.12);
    color: #ff7b72;
    border-color: rgba(248, 81, 73, 0.28);
}

.users-pill.is-agent {
    background: rgba(110, 118, 129, 0.16);
    color: #c9d1d9;
    border-color: var(--admin-border);
}

.users-pill.is-active {
    background: var(--admin-success-bg);
    color: var(--admin-success-text);
    border-color: var(--admin-success-border);
}

.users-pill.is-inactive {
    background: var(--admin-bg-muted);
    color: var(--admin-text-muted);
    border-color: var(--admin-border);
}

.users-pill.is-deleted {
    background: var(--admin-error-bg);
    color: var(--admin-error-text);
    border-color: var(--admin-error-border);
}

.user-deleted-at {
    font-size: 0.8rem;
    color: var(--admin-text-muted);
    white-space: nowrap;
}

.user-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-start;
}

.user-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.users-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    color: var(--admin-text-muted);
}

.users-empty i {
    font-size: 1.75rem;
    opacity: 0.7;
}

.users-add-card {
    position: sticky;
    top: 0.75rem;
}

.users-add-grid {
    margin-bottom: 0;
}

.users-instances-box {
    max-height: 180px;
    overflow: auto;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: var(--admin-bg-muted);
}

.users-instances-box .form-check {
    margin-bottom: 0.35rem;
}

.users-instances-box .form-check:last-child {
    margin-bottom: 0;
}

/* Instances page layout */
.page-instances {
    padding: 0.25rem 0.35rem 1.5rem;
}

.instances-sync-all-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.instances-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

@media (max-width: 900px) {
    .instances-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.instances-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

@media (max-width: 991.98px) {
    .instances-layout {
        grid-template-columns: 1fr;
    }

    .instances-layout .admin-settings-aside {
        order: -1;
    }
}

.instances-list-header {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.instances-search-wrap {
    position: relative;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 320px;
}

.instances-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    color: var(--admin-text-muted);
    pointer-events: none;
}

.instances-search-wrap .form-control {
    padding-right: 2rem;
    background: var(--admin-bg);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

.instances-table-wrap {
    border-radius: 0 0 12px 12px;
}

.instances-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--admin-text);
    --bs-table-border-color: var(--admin-border);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    color: var(--admin-text);
    margin: 0;
}

.instances-table thead th {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom-color: var(--admin-border);
    background: var(--admin-bg-muted);
    white-space: nowrap;
    padding: 0.75rem 1rem;
}

.instances-table tbody td {
    padding: 0.85rem 1rem;
    border-color: var(--admin-border);
    vertical-align: middle;
}

.instance-identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.instance-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.22), rgba(37, 211, 102, 0.08));
    border: 1px solid rgba(37, 211, 102, 0.28);
    color: #7ddeab;
    font-size: 0.78rem;
    font-weight: 700;
}

.instance-identity-text {
    min-width: 0;
}

.instance-name {
    font-weight: 600;
    color: var(--admin-text);
    line-height: 1.3;
}

.instance-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--admin-text-muted);
}

.instance-meta code {
    color: #9ecbff;
    background: transparent;
    padding: 0;
    font-size: 0.78rem;
}

.instance-id-chip {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg-muted);
}

.instances-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.instances-pill.is-waha {
    background: rgba(37, 211, 102, 0.12);
    color: #7ddeab;
    border-color: rgba(37, 211, 102, 0.28);
}

.instances-pill.is-meta {
    background: rgba(88, 166, 255, 0.12);
    color: #79b8ff;
    border-color: rgba(88, 166, 255, 0.28);
}

.instances-pill.is-noweb {
    background: rgba(110, 118, 129, 0.16);
    color: #c9d1d9;
    border-color: var(--admin-border);
}

.instances-pill.is-gows {
    background: rgba(63, 185, 80, 0.14);
    color: #56d364;
    border-color: rgba(63, 185, 80, 0.28);
}

.instances-pill.is-synced {
    background: rgba(88, 166, 255, 0.12);
    color: #79b8ff;
    border-color: rgba(88, 166, 255, 0.28);
}

.instances-pill.is-unsynced {
    background: rgba(210, 153, 34, 0.14);
    color: #e3b341;
    border-color: rgba(210, 153, 34, 0.28);
}

.instances-pill.is-active {
    background: var(--admin-success-bg);
    color: var(--admin-success-text);
    border-color: var(--admin-success-border);
}

.instances-pill.is-inactive {
    background: var(--admin-bg-muted);
    color: var(--admin-text-muted);
    border-color: var(--admin-border);
}

.instances-pill.is-neutral {
    background: var(--admin-bg-muted);
    color: var(--admin-text-muted);
    border-color: var(--admin-border);
}

.instance-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-start;
}

.instance-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.instances-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    color: var(--admin-text-muted);
}

.instances-empty i {
    font-size: 1.75rem;
    opacity: 0.7;
}

.instances-add-card {
    position: sticky;
    top: 0.75rem;
}

.instances-users-box {
    max-height: 180px;
    overflow: auto;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: var(--admin-bg-muted);
}

.instances-users-box .form-check {
    margin-bottom: 0.35rem;
}

.instances-users-box .form-check:last-child {
    margin-bottom: 0;
}

.admin-modal {
    background: var(--admin-bg);
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
}

.admin-modal .modal-header,
.admin-modal .modal-footer {
    border-color: var(--admin-border);
    background: var(--admin-bg-muted);
}

.admin-modal .modal-title {
    color: var(--admin-text);
}

/* Keep user modals inside the viewport and scroll only their content. */
#editModal .modal-dialog,
#vacationModal .modal-dialog {
    min-height: 0;
}

#editModal .admin-modal,
#vacationModal .admin-modal {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

#editModal .users-modal-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

#editModal .modal-header,
#editModal .modal-footer,
#vacationModal .modal-header,
#vacationModal .modal-footer {
    flex: 0 0 auto;
}

#editModal .modal-body,
#vacationModal .modal-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 211, 102, .55) rgba(255, 255, 255, .05);
}

#editModal .modal-body::-webkit-scrollbar,
#vacationModal .modal-body::-webkit-scrollbar {
    width: 7px;
}

#editModal .modal-body::-webkit-scrollbar-track,
#vacationModal .modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
    border-radius: 999px;
}

#editModal .modal-body::-webkit-scrollbar-thumb,
#vacationModal .modal-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(37, 211, 102, .55);
}

#editModal .modal-body::-webkit-scrollbar-thumb:hover,
#vacationModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 211, 102, .78);
}

@media (max-width: 575.98px) {
    #editModal .modal-dialog,
    #vacationModal .modal-dialog {
        height: calc(100dvh - 1rem);
        margin: .5rem;
    }

    #editModal .admin-modal,
    #vacationModal .admin-modal,
    #editModal .users-modal-form {
        max-height: calc(100dvh - 1rem);
    }

    #editModal .modal-body,
    #vacationModal .modal-body {
        padding: 1rem;
    }
}

.users-edit-tabs {
    border-bottom-color: var(--admin-border);
}

.users-edit-tabs .nav-link {
    color: var(--admin-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.users-edit-tabs .nav-link:hover {
    color: var(--admin-text);
}

.users-edit-tabs .nav-link.active {
    color: var(--admin-accent);
    background: transparent;
    border-bottom-color: var(--admin-accent);
}

.users-schedule-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--admin-text);
    --bs-table-border-color: var(--admin-border);
    color: var(--admin-text);
}

.users-schedule-table thead th {
    background: var(--admin-bg-muted);
    color: var(--admin-text-muted);
    font-size: 0.8rem;
}

/* Enhanced instances management */
.instances-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin-bottom: 1.15rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(37, 211, 102, .22);
    border-radius: 18px;
    background: radial-gradient(circle at 8% 10%, rgba(37, 211, 102, .15), transparent 12rem), linear-gradient(115deg, rgba(18, 140, 126, .2), rgba(22, 27, 34, .95) 48%, rgba(32, 44, 51, .9));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}
.instances-hero::after { content: ''; position: absolute; inset-inline-end: -45px; top: -75px; width: 210px; height: 210px; border: 35px solid rgba(37, 211, 102, .045); border-radius: 50%; pointer-events: none; }
.instances-hero > * { position: relative; z-index: 1; }
.instances-hero-eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .45rem; color: #7ddeab; font-size: .75rem; font-weight: 700; }
.instances-hero .main-title { color: #fff; font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important; }
.instances-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.instances-config-status { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .7rem; border: 1px solid; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.instances-config-status.is-ready { border-color: rgba(37,211,102,.28); background: rgba(37,211,102,.1); color: #86efac; }
.instances-config-status.is-missing { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.1); color: #fcd34d; }

.instances-stat { --instance-stat-color: #79b8ff; position: relative; overflow: hidden; min-height: 108px; padding: 1rem 1.05rem !important; border-color: color-mix(in srgb, var(--instance-stat-color) 19%, var(--admin-border)) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--instance-stat-color) 8%, transparent), rgba(22,27,34,.9)) !important; transition: transform .2s ease, box-shadow .2s ease; }
.instances-stat::after { content: ''; position: absolute; width: 85px; height: 85px; inset-inline-end: -35px; bottom: -45px; border-radius: 50%; background: var(--instance-stat-color); opacity: .06; }
.instances-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.instances-stat-icon { float: left; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--instance-stat-color) 24%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--instance-stat-color) 11%, transparent); color: var(--instance-stat-color); font-size: 1.15rem; }
.instances-stat .admin-stat-value { color: #fff; font-size: 1.55rem; line-height: 1.2; }
.instances-stat .admin-stat-label { margin-top: .4rem; color: var(--admin-text-muted); font-size: .75rem; }
.instances-stat.is-active { --instance-stat-color: #67e89b; }
.instances-stat.is-synced { --instance-stat-color: #a78bfa; }
.instances-stat.is-users { --instance-stat-color: #fbbf24; }

.instances-list-card { overflow: hidden; box-shadow: 0 14px 36px rgba(0,0,0,.16); }
.instances-list-card .admin-card-header { background: linear-gradient(90deg, rgba(37,211,102,.06), transparent 45%); }
.instances-table tbody tr { transition: background-color .16s ease; }
.instances-table tbody tr:hover { background: rgba(37, 211, 102, .032); }
.instances-create-card { overflow: hidden; border-color: rgba(37,211,102,.2); box-shadow: 0 14px 36px rgba(0,0,0,.17); }
.instances-create-card .admin-card-header { background: linear-gradient(115deg, rgba(37,211,102,.12), rgba(18,140,126,.035)); }
.instances-create-card .admin-card-header > i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(37,211,102,.22); border-radius: 11px; background: rgba(37,211,102,.1); color: #7ddeab; font-size: 1.15rem; }
.instances-create-card .btn-primary { min-height: 44px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 8px 20px rgba(18,140,126,.2); }
.instances-create-card .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

#editModal .instances-modal-form, #deleteModal .instances-modal-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: calc(100dvh - 2rem); overflow: hidden; }
#editModal .instances-modal-form .modal-body, #deleteModal .instances-modal-form .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(37,211,102,.55) rgba(255,255,255,.04); }

@media (max-width: 700px) {
    .instances-hero { align-items: flex-start; padding: 1.15rem; }
    .instances-hero-actions { width: 100%; justify-content: flex-start; }
}

/* Users table details */
.users-table th:first-child { width: 38%; }
.users-table th:nth-child(2), .users-table th:nth-child(3) { width: 14%; }
.users-table th:last-child { min-width: 210px; }
.users-table tbody tr { position: relative; transition: transform .16s ease; }
.users-table tbody tr:hover { transform: translateY(-1px); }
.users-table tbody tr:hover td:first-child { box-shadow: inset -3px 0 #58a6ff; }
.user-avatar.is-admin-avatar { border-color: rgba(167,139,250,.32); background: linear-gradient(145deg,rgba(167,139,250,.24),rgba(88,166,255,.08)); color: #c4b5fd; }
.user-name { color: #edf3f7; font-size: .82rem; }
.user-meta > span:first-child { color: #8293a0; font-size: .7rem; }
.user-id-chip { border-color: rgba(148,163,184,.14); background: rgba(255,255,255,.03); color: #74838d; font-size: .64rem; }
.users-pill { gap: .3rem; min-height: 27px; padding: .22rem .62rem; font-size: .68rem; box-shadow: inset 0 1px rgba(255,255,255,.035); }
.users-pill i { font-size: .8rem; }
.users-pill.is-admin { background: rgba(167,139,250,.12); color: #c4b5fd; border-color: rgba(167,139,250,.28); }
.users-pill.is-agent { background: rgba(88,166,255,.1); color: #93c5fd; border-color: rgba(88,166,255,.22); }
.user-actions .btn-outline-warning { border-color: rgba(251,191,36,.28); color: #fcd34d; background: rgba(251,191,36,.035); }
.user-actions .btn-outline-warning:hover { border-color: #fbbf24; color: #17130a; background: #fbbf24; }
.user-actions .btn-outline-danger { border-color: rgba(248,81,73,.28); background: rgba(248,81,73,.035); }
.user-actions form { margin: 0; }
.users-empty-row:hover { transform: none !important; }
.users-empty-row:hover td:first-child { box-shadow: none !important; }

@media (max-width: 767.98px) {
    .users-table th:first-child { width: auto; }
    .user-actions .btn { min-width: 36px; padding-inline: .55rem; }
}

/* Instances list: richer table and corrected RTL search field */
.instances-list-header {
    padding: 1.1rem 1.2rem;
    gap: 1rem;
}

.instances-list-header > .d-flex > i {
    width: 40px;
    height: 40px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(37, 211, 102, .24);
    border-radius: 12px;
    color: #67e89b;
    background: rgba(37, 211, 102, .1);
    font-size: 1.2rem;
}

.instances-search-wrap {
    min-width: min(100%, 290px);
}

.instances-search-wrap i {
    right: auto !important;
    left: .85rem !important;
    z-index: 2;
    color: #7ddeab;
    font-size: 1rem;
}

.instances-search-wrap .form-control {
    min-height: 42px;
    padding-right: .9rem !important;
    padding-left: 2.6rem !important;
    border-color: rgba(148, 163, 184, .16);
    border-radius: 11px;
    background: rgba(7, 13, 17, .38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.instances-search-wrap .form-control:focus {
    border-color: rgba(37, 211, 102, .48);
    background: rgba(7, 13, 17, .62);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .09);
}

.instances-search-wrap .form-control::placeholder { color: #74828d; opacity: 1; }

.instances-table-wrap {
    padding: 0 .75rem .75rem;
    background: rgba(8, 13, 17, .16);
}

.instances-table {
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.instances-table thead th {
    padding: .7rem .9rem;
    border: 0;
    background: transparent;
    color: #81909b;
    font-size: .7rem;
    letter-spacing: 0;
}

.instances-table tbody td {
    padding: .85rem .9rem;
    border-top: 1px solid rgba(148, 163, 184, .1);
    border-bottom: 1px solid rgba(148, 163, 184, .1);
    background: rgba(255, 255, 255, .022);
}

.instances-table tbody td:first-child {
    border-right: 1px solid rgba(148, 163, 184, .1);
    border-radius: 0 12px 12px 0;
}

.instances-table tbody td:last-child {
    border-left: 1px solid rgba(148, 163, 184, .1);
    border-radius: 12px 0 0 12px;
}

.instances-table tbody tr:hover td {
    border-color: rgba(37, 211, 102, .17);
    background: rgba(37, 211, 102, .045);
}

.instance-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(37,211,102,.22), rgba(18,140,126,.08));
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.12);
}

.instance-name { color: #f0f5f8; }
.instance-meta { gap: .35rem; }
.instance-id-chip { border-color: rgba(148,163,184,.16); background: rgba(255,255,255,.035); }

.instances-pill {
    gap: .3rem;
    min-height: 26px;
    padding: .23rem .6rem;
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.instance-actions { flex-wrap: nowrap; }
.instance-actions .btn { min-height: 34px; justify-content: center; border-radius: 9px; }
.instance-actions .btn-primary { border-color: transparent; background: linear-gradient(135deg, #25d366, #159447); box-shadow: 0 6px 14px rgba(37,211,102,.12); }
.instance-actions .btn-outline-danger { width: 38px; padding-inline: 0; background: rgba(248,81,73,.035); }

@media (max-width: 767.98px) {
    .instances-list-header { align-items: stretch; }
    .instances-search-wrap { width: 100%; max-width: none; }
    .instances-table-wrap { padding-inline: .35rem; }
}

/* Create-instance panel */
.instances-create-card .admin-card-body { padding: 1rem; }
.instances-create-form { display: flex; flex-direction: column; gap: .85rem; }
.instances-form-section { padding: .9rem; border: 1px solid rgba(148,163,184,.12); border-radius: 13px; background: rgba(7,13,17,.22); }
.instances-form-section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; color: #dce5ea; font-size: .78rem; font-weight: 700; }
.instances-form-section-title > span { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(37,211,102,.28); border-radius: 8px; background: rgba(37,211,102,.1); color: #7ddeab; font-size: .7rem; }
.instances-create-form .form-label { margin-bottom: .4rem; color: #aeb9c1; font-size: .72rem; font-weight: 600; }
.instances-input-wrap, .instances-select-wrap { position: relative; }
.instances-input-wrap > i { position: absolute; z-index: 2; top: 50%; right: auto; left: .75rem; transform: translateY(-50%); color: #6f807f; pointer-events: none; }
.instances-select-wrap > i { position: absolute; z-index: 2; top: 50%; right: auto; left: .75rem; transform: translateY(-50%); color: #6f807f; pointer-events: none; }
.instances-input-wrap .form-control { min-height: 43px; padding-right: .8rem !important; padding-left: 2.6rem !important; border-color: rgba(148,163,184,.14); border-radius: 10px; background-color: rgba(5,10,14,.42); }
.instances-select-wrap .form-select { min-height: 43px; padding-right: .8rem; padding-left: 2.35rem; border-color: rgba(148,163,184,.14); border-radius: 10px; background-color: rgba(5,10,14,.42); background-image: none !important; text-align: right; direction: rtl; font-size: .7rem; cursor: pointer; }
.instances-input-wrap.is-ltr > i { right: auto; left: .75rem; }
.instances-input-wrap.is-ltr .form-control { padding-right: .8rem !important; padding-left: 2.6rem !important; text-align: left !important; direction: ltr !important; }
.instances-input-wrap .form-control:focus, .instances-select-wrap .form-select:focus { border-color: rgba(37,211,102,.46); box-shadow: 0 0 0 3px rgba(37,211,102,.08); }
.instances-create-form .form-text { display: flex; align-items: flex-start; gap: .3rem; margin-top: .45rem; color: #71808a; font-size: .66rem; line-height: 1.55; }
.instances-create-form .form-text i { margin-top: .1rem; color: #7ddeab; }

.instances-active-control { display: flex; align-items: center; gap: .65rem; padding: .75rem .85rem; border: 1px solid rgba(37,211,102,.14); border-radius: 12px; background: linear-gradient(90deg, rgba(37,211,102,.075), rgba(255,255,255,.012)); }
.instances-active-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; background: rgba(37,211,102,.11); color: #72e9a1; }
.instances-active-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.instances-active-copy strong { color: #dfe7eb; font-size: .75rem; }
.instances-active-copy small { color: #78868f; font-size: .64rem; }
.instances-active-control .form-switch { padding-right: 0; padding-left: 2.5em; }
.instances-active-control .form-check-input { float: left; margin-left: -2.5em; }

.instances-users-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.instances-users-count { padding: .18rem .5rem; border: 1px solid rgba(148,163,184,.13); border-radius: 999px; color: #8d9aa3; background: rgba(255,255,255,.025); font-size: .62rem; white-space: nowrap; }
.instances-create-form .instances-users-box { max-height: 190px; padding: .4rem; border-color: rgba(148,163,184,.12); background: rgba(3,8,11,.28); scrollbar-width: thin; scrollbar-color: rgba(37,211,102,.45) transparent; }
.instances-create-form .instances-users-box .form-check { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .48rem .55rem; border-radius: 8px; transition: background-color .16s ease; }
.instances-create-form .instances-users-box .form-check:hover { background: rgba(37,211,102,.055); }
.instances-create-form .instances-users-box .form-check-input { flex: 0 0 auto; margin: 0; }
.instances-create-form .instances-users-box .form-check-label { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: .5rem; color: #cbd4d9; font-size: .7rem; cursor: pointer; }
.instances-create-form .instances-users-box .form-check-label .text-muted { color: #697780 !important; font-size: .62rem; }

.instances-create-card .instances-create-submit { display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: .4rem; min-height: 48px; padding: .4rem .65rem; font-size: .78rem; font-weight: 700; }
.instances-create-submit > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.14); }
.instances-create-submit > .ti-arrow-left { justify-self: end; transition: transform .18s ease; }
.instances-create-submit:hover > .ti-arrow-left { transform: translateX(-3px); }

/* Enhanced users management */
.users-hero { position: relative; overflow: hidden; align-items: center; padding: 1.35rem 1.5rem; border: 1px solid rgba(88,166,255,.2); border-radius: 18px; background: radial-gradient(circle at 8% 5%, rgba(88,166,255,.13), transparent 12rem), linear-gradient(115deg, rgba(35,84,130,.2), rgba(22,27,34,.96) 52%, rgba(32,44,51,.9)); box-shadow: 0 16px 38px rgba(0,0,0,.18); }
.users-hero::after { content: ''; position: absolute; inset-inline-end: -45px; top: -75px; width: 210px; height: 210px; border: 35px solid rgba(88,166,255,.04); border-radius: 50%; pointer-events: none; }
.users-hero > * { position: relative; z-index: 1; }
.users-hero-eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .45rem; color: #8cc8ff; font-size: .75rem; font-weight: 700; }
.users-hero .main-title { color: #fff; font-size: clamp(1.35rem,2.5vw,1.75rem) !important; }
.users-hero .users-view-tabs { padding: .3rem; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(5,10,14,.32); backdrop-filter: blur(8px); }
.users-hero .users-view-tab { border-radius: 9px; }

.users-stat { --users-stat-color: #79b8ff; position: relative; overflow: hidden; min-height: 108px; padding: 1rem 1.05rem !important; border-color: color-mix(in srgb,var(--users-stat-color) 19%,var(--admin-border)) !important; background: linear-gradient(135deg,color-mix(in srgb,var(--users-stat-color) 8%,transparent),rgba(22,27,34,.9)) !important; transition: transform .2s ease,box-shadow .2s ease; }
.users-stat::after { content: ''; position: absolute; width: 85px; height: 85px; inset-inline-end: -35px; bottom: -45px; border-radius: 50%; background: var(--users-stat-color); opacity: .06; }
.users-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.users-stat-icon { float: left; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--users-stat-color) 24%,transparent); border-radius: 12px; background: color-mix(in srgb,var(--users-stat-color) 11%,transparent); color: var(--users-stat-color); font-size: 1.15rem; }
.users-stat .admin-stat-value { color: #fff; font-size: 1.55rem; line-height: 1.2; }
.users-stat .admin-stat-label { margin-top: .4rem; color: var(--admin-text-muted); font-size: .75rem; }
.users-stat.is-active { --users-stat-color: #67e89b; }
.users-stat.is-inactive { --users-stat-color: #fbbf24; }
.users-stat.is-whatsapp { --users-stat-color: #a78bfa; }

.users-list-card { overflow: hidden; box-shadow: 0 14px 36px rgba(0,0,0,.16); }
.users-list-card .admin-card-header { padding: 1.1rem 1.2rem; background: linear-gradient(90deg,rgba(88,166,255,.06),transparent 45%); }
.users-list-header > .d-flex > i { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(88,166,255,.22); border-radius: 12px; color: #8cc8ff; background: rgba(88,166,255,.09); font-size: 1.2rem; }
.users-search-wrap i { right: auto !important; left: .85rem !important; z-index: 2; color: #8cc8ff; }
.users-search-wrap .form-control { min-height: 42px; padding-right: .9rem !important; padding-left: 2.6rem !important; border-color: rgba(148,163,184,.16); border-radius: 11px; background: rgba(7,13,17,.38); }
.users-search-wrap .form-control:focus { border-color: rgba(88,166,255,.46); background: rgba(7,13,17,.6); box-shadow: 0 0 0 3px rgba(88,166,255,.08); }
.users-table-wrap { padding: 0 .75rem .75rem; background: rgba(8,13,17,.16); }
.users-table { min-width: 650px; border-collapse: separate; border-spacing: 0 8px; }
.users-table thead th { padding: .7rem .9rem; border: 0; background: transparent; color: #81909b; font-size: .7rem; letter-spacing: 0; }
.users-table tbody td { padding: .85rem .9rem; border-top: 1px solid rgba(148,163,184,.1); border-bottom: 1px solid rgba(148,163,184,.1); background: rgba(255,255,255,.022); }
.users-table tbody td:first-child { border-right: 1px solid rgba(148,163,184,.1); border-radius: 0 12px 12px 0; }
.users-table tbody td:last-child { border-left: 1px solid rgba(148,163,184,.1); border-radius: 12px 0 0 12px; }
.users-table tbody tr:hover td { border-color: rgba(88,166,255,.17); background: rgba(88,166,255,.04); }
.user-avatar { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg,rgba(88,166,255,.2),rgba(37,211,102,.08)); box-shadow: inset 0 1px rgba(255,255,255,.05),0 6px 16px rgba(0,0,0,.12); }
.user-actions { flex-wrap: nowrap; }
.user-actions .btn { min-height: 34px; justify-content: center; border-radius: 9px; }
.user-actions .btn-primary { border-color: transparent; background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 6px 14px rgba(37,99,235,.14); }

.users-create-card { overflow: hidden; border-color: rgba(88,166,255,.18); box-shadow: 0 14px 36px rgba(0,0,0,.17); }
.users-create-card .admin-card-header { background: linear-gradient(115deg,rgba(88,166,255,.11),rgba(37,211,102,.025)); }
.users-create-card .admin-card-header > i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(88,166,255,.22); border-radius: 11px; background: rgba(88,166,255,.09); color: #8cc8ff; font-size: 1.15rem; }
.users-create-form .form-label { color: #aeb9c1; font-size: .72rem; font-weight: 600; }
.users-create-form .form-control,.users-create-form .form-select { min-height: 43px; border-color: rgba(148,163,184,.14); border-radius: 10px; background-color: rgba(5,10,14,.42); }
.users-create-form .form-control:focus,.users-create-form .form-select:focus { border-color: rgba(88,166,255,.44); box-shadow: 0 0 0 3px rgba(88,166,255,.08); }
.users-create-form .users-instances-box { scrollbar-width: thin; scrollbar-color: rgba(88,166,255,.45) transparent; }
.users-create-card .users-create-submit { display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: .4rem; min-height: 48px; padding: .4rem .65rem; border: 0; border-radius: 10px; background: linear-gradient(135deg,#3b82f6,#2563eb); font-size: .78rem; font-weight: 700; box-shadow: 0 8px 20px rgba(37,99,235,.2); }
.users-create-submit > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.14); }
.users-create-submit > .ti-arrow-left { justify-self: end; transition: transform .18s ease; }
.users-create-submit:hover > .ti-arrow-left { transform: translateX(-3px); }

.users-create-card .admin-card-body { padding: 1rem; }
.users-create-form { display: flex; flex-direction: column; gap: .85rem; }
.users-form-section { padding: .9rem; border: 1px solid rgba(148,163,184,.12); border-radius: 13px; background: rgba(7,13,17,.22); }
.users-form-section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; color: #dce5ea; font-size: .78rem; font-weight: 700; }
.users-form-section-title > span { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(88,166,255,.27); border-radius: 8px; background: rgba(88,166,255,.1); color: #93c5fd; font-size: .7rem; }
.users-input-wrap,.users-select-wrap { position: relative; }
.users-input-wrap > i,.users-select-wrap > i { position: absolute; z-index: 2; top: 50%; right: auto; left: .75rem; transform: translateY(-50%); color: #71808d; pointer-events: none; }
.users-input-wrap .form-control { padding-right: .8rem !important; padding-left: 2.6rem !important; }
.users-input-wrap.is-ltr .form-control { text-align: left !important; direction: ltr !important; }
.users-select-wrap .form-select { padding-right: .8rem !important; padding-left: 2.6rem !important; background-image: none !important; cursor: pointer; }
.users-input-wrap:focus-within > i,.users-select-wrap:focus-within > i { color: #8cc8ff; }
.users-input-wrap.has-password-toggle > i { right: .75rem; left: auto; }
.users-input-wrap.has-password-toggle .form-control { padding-right: 2.6rem !important; padding-left: 2.7rem !important; }
.users-password-toggle { position: absolute; z-index: 3; top: 50%; left: .45rem; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #788894; background: transparent; transform: translateY(-50%); transition: color .16s ease,background-color .16s ease; }
.users-password-toggle:hover { color: #93c5fd; background: rgba(88,166,255,.09); }
.users-password-toggle:focus-visible { outline: 2px solid rgba(88,166,255,.45); outline-offset: 1px; }

.users-active-control { display: flex; align-items: center; gap: .65rem; padding: .72rem .8rem; border: 1px solid rgba(88,166,255,.14); border-radius: 11px; background: linear-gradient(90deg,rgba(88,166,255,.07),rgba(255,255,255,.01)); }
.users-active-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; background: rgba(88,166,255,.1); color: #93c5fd; }
.users-active-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.users-active-copy strong { color: #dfe7eb; font-size: .74rem; }
.users-active-copy small { color: #78868f; font-size: .61rem; line-height: 1.45; }
.users-active-control .form-switch { padding-right: 0; padding-left: 2.5em; }
.users-active-control .form-check-input { float: left; margin-left: -2.5em; }

.users-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.users-options-count { padding: .18rem .5rem; border: 1px solid rgba(148,163,184,.13); border-radius: 999px; color: #8d9aa3; background: rgba(255,255,255,.025); font-size: .62rem; white-space: nowrap; }
.users-create-form .users-instances-box { padding: .4rem; border-color: rgba(148,163,184,.12); background: rgba(3,8,11,.28); }
.users-create-form .users-instances-box .form-check { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .48rem .55rem; border-radius: 8px; transition: background-color .16s ease; }
.users-create-form .users-instances-box .form-check:hover { background: rgba(88,166,255,.055); }
.users-create-form .users-instances-box .form-check-input { flex: 0 0 auto; margin: 0; }
.users-create-form .users-instances-box .form-check-label { flex: 1; color: #cbd4d9; font-size: .7rem; cursor: pointer; }
.users-create-form .form-text { display: flex; align-items: flex-start; gap: .3rem; color: #71808a; font-size: .65rem; line-height: 1.55; }
.users-create-form .form-text i { margin-top: .08rem; color: #8cc8ff; }

@media (max-width: 700px) {
    .users-hero { align-items: flex-start; padding: 1.15rem; }
    .users-hero .users-view-tabs { width: 100%; }
    .users-search-wrap { width: 100%; max-width: none; }
    .users-table-wrap { padding-inline: .35rem; }
}

@media (max-width: 640px) {
    .user-actions .btn span {
        display: none;
    }
}

/* ─── Conversation settings page ─── */

.page-conversation-settings {
    padding: 0.25rem 0.35rem 1.5rem;
}

.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.35rem;
}

.admin-page-subtitle {
    color: var(--admin-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 42rem;
}

.admin-instance-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: 0.45rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg-muted);
    color: var(--admin-text);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.admin-flash-stack {
    margin-bottom: 1rem;
}

.admin-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .admin-settings-layout {
        grid-template-columns: 1fr;
    }
}

.admin-settings-section .admin-card-header {
    align-items: flex-start;
}

.admin-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--admin-text);
}

.admin-card-desc {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--admin-text-muted);
}

.admin-field-block {
    margin-bottom: 1.15rem;
}

.admin-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
    margin-bottom: 1.15rem;
}

@media (max-width: 700px) {
    .admin-field-grid {
        grid-template-columns: 1fr;
    }
}

.admin-subsection + .admin-subsection {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--admin-border);
}

.admin-switch-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.admin-switch-list .form-check {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: var(--admin-bg-muted);
}

.admin-help-details {
    margin-top: 0.35rem;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: var(--admin-bg-muted);
    padding: 0.55rem 0.85rem;
    color: var(--admin-text-muted);
    font-size: 0.85rem;
}

.admin-help-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--admin-text);
    list-style: none;
}

.admin-help-details summary::-webkit-details-marker {
    display: none;
}

.admin-help-details summary::after {
    content: '▾';
    float: left;
    opacity: 0.7;
}

.admin-help-details[open] summary {
    margin-bottom: 0.45rem;
}

.admin-help-details ul {
    margin: 0;
    padding-right: 1.1rem;
}

.admin-settings-actions {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    justify-content: flex-start;
    margin: 0.25rem 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: rgba(22, 27, 34, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.admin-qr-preview {
    margin-top: 0.85rem;
    text-align: center;
}

.admin-qr-preview img {
    width: 220px;
    max-width: 100%;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}

.admin-pairing-code {
    margin-top: 0.85rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.admin-settings-aside .admin-card {
    position: sticky;
    top: 0.75rem;
}

.admin-settings-aside .admin-card + .admin-card {
    position: static;
}

.page-conversation-settings {
    scroll-behavior: smooth;
}