/* ==========================================================
   VALORIUM ADMIN CUSTOMERS
   VISUAL ALIGNMENT WITH ORDERS
   ========================================================== */

.admin-customers-page {
    display: none;
}

.admin-customers-page.active {
    display: block;
}

/* ==========================================================
   CARD PRINCIPAL
   ========================================================== */

.customers-stage-card {
    position: relative;
    overflow: hidden;

    min-height: 520px;
    padding: 30px;

    border:
        1px solid rgba(255, 176, 0, 0.14);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(255, 176, 0, 0.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(52, 124, 255, 0.055),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.18);
}

.customers-stage-card::before {
    content: '';

    position: absolute;
    top: 0;
    left: 31px;

    width: 58px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--admin-gold),
            rgba(255, 176, 0, 0.15)
        );
}

.customers-stage-card::after {
    content: '';

    position: absolute;
    top: -120px;
    right: -120px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 176, 0, 0.07),
            transparent 68%
        );

    pointer-events: none;
}

.customers-stage-card > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   CABECALHO
   ========================================================== */

.customers-stage-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 22px;
}

.customers-stage-copy {
    min-width: 0;
}

.customers-stage-card h2 {
    max-width: 760px;

    margin:
        8px 0 8px;

    color:
        #ffffff;

    font-size:
        clamp(24px, 3vw, 32px);

    font-weight: 750;

    line-height: 1.12;

    letter-spacing:
        -0.025em;
}

.customers-stage-card .customers-stage-description {
    max-width: 720px;

    margin: 0;

    color:
        var(--admin-text-soft);

    font-size: 12px;

    line-height: 1.7;
}

/* ==========================================================
   BOTAO NOVO CLIENTE
   ========================================================== */

.customers-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding:
        7px 13px;

    border:
        1px solid rgba(255, 176, 0, 0.30);

    border-radius: 9px;

    background:
        rgba(255, 176, 0, 0.055);

    color:
        var(--admin-gold);

    font: inherit;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.customers-primary-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255, 176, 0, 0.44);

    background:
        rgba(255, 176, 0, 0.08);
}

/* ==========================================================
   STATUS
   ========================================================== */

.customers-stage-status {
    display: flex;
    align-items: center;
    gap: 11px;

    max-width: 720px;

    margin-top: 25px;

    padding:
        14px 16px;

    border:
        1px solid rgba(75, 215, 139, 0.16);

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(75, 215, 139, 0.055),
            rgba(75, 215, 139, 0.018)
        );

    color:
        #b9d9c7;

    font-size:
        10px;

    line-height:
        1.55;
}

.customers-stage-status::before {
    content: '';

    display: block;

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        #4bd78b;

    box-shadow:
        0 0 0 5px rgba(75, 215, 139, 0.065),
        0 0 15px rgba(75, 215, 139, 0.35);
}

/* ==========================================================
   AREA DA LISTAGEM
   ========================================================== */

.customers-table-mount {
    position: relative;

    min-height: 300px;

    margin-top: 24px;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.008)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* ==========================================================
   TOOLBAR
   ========================================================== */

.customers-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        18px 18px 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);
}

.customers-toolbar-title {
    min-width: 0;
}

.customers-toolbar-title strong {
    display: block;

    color:
        #ffffff;

    font-size:
        14px;

    line-height:
        1.25;
}

.customers-toolbar-title span {
    display: block;

    margin-top:
        4px;

    color:
        var(--admin-text-soft);

    font-size:
        9px;
}

.customers-toolbar-actions {
    display: flex;
    align-items: center;

    gap:
        8px;
}

.customers-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding:
        6px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.018);

    color:
        #d9dde0;

    font:
        inherit;

    font-size:
        9px;

    cursor:
        pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.customers-secondary-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255, 176, 0, 0.32);

    background:
        rgba(255, 176, 0, 0.04);
}

/* ==========================================================
   SEARCH / FILTROS
   ========================================================== */

.customers-filter-grid {
    display:
        grid;

    grid-template-columns:
        minmax(220px, 1.4fr)
        minmax(140px, 0.7fr);

    gap:
        10px;

    padding:
        14px 18px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);
}

.customers-field {
    min-width: 0;
}

.customers-field > span {
    display: block;

    margin-bottom:
        6px;

    color:
        rgba(255, 255, 255, 0.42);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}

