/* =====================================================================
   TeamLeads — Auth + Sync Users
   Uses ONLY UBold "retro" theme tokens (Bootstrap CSS variables).
   No hard-coded hex colours — everything derives from the active skin,
   so it stays correct in light/dark and if the palette changes.
   Icons are inline SVG masks (no icon-font dependency).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Motion tokens + reduced-motion guard
   --------------------------------------------------------------------- */
:root {
    --al-ease: cubic-bezier(.22, 1, .36, 1);
    --al-fast: .18s;
    --al-base: .28s;
    --al-slow: .45s;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   2. Auth card entrance
   --------------------------------------------------------------------- */
.authentication-bg .card {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .06);
    animation: alCardIn var(--al-slow) var(--al-ease) both;
}

@keyframes alCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------------------------------------------------------------------
   3. Input groups
   Theme-tinted addons, visible icons, primary highlight on focus.
   --------------------------------------------------------------------- */
.input-group .input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    transition: color var(--al-fast) var(--al-ease), background-color var(--al-fast) var(--al-ease), border-color var(--al-fast) var(--al-ease);
}

#togglePassword {
    border-color: var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    transition: color var(--al-fast) var(--al-ease), background-color var(--al-fast) var(--al-ease);
}

    #togglePassword:hover {
        color: var(--bs-primary);
        background-color: var(--bs-primary-bg-subtle);
    }

.input-group:focus-within .input-group-text,
.input-group:focus-within #togglePassword {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.input-group .form-control {
    transition: border-color var(--al-fast) var(--al-ease), box-shadow var(--al-fast) var(--al-ease);
}

    .input-group .form-control:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .15rem var(--bs-primary-bg-subtle);
    }

/* ---------------------------------------------------------------------
   4. Font-independent icons (SVG masks take colour from currentColor)
   --------------------------------------------------------------------- */
.al-ico::before,
.al-toggle::before,
.al-ico-inline::before {
    content: "";
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--al-fast) var(--al-ease);
}

.al-ico-inline {
    display: inline-flex;
    vertical-align: -2px;
    margin-right: .15rem;
    color: var(--bs-secondary-color);
}

    .al-ico-inline::before {
        width: .95rem;
        height: .95rem;
    }

/* id-badge */
.al-ico[data-ico="badge"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M6 16c0-1.5 1.5-2.5 3-2.5s3 1 3 2.5'/%3E%3Cline x1='15' y1='9' x2='18' y2='9'/%3E%3Cline x1='15' y1='13' x2='18' y2='13'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M6 16c0-1.5 1.5-2.5 3-2.5s3 1 3 2.5'/%3E%3Cline x1='15' y1='9' x2='18' y2='9'/%3E%3Cline x1='15' y1='13' x2='18' y2='13'/%3E%3C/svg%3E");
}

