/* =========================================================
   MERCURIUS V6.4
   BUSINESS CYBER COMMAND CENTER
   ========================================================= */

:root {

    --v64-bg:
        #030711;

    --v64-bg2:
        #06101b;

    --v64-panel:
        rgba(7, 16, 29, .92);

    --v64-panel2:
        rgba(10, 23, 39, .90);

    --v64-border:
        rgba(45, 255, 207, .17);

    --v64-border-blue:
        rgba(77, 154, 255, .20);

    --v64-cyan:
        #30ffd0;

    --v64-blue:
        #5b9cff;

    --v64-purple:
        #ac7dff;

    --v64-red:
        #ff5478;

    --v64-yellow:
        #ffd26a;

    --v64-green:
        #53ff9c;

    --v64-muted:
        #7f9ab2;

    --v64-text:
        #ecf8ff;

    --v64-radius:
        16px;
}


/* =========================================================
   CORREÇÃO DO ESPAÇO DO DASHBOARD
   ========================================================= */

html,
body {

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden;
}


body.v64 {

    --v64-content-gap:
        clamp(
            14px,
            1.2vw,
            24px
        );
}


body.v64 main,

body.v64 .main,

body.v64 .app-main,

body.v64 .main-content,

body.v64 .app-content,

body.v64 .page-content,

body.v64 .workspace,

body.v64 .workspace-content {

    width: auto !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/*
 * Principal correção para o espaço visto
 * na captura: remove wrappers internos
 * de ~1000px alinhados à direita.
 */

body.v64 main > *,

body.v64 .app-main > *,

body.v64 .main-content > *,

body.v64 .app-content > *,

body.v64 .page-content > *,

body.v64 .workspace-content > * {

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


body.v64 main
.container,

body.v64 main
.container-fluid,

body.v64 main
.page-container,

body.v64 main
.content-container,

body.v64 main
.dashboard-container,

body.v64 main
.dashboard-content,

body.v64 main
.page-inner,

body.v64 main
.content-inner,

body.v64
.app-main
.container,

body.v64
.app-main
.page-inner {

    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/* Header também utiliza largura total */

body.v64 header > *,

body.v64 .topbar > *,

body.v64 .app-topbar > *,

body.v64 .app-header > * {

    max-width:
        none !important;

    width:
        100% !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/* =========================================================
   EFEITO COMMAND CENTER
   ========================================================= */

body.v64::after {

    content: "";

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    pointer-events:
        none;

    opacity:
        .035;

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 3px,
            rgba(63,255,211,.4) 4px
        );
}


body.v64::before {

    content: "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        -1;

    background:

        radial-gradient(
            circle at 72% 16%,
            rgba(30,255,208,.055),
            transparent 35%
        ),

        linear-gradient(
            rgba(59,255,215,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(59,255,215,.018) 1px,
            transparent 1px
        );

    background-size:
        auto,
        34px 34px,
        34px 34px;
}


/* =========================================================
   CARDS EXISTENTES
   ========================================================= */

body.v64
[class*="card"] {

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


body.v64
[class*="card"]:hover {

    border-color:
        rgba(
            48,
            255,
            208,
            .27
        ) !important;

    box-shadow:
        0 15px 42px
        rgba(
            0,
            0,
            0,
            .25
        );

    transform:
        translateY(-1px);
}


/* =========================================================
   HUD
   ========================================================= */

#v64-hud {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                145px,
                1fr
            )
        );

    gap:
        9px;

    margin:
        0 0
        14px;
}


.v64-hud-item {

    position:
        relative;

    min-height:
        57px;

    padding:
        11px
        13px;

    overflow:
        hidden;

    border:
        1px solid
        var(--v64-border);

    border-radius:
        12px;

    background:
        linear-gradient(
            180deg,
            rgba(8,19,32,.82),
            rgba(4,11,21,.82)
        );
}


.v64-hud-item::before {

    content: "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        2px;

    background:
        var(--v64-cyan);

    box-shadow:
        0 0 12px
        var(--v64-cyan);

    opacity:
        .75;
}


.v64-hud-label {

    color:
        #63849d;

    text-transform:
        uppercase;

    letter-spacing:
        .10em;

    font-size:
        9px;
}


.v64-hud-value {

    margin-top:
        4px;

    color:
        #ecfbff;

    font-size:
        14px;

    font-weight:
        750;
}


.v64-hud-online {

    color:
        var(--v64-cyan);
}


/* =========================================================
   WORKSPACE INTEGRADO
   ========================================================= */

#v64-workspace {

    --v64-left:
        270px;

    --v64-top:
        118px;

    position:
        fixed;

    left:
        var(--v64-left);

    top:
        var(--v64-top);

    right:
        0;

    bottom:
        0;

    z-index:
        500;

    overflow:
        auto;

    padding:
        clamp(
            16px,
            1.5vw,
            28px
        );

    background:

        radial-gradient(
            circle at 80% 0,
            rgba(48,255,208,.06),
            transparent 32%
        ),

        linear-gradient(
            180deg,
            rgba(3,9,17,.985),
            rgba(3,8,15,.995)
        );

    backdrop-filter:
        blur(18px);
}


.v64-workspace-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        18px;
}