.customers-field input,
.customers-field select {
    width:
        100%;

    height:
        38px;

    padding:
        0 11px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        9px;

    outline:
        none;

    background:
        rgba(255, 255, 255, 0.02);

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        10px;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.customers-field input:focus,
.customers-field select:focus {
    border-color:
        rgba(255, 176, 0, 0.40);

    background:
        rgba(255, 176, 0, 0.025);

    box-shadow:
        0 0 0 3px rgba(255, 176, 0, 0.045);
}

.customers-field select {
    color-scheme:
        dark;
}

/* ==========================================================
   TABELA
   ========================================================== */

.customers-table-wrap {
    width:
        100%;

    overflow-x:
        auto;
}

.customers-table {
    width:
        100%;

    min-width:
        860px;

    border-collapse:
        collapse;
}

.customers-table th {
    padding:
        12px 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);

    background:
        rgba(255, 255, 255, 0.008);

    color:
        rgba(255, 255, 255, 0.38);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.075em;

    text-align:
        left;

    text-transform:
        uppercase;
}

.customers-table td {
    padding:
        14px 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.04);

    color:
        #dce0e3;

    font-size:
        10px;

    vertical-align:
        middle;
}

.customers-table tbody tr {
    transition:
        background 150ms ease;
}

.customers-table tbody tr:hover {
    background:
        rgba(255, 176, 0, 0.015);
}

.customers-name {
    color:
        #ffffff;

    font-weight:
        800;
}

.customers-subtle {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--admin-text-soft);

    font-size:
        8px;

    font-weight:
        500;
}

/* ==========================================================
   BADGES
   ========================================================== */

.customers-status {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        23px;

    padding:
        4px 8px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, 0.02);

    color:
        #d9dde0;

    font-size:
        8px;

    font-weight:
        800;
}

.customers-status.active {
    border-color:
        rgba(75, 215, 139, 0.20);

    background:
        rgba(75, 215, 139, 0.045);

    color:
        #91e4b4;
}

.customers-status.inactive {
    border-color:
        rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.025);

    color:
        #aeb5be;
}

/* ==========================================================
   BOTAO DETALHES
   ========================================================== */

.customers-action-button {
    min-height:
        29px;

    padding:
        5px 10px;

    border:
        1px solid rgba(255, 176, 0, 0.20);

    border-radius:
        8px;

    background:
        rgba(255, 176, 0, 0.04);

    color:
        var(--admin-gold);

    font:
        inherit;

    font-size:
        8px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.customers-action-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255, 176, 0, 0.34);

    background:
        rgba(255, 176, 0, 0.07);
}

/* ==========================================================
   EMPTY STATE
   ========================================================== */

.customers-empty {
    display:
        grid;

    place-items:
        center;

    min-height:
        270px;

    padding:
        32px 22px;

    text-align:
        center;
}

.customers-empty[hidden] {
    display:
        none;
}

.customers-empty-icon {
    display:
        grid;

    width:
        46px;

    height:
        46px;

    margin-bottom:
        14px;

    place-items:
        center;

    border:
        1px solid rgba(255, 176, 0, 0.18);

    border-radius:
        13px;

    background:
        rgba(255, 176, 0, 0.035);

    color:
        var(--admin-gold);

    font-size:
        18px;
}

.customers-empty h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        14px;
}