/* lock */
.al-ico[data-ico="lock"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

/* search */
.al-ico[data-ico="search"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* shield-lock */
.al-ico-inline[data-ico="shield"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z'/%3E%3Crect x='9.5' y='11' width='5' height='4' rx='1'/%3E%3Cpath d='M10.5 11v-1a1.5 1.5 0 0 1 3 0v1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z'/%3E%3Crect x='9.5' y='11' width='5' height='4' rx='1'/%3E%3Cpath d='M10.5 11v-1a1.5 1.5 0 0 1 3 0v1'/%3E%3C/svg%3E");
}

/* eye (password hidden) */
.al-toggle[data-ico="eye"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* eye-off (password visible) */
.al-toggle[data-ico="eye-off"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.9 10.9 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.3 4.1'/%3E%3Cpath d='M6.6 6.6A17.6 17.6 0 0 0 2 12s3.5 7 10 7a10.9 10.9 0 0 0 4-.8'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.9 10.9 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.3 4.1'/%3E%3Cpath d='M6.6 6.6A17.6 17.6 0 0 0 2 12s3.5 7 10 7a10.9 10.9 0 0 0 4-.8'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   5. Primary button — subtle lift, no colour change
   --------------------------------------------------------------------- */
.btn {
    transition: transform var(--al-fast) var(--al-ease), box-shadow var(--al-fast) var(--al-ease), filter var(--al-fast) var(--al-ease);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 .35rem .9rem var(--bs-primary-bg-subtle);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn:disabled {
    opacity: .65;
}

/* ---------------------------------------------------------------------
   6. Step transitions (credentials <-> OTP)
   --------------------------------------------------------------------- */
#step-credentials:not(.d-none),
#step-otp:not(.d-none) {
    animation: alStepIn var(--al-base) var(--al-ease) both;
}

@keyframes alStepIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#otpCode {
    transition: box-shadow var(--al-fast) var(--al-ease);
}

    #otpCode:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .2rem var(--bs-primary-bg-subtle);
    }

/* =====================================================================
   UNIFIED CHECKBOX  (.al-cb)
   Styles the native <input type="checkbox"> directly via appearance:none.
   No sibling span, no load-order fragility, no UBold dependency.
   Resting border uses --bs-border-color (clearly visible on white);
   checked state fills with --bs-primary (theme colour).
   ===================================================================== */
input[type="checkbox"].al-cb {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    box-sizing: border-box !important;
    border: 1.5px solid var(--bs-border-color, #d6cfc7) !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 13px 13px !important;
    background-image: none !important;
    vertical-align: middle;
    box-shadow: none !important;
    transition: background-color var(--al-fast) var(--al-ease), border-color var(--al-fast) var(--al-ease);
}

    input[type="checkbox"].al-cb:hover {
        border-color: var(--bs-primary, rgb(138, 90, 68)) !important;
    }

    input[type="checkbox"].al-cb:checked {
        background-color: var(--bs-primary, rgb(138, 90, 68)) !important;
        border-color: var(--bs-primary, rgb(138, 90, 68)) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E") !important;
    }

    input[type="checkbox"].al-cb:focus {
        outline: none;
        border-color: var(--bs-primary, rgb(138, 90, 68)) !important;
        box-shadow: 0 0 0 .2rem var(--bs-primary-bg-subtle, rgba(138, 90, 68, .2)) !important;
    }

/* =====================================================================
   SYNC USERS MODAL  (sync-users.js toggles .al-open)
   ===================================================================== */
#syncUsersModal.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    overflow: auto;
    background-color: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity var(--al-base) var(--al-ease);
}

    #syncUsersModal.modal.al-open {
        display: block;
        opacity: 1;
    }

#syncUsersModal .modal-dialog {
    transform: translateY(-18px) scale(.98);
    opacity: 0;
    transition: transform var(--al-base) var(--al-ease), opacity var(--al-base) var(--al-ease);
}

#syncUsersModal.al-open .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

#syncUsersModal .modal-content {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .18);
    border-radius: 1rem;
}

#syncUsersModal .modal-header,
#syncUsersModal .modal-footer {
    border-color: var(--bs-border-color);
}

#syncUsersModal .modal-body {
    padding-top: 1rem;
}

/* --- Toolbar: search + bulk role --- */
.al-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.al-toolbar-search {
    flex: 1 1 200px;
    min-width: 180px;
}

.al-toolbar-bulk {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

    .al-toolbar-bulk .form-select {
        width: auto;
        min-width: 160px;
    }

/* --- Count bar (replaces KPI cards) --- */
.al-countbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .35rem 0 .6rem;
}

.al-checkall {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    user-select: none;
}