.v64-workspace-title {

    margin:
        0;

    color:
        var(--v64-text);

    font-size:
        clamp(
            23px,
            2vw,
            34px
        );
}


.v64-workspace-subtitle {

    margin:
        5px 0 0;

    color:
        var(--v64-muted);

    font-size:
        12px;
}


.v64-close {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.04);

    color:
        white;

    cursor:
        pointer;
}


.v64-toolbar {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-bottom:
        14px;
}


.v64-btn {

    border:
        1px solid
        rgba(48,255,208,.23);

    border-radius:
        11px;

    padding:
        10px
        13px;

    color:
        #dbfbf5;

    background:
        rgba(48,255,208,.065);

    cursor:
        pointer;

    font-weight:
        650;

    font-size:
        12px;
}


.v64-btn:hover {

    border-color:
        rgba(48,255,208,.45);

    background:
        rgba(48,255,208,.11);
}


.v64-btn-blue {

    border-color:
        rgba(91,156,255,.28);

    background:
        rgba(91,156,255,.08);
}


.v64-btn-red {

    border-color:
        rgba(255,84,120,.28);

    background:
        rgba(255,84,120,.08);
}


/* =========================================================
   KPIs WORKSPACE
   ========================================================= */

.v64-kpis {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                170px,
                1fr
            )
        );

    gap:
        11px;

    margin:
        0 0
        16px;
}


.v64-kpi {

    padding:
        14px;

    border:
        1px solid
        var(--v64-border);

    border-radius:
        var(--v64-radius);

    background:
        var(--v64-panel);
}


.v64-kpi-label {

    color:
        var(--v64-muted);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.v64-kpi-value {

    margin-top:
        7px;

    color:
        var(--v64-text);

    font-size:
        26px;

    font-weight:
        800;
}


.v64-kpi-value.money {

    color:
        var(--v64-cyan);
}


/* =========================================================
   TABELAS
   ========================================================= */

.v64-table-wrap {

    overflow:
        auto;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        var(--v64-radius);

    background:
        rgba(4,11,21,.73);
}


.v64-table {

    width:
        100%;

    min-width:
        1000px;

    border-collapse:
        collapse;

    font-size:
        12px;
}


.v64-table th {

    position:
        sticky;

    top:
        0;

    z-index:
        2;

    padding:
        11px;

    color:
        #7190aa;

    background:
        #07111e;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    text-align:
        left;

    font-size:
        9px;
}


.v64-table td {

    padding:
        12px
        11px;

    color:
        #dceaf6;

    border-top:
        1px solid
        rgba(255,255,255,.055);

    vertical-align:
        top;
}


.v64-table tr:hover td {

    background:
        rgba(48,255,208,.025);
}


/* =========================================================
   FORMS
   ========================================================= */

.v64-form {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                180px,
                1fr
            )
        );

    gap:
        9px;

    padding:
        14px;

    margin-bottom:
        15px;

    border:
        1px solid
        var(--v64-border);

    border-radius:
        var(--v64-radius);

    background:
        rgba(6,15,27,.89);
}


