/* ============================================================
   USUARIOS + COMISSIONAMENTO
   ============================================================ */

.uc-card-heading {
    margin-bottom: 14px;
}

.uc-card-heading small,
.uc-modal-header small {
    color: #65717b;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.uc-card-heading h3,
.uc-modal-header h3 {
    margin: 4px 0;
}

.uc-card-heading p,
.uc-modal-header p {
    margin: 0;
    color: #69737c;
    font-size: 8px;
}

.uc-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.uc-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(150px,1fr)
        );
    gap: 8px;
}

.uc-form label > span {
    display: block;
    margin-bottom: 5px;
    color: #65707a;
    font-size: 7px;
    font-weight: 800;
}

.uc-form input,
.uc-form select {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;
    background: #0e1318;
    color: #d4dae0;
    outline: none;
    font-size: 8px;
}

.uc-form input:focus,
.uc-form select:focus {
    border-color: rgba(83,157,220,.38);
}

.uc-commission-block {
    padding: 12px;
    border: 1px solid rgba(82,157,220,.10);
    border-radius: 9px;
    background: rgba(82,157,220,.025);
}

.uc-toggle-row {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.uc-toggle-row input {
    width: 16px;
    height: 16px;
}

.uc-toggle-row strong,
.uc-toggle-row small {
    display: block;
}

.uc-toggle-row strong {
    color: #bfc7ce;
    font-size: 9px;
}

.uc-toggle-row small {
    margin-top: 3px;
    color: #626d77;
    font-size: 7px;
}

.uc-commission-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.uc-commission-fields.hidden {
    display: none;
}

.uc-commission-fields label > small {
    display: block;
    margin-top: 4px;
    color: #59636c;
    font-size: 6px;
}

.uc-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.uc-primary,
.uc-secondary,
.uc-table .actions button {
    height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.uc-primary {
    border: 1px solid rgba(68,204,143,.22);
    background: rgba(68,204,143,.08);
    color: #70dda6;
}

.uc-secondary {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #9099a1;
}

.uc-primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.uc-message {
    min-height: 16px;
    font-size: 8px;
}

.uc-message.success {
    color: #6adba1;
}

.uc-message.error,
.uc-error {
    color: #e28585;
}

.uc-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 9px;
}

.uc-table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
}

.uc-table th {
    padding: 9px;
    background: #14191f;
    color: #66717b;
    text-align: left;
    font-size: 7px;
    white-space: nowrap;
}

.uc-table td {
    padding: 9px;
    border-top: 1px solid rgba(255,255,255,.04);
    color: #a9b2ba;
    font-size: 8px;
}

.uc-table td strong {
    color: #d0d6db;
}

.uc-table td.empty {
    padding: 25px;
    text-align: center;
}

.uc-table .actions {
    text-align: right;
}

.uc-table .actions button {
    border: 1px solid rgba(87,157,219,.18);
    background: rgba(87,157,219,.06);
    color: #8cb9df;
}

.uc-badge {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 6px;
    font-weight: 900;
    white-space: nowrap;
}

.uc-badge.active,
.uc-badge.commission {
    background: rgba(68,207,144,.07);
    color: #69dba1;
}

.uc-badge.inactive {
    background: rgba(226,93,93,.07);
    color: #de8585;
}

.uc-badge.warning {
    background: rgba(225,175,80,.08);
    color: #ddb76a;
}

.uc-badge.muted {
    background: rgba(255,255,255,.035);
    color: #69747e;
}

.uc-overlay {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3,6,9,.80);
    backdrop-filter: blur(5px);
}

.uc-modal {
    width: min(
        850px,
        96vw
    );
    max-height: 92vh;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: #101419;
    box-shadow:
        0 25px 70px
        rgba(0,0,0,.55);
}

.uc-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.uc-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
    background: rgba(255,255,255,.025);
    color: #838d95;
    cursor: pointer;
    font-size: 17px;
}

.uc-active-box {
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
}

.uc-active-box label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aab2b9;
    font-size: 8px;
}

.uc-active-box input {
    width: 15px;
    height: 15px;
}

.uc-edit-actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 850px) {

    .uc-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}

@media (max-width: 600px) {

    .uc-grid,
    .uc-commission-fields {
        grid-template-columns: 1fr;
    }

    .uc-form-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
   FIX UI - USUARIOS + COMISSIONAMENTO
   ============================================================ */

.uc-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
}

.uc-grid > label {
    min-width: 0;
}

.uc-grid input,
.uc-grid select {
    min-width: 0;
    max-width: 100%;
}

.uc-commission-fields {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
}

.uc-form {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.uc-form-footer {
    margin-top: 3px;
}

.uc-save-confirmation {
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(68,207,144,.14);
    border-radius: 7px;
    background: rgba(68,207,144,.045);
    color: #72dca7;
    font-size: 8px;
    font-weight: 700;
}

@media (max-width: 700px) {

    .uc-grid,
    .uc-commission-fields {
        grid-template-columns: 1fr !important;
    }
}