.al-count-text {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.al-count-pills {
    margin-left: auto;
    display: inline-flex;
    gap: .4rem;
}

.al-cpill {
    font-size: .72rem;
    padding: .2rem .55rem;
    border-radius: 50rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

    .al-cpill b {
        color: var(--bs-emphasis-color);
        margin-left: .15rem;
    }

.al-cpill--ok {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
}

    .al-cpill--ok b {
        color: var(--bs-success-text-emphasis);
    }

.al-cpill--warn {
    color: var(--bs-warning-text-emphasis);
    background-color: var(--bs-warning-bg-subtle);
}

    .al-cpill--warn b {
        color: var(--bs-warning-text-emphasis);
    }

/* --- User card list (fresh) --- */
.al-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 48vh;
    overflow-y: auto;
    padding: .15rem .4rem .15rem .15rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}

    /* styled slim scrollbar (theme tokens) */
    .al-list::-webkit-scrollbar {
        width: 8px;
    }

    .al-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .al-list::-webkit-scrollbar-thumb {
        background: var(--bs-border-color);
        border-radius: 50rem;
    }

        .al-list::-webkit-scrollbar-thumb:hover {
            background: var(--bs-secondary-color);
        }

#syncRows .al-card {
    display: grid;
    grid-template-columns: 20px 42px 1fr 130px 170px;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: .75rem !important;
    background: #fff !important;
    transition: border-color var(--al-fast) var(--al-ease), background-color var(--al-fast) var(--al-ease), box-shadow var(--al-fast) var(--al-ease);
    animation: alRowIn var(--al-fast) var(--al-ease) both;
}

    #syncRows .al-card:hover {
        border-color: var(--bs-primary) !important;
    }

    #syncRows .al-card.is-selected {
        border-color: var(--bs-primary) !important;
        background: var(--bs-primary-bg-subtle) !important;
    }

@keyframes alRowIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.al-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--bs-primary);
    background: #fff;
    border: 1.5px solid var(--bs-primary);
}

    .al-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.al-card-id {
    min-width: 0;
}

.al-user-name {
    font-weight: 600;
    font-size: .92rem;
    color: var(--bs-emphasis-color);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-user-meta {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-card-um {
    text-align: center;
}

.al-pill {
    display: inline-block;
    padding: .18rem .6rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 50rem;
    color: var(--bs-info-text-emphasis);
    background: var(--bs-info-bg-subtle);
    border: 1px solid var(--bs-border-color);
    white-space: nowrap;
}

.al-pill--muted {
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

.al-row-role {
    width: 100%;
    padding: .45rem .65rem;
    font-size: .82rem;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    color: var(--bs-body-color);
    transition: border-color var(--al-fast) var(--al-ease), box-shadow var(--al-fast) var(--al-ease);
}

    .al-row-role:focus {
        outline: none;
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .15rem var(--bs-primary-bg-subtle);
    }

    .al-row-role.is-missing {
        border-color: var(--bs-danger);
    }

.al-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--bs-secondary-color);
}

.al-err {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-radius: .75rem;
}

/* responsive: stack on narrow screens */
@media (max-width: 575.98px) {
    #syncRows .al-card {
        grid-template-columns: 20px auto 1fr;
        row-gap: .5rem;
    }

    .al-card-um, .al-card-role {
        grid-column: 2 / -1;
        text-align: left;
    }
}

#btnSyncSelected:not(:disabled) {
    animation: alPulse 2.4s var(--al-ease) infinite;
}

@keyframes alPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--bs-primary-bg-subtle);
    }

    50% {
        box-shadow: 0 0 0 .3rem transparent;
    }
}

/* =====================================================================
   CENTERED FRESH AUTH CARD  (theme tokens only, no color-mix)
   ===================================================================== */
body.authentication-bg {
    padding: 0 !important;
}

.al-stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: radial-gradient(80% 60% at 50% 0%, var(--bs-primary-bg-subtle), transparent 70%), var(--bs-body-bg);
}

.al-card-auth {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .10);
    animation: alCardIn var(--al-slow) var(--al-ease) both;
}

/* coloured header band — rgb(var(--bs-primary-rgb)) is defined by UBold,
   with a darker rgba overlay so no color-mix is needed */
.al-card-head {
    text-align: center;
    padding: 2rem 1.5rem 1.6rem;
    color: #fff;
    background-color: #371949;
    background-image: linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.28));
}

    .al-card-head h3 {
        color: #fff;
    }

.al-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    font-weight: 800;
    font-size: 1.2rem;
    color: rgb(var(--bs-primary-rgb, 138 90 68));
    background: #fff;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18);
}

.al-head-sub {
    font-size: .85rem;
    opacity: .9;
}

.al-card-body {
    padding: 1.75rem 1.6rem 1.25rem;
}

    .al-card-body .form-label {
        font-size: .85rem;
        color: var(--bs-emphasis-color);
    }

.al-card-foot {
    text-align: center;
    padding: .9rem 1rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}