.v64-form input,

.v64-form select,

.v64-form textarea {

    width:
        100%;

    min-height:
        39px;

    padding:
        9px
        10px;

    border:
        1px solid
        rgba(126,157,184,.18);

    border-radius:
        10px;

    color:
        #ecf7ff;

    background:
        #040c16;

    outline:
        none;
}


.v64-form textarea {

    min-height:
        75px;

    resize:
        vertical;
}


.v64-field {

    display:
        grid;

    gap:
        5px;
}


.v64-field label {

    color:
        #728da5;

    font-size:
        10px;

    text-transform:
        uppercase;
}


/* =========================================================
   KANBAN
   ========================================================= */

.v64-kanban {

    display:
        flex;

    gap:
        12px;

    align-items:
        flex-start;

    width:
        max-content;

    min-width:
        100%;

    padding-bottom:
        18px;
}


.v64-board-scroll {

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding-bottom:
        8px;
}


.v64-column {

    flex:
        0 0
        300px;

    width:
        300px;

    min-height:
        520px;

    border:
        1px solid
        var(--v64-border-blue);

    border-radius:
        15px;

    background:
        rgba(5,13,24,.85);
}


.v64-column.drag-over {

    border-color:
        var(--v64-cyan);

    box-shadow:
        inset 0 0 30px
        rgba(48,255,208,.05);
}


.v64-column-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        12px
        13px;

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


.v64-column-title {

    color:
        #dceafb;

    font-size:
        12px;

    font-weight:
        700;
}


.v64-column-count {

    min-width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(48,255,208,.18);

    border-radius:
        9px;

    color:
        var(--v64-cyan);

    background:
        rgba(48,255,208,.045);

    font-size:
        10px;
}


.v64-column-body {

    min-height:
        460px;

    padding:
        9px;
}


.v64-conversation {

    position:
        relative;

    padding:
        12px;

    margin-bottom:
        9px;

    border:
        1px solid
        rgba(120,154,185,.14);

    border-radius:
        13px;

    background:
        linear-gradient(
            180deg,
            rgba(13,27,44,.95),
            rgba(7,17,30,.96)
        );

    cursor:
        grab;

    box-shadow:
        0 8px 21px
        rgba(0,0,0,.20);
}


.v64-conversation:hover {

    border-color:
        rgba(48,255,208,.31);

    transform:
        translateY(-1px);
}


.v64-conversation.dragging {

    opacity:
        .38;
}


.v64-contact-name {

    color:
        #edf8ff;

    font-size:
        13px;

    font-weight:
        750;
}


.v64-contact-phone {

    margin-top:
        2px;

    color:
        #6e8da7;

    font-size:
        10px;
}


.v64-preview {

    margin-top:
        9px;

    color:
        #a8bdcf;

    font-size:
        11px;

    line-height:
        1.45;
}


.v64-card-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        9px;
}


.v64-chip {

    padding:
        4px 6px;

    border:
        1px solid
        rgba(91,156,255,.18);

    border-radius:
        8px;

    color:
        #8faecc;

    background:
        rgba(91,156,255,.045);

    font-size:
        9px;
}


.v64-chip-unread {

    color:
        var(--v64-cyan);

    border-color:
        rgba(48,255,208,.24);
}


.v64-chip-money {

    color:
        var(--v64-green);

    border-color:
        rgba(83,255,156,.25);
}


/* =========================================================
   MENU ATIVO
   ========================================================= */

.v64-active-badge {

    display:
        inline-flex;

    padding:
        3px 6px;

    margin-left:
        auto;

    border:
        1px solid
        rgba(48,255,208,.22);

    border-radius:
        999px;

    color:
        var(--v64-cyan);

    background:
        rgba(48,255,208,.05);

    font-size:
        8px;

    text-transform:
        uppercase;
}


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

@media
(max-width: 900px) {

    #v64-workspace {

        left:
            0 !important;

        top:
            0 !important;

        z-index:
            9999;
    }


    .v64-column {

        flex-basis:
            270px;

        width:
            270px;
    }
}