.customers-empty p {
    max-width:
        470px;

    margin:
        8px 0 0;

    color:
        var(--admin-text-soft);

    font-size:
        10px;

    line-height:
        1.65;
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media (max-width: 820px) {

    .customers-stage-card {
        padding:
            22px;
    }

    .customers-stage-heading {
        flex-direction:
            column;
    }

    .customers-toolbar {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .customers-toolbar-actions {
        width:
            100%;
    }

    .customers-secondary-button,
    .customers-primary-button {
        width:
            100%;
    }

    .customers-filter-grid {
        grid-template-columns:
            1fr;
    }
}


/* ==========================================================
   CUSTOMER DRAWER
   ========================================================== */

body.customers-drawer-open {
    overflow: hidden;
}

.customer-drawer-backdrop {
    position: fixed;
    inset: 0;

    z-index: 1190;

    background:
        rgba(0, 0, 0, 0.60);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 180ms ease;
}

.customer-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.customer-drawer {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 1200;

    width:
        min(560px, 94vw);

    transform:
        translateX(102%);

    border-left:
        1px solid rgba(255, 176, 0, 0.16);

    background:
        linear-gradient(
            180deg,
            #101214,
            #0b0d0f
        );

    box-shadow:
        -24px 0 70px rgba(0, 0, 0, 0.46);

    transition:
        transform 220ms ease;

    overflow-y:
        auto;
}

.customer-drawer.open {
    transform:
        translateX(0);
}

.customer-drawer-header {
    position:
        sticky;

    top:
        0;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        24px 25px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(14, 16, 18, 0.96);

    backdrop-filter:
        blur(14px);
}

.customer-drawer-heading span {
    display:
        block;

    color:
        var(--admin-gold);

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.customer-drawer-heading h3 {
    margin:
        7px 0 5px;

    color:
        #ffffff;

    font-size:
        21px;
}

.customer-drawer-heading p {
    max-width:
        410px;

    margin:
        0;

    color:
        var(--admin-text-soft);

    font-size:
        10px;

    line-height:
        1.6;
}

.customer-drawer-close {
    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.025);

    color:
        #d8dcdf;

    cursor:
        pointer;

    font-size:
        17px;

    transition:
        border-color 150ms ease,
        background 150ms ease;
}

.customer-drawer-close:hover {
    border-color:
        rgba(255, 176, 0, 0.30);

    background:
        rgba(255, 176, 0, 0.045);

    color:
        var(--admin-gold);
}

.customer-drawer-content {
    padding:
        24px 25px 30px;
}

.customer-form-section {
    padding:
        18px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius:
        13px;

    background:
        rgba(255, 255, 255, 0.014);
}

.customer-form-section + .customer-form-section {
    margin-top:
        14px;
}

.customer-form-section-title {
    margin-bottom:
        16px;

    color:
        rgba(255, 255, 255, 0.46);

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.customer-form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;
}

.customer-form-field {
    min-width:
        0;
}

.customer-form-field.full {
    grid-column:
        1 / -1;
}

.customer-form-field > span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}

.customer-form-field input,
.customer-form-field select,
.customer-form-field textarea {
    width:
        100%;

    box-sizing:
        border-box;

    border:
        1px solid rgba(255, 255, 255, 0.075);

    border-radius:
        9px;

    outline:
        none;

    background:
        rgba(255, 255, 255, 0.025);

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        10px;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.customer-form-field input,
.customer-form-field select {
    height:
        40px;

    padding:
        0 11px;
}

.customer-form-field textarea {
    min-height:
        105px;

    padding:
        11px;

    resize:
        vertical;

    line-height:
        1.55;
}

.customer-form-field input:focus,
.customer-form-field select:focus,
.customer-form-field textarea:focus {
    border-color:
        rgba(255, 176, 0, 0.38);

    background:
        rgba(255, 176, 0, 0.025);

    box-shadow:
        0 0 0 3px rgba(255, 176, 0, 0.045);
}

.customer-form-field select {
    color-scheme:
        dark;
}

.customer-form-toggle {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    min-height:
        44px;

    padding:
        11px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.018);
}

.customer-form-toggle-copy strong {
    display:
        block;

    color:
        #ffffff;

    font-size:
        10px;
}

.customer-form-toggle-copy small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--admin-text-soft);

    font-size:
        8px;
}

.customer-form-toggle input {
    width:
        18px;

    height:
        18px;

    accent-color:
        #d1a51d;
}

.customer-form-message {
    margin-top:
        14px;

    padding:
        11px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.02);

    color:
        #d9dde0;

    font-size:
        9px;

    line-height:
        1.5;
}

.customer-form-message[hidden] {
    display:
        none;
}

.customer-form-message.error {
    border-color:
        rgba(255, 94, 94, 0.18);

    background:
        rgba(255, 94, 94, 0.035);

    color:
        #ffb8b8;
}

.customer-form-message.success {
    border-color:
        rgba(75, 215, 139, 0.18);

    background:
        rgba(75, 215, 139, 0.04);

    color:
        #a6e7c1;
}

.customer-form-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        9px;

    margin-top:
        18px;
}

.customer-form-cancel,
.customer-form-submit {
    min-height:
        36px;

    padding:
        7px 13px;

    border-radius:
        9px;

    font:
        inherit;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;
}

.customer-form-cancel {
    border:
        1px solid rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.02);

    color:
        #d5dadd;
}

.customer-form-submit {
    border:
        1px solid rgba(255, 176, 0, 0.28);

    background:
        linear-gradient(
            135deg,
            rgba(255, 176, 0, 0.14),
            rgba(255, 176, 0, 0.07)
        );

    color:
        var(--admin-gold);
}

.customer-form-submit:disabled {
    opacity:
        0.5;

    cursor:
        not-allowed;
}

@media (max-width: 640px) {

    .customer-form-grid {
        grid-template-columns:
            1fr;
    }

    .customer-form-field.full {
        grid-column:
            auto;
    }

    .customer-form-actions {
        flex-direction:
            column-reverse;
    }

    .customer-form-cancel,
    .customer-form-submit {
        width:
            100%;
    }
}