/* =========================================================
   E3R's GESTÃO CLOUD
   CLIENTES - CSS
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --sidebar: #0b1220;

    --background: #f8fafc;

    --white: #ffffff;

    --border: #e2e8f0;

    --text: #0f172a;

    --muted: #64748b;

    --green: #16a34a;

    --orange: #ea580c;

    --red: #dc2626;
}

body {

    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

}

button,
input,
select,
textarea {

    font-family:
        inherit;

}

button {

    cursor:
        pointer;

}

/* =========================================================
   APP
   ========================================================= */

.app {

    min-height:
        100vh;

}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {

    position:
        fixed;

    inset:
        0 auto 0 0;

    width:
        260px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        22px 15px;

    background:
        var(--sidebar);

    color:
        white;

    z-index:
        100;

}

/* =========================================================
   BRAND
   ========================================================= */

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        0 10px;

    margin-bottom:
        25px;

}

.brand-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        linear-gradient(135deg,
            #2563eb,
            #60a5fa);

    font-weight:
        800;

}

.brand-name strong {

    display:
        block;

    font-size:
        18px;

}

.brand-name span {

    display:
        block;

    margin-top:
        3px;

    color:
        #60a5fa;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1.5px;

}

/* =========================================================
   COMPANY
   ========================================================= */

.company-mini {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px;

    margin-bottom:
        22px;

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

    border-radius:
        10px;

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

}

.company-avatar {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--primary);

    font-weight:
        bold;

}

.company-mini strong,
.company-mini span {

    display:
        block;

}

.company-mini strong {

    font-size:
        11px;

}

.company-mini span {

    margin-top:
        3px;

    color:
        #64748b;

    font-size:
        9px;

}

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

.menu {

    flex:
        1;

    overflow-y:
        auto;

    overflow-x:
        hidden;

}

.menu-title {

    margin:
        18px 12px 7px;

    color:
        #475569;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1.2px;

    white-space:
        nowrap;

}

.menu-item {

    display:
        grid;

    grid-template-columns:
        20px minmax(0, 1fr);

    align-items:
        center;

    column-gap:
        12px;

    width:
        100%;

    min-height:
        42px;

    padding:
        11px 13px;

    margin-bottom:
        3px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #94a3b8;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.35;

    text-align:
        left;

    text-decoration:
        none;

    transition:
        .2s;

}

.menu-item:hover {

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

    color:
        white;

}

.menu-item.active {

    background:
        var(--primary);

    color:
        white;

}

.menu-item .menu-icon {

    width:
        20px;

    height:
        20px;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

}

.menu-item>span:not(.menu-icon) {

    width:
        auto;

    min-width:
        0;

    overflow:
        visible;

    font-size:
        13px;

    text-align:
        left;

    white-space:
        normal;

    word-break:
        normal;

}

/* =========================================================
   SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer {

    padding-top:
        15px;

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

}

.system-online {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 10px;

    color:
        #64748b;

    font-size:
        10px;

}

.system-online .status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #22c55e;

    flex:
        0 0 7px;

}

.system-online .status-text {

    width:
        auto;

    height:
        auto;

    border-radius:
        0;

    background:
        transparent;

}

.system-status.online .status-dot {

    background:
        #22c55e;

    box-shadow:
        0 0 0 3px rgba(34, 197, 94, .12);

}

.system-status.offline {

    color:
        #f87171;

}

.system-status.offline .status-dot {

    background:
        #ef4444;

    box-shadow:
        0 0 0 3px rgba(239, 68, 68, .12);

}

.logout {

    width:
        100%;

    padding:
        10px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #94a3b8;

    text-align:
        left;

    transition:
        .2s;

}

.logout:hover {

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

    color:
        white;

}

/* =========================================================
   MAIN
   ========================================================= */

.main {

    min-height:
        100vh;

    margin-left:
        260px;

}

/* =========================================================
   HEADER
   ========================================================= */

.header {

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 35px;

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

    background:
        white;

}

.header-left {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}

.header-right {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}

.header h1 {

    font-size:
        20px;

}

.header p {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        11px;

}

.mobile-menu {

    display:
        none;

    border:
        0;

    background:
        transparent;

    font-size:
        22px;

}

.notification {

    border:
        0;

    background:
        transparent;

    font-size:
        17px;

}

.user {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}

.user-avatar {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        bold;

}

.user strong,
.user span {

    display:
        block;

}

.user strong {

    font-size:
        11px;

}

.user span {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        9px;

}

/* =========================================================
   CONTENT
   ========================================================= */

.content {

    max-width:
        1250px;

    margin:
        auto;

    padding:
        35px;

}

.page-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        25px;

}

.eyebrow {

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;

}

.page-heading h2 {

    margin:
        7px 0;

    font-size:
        27px;

}

.page-heading p {

    color:
        var(--muted);

    font-size:
        12px;

}

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

.new-client-button {

    height:
        43px;

    padding:
        0 17px;

    border:
        0;

    border-radius:
        8px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        11px;

    font-weight:
        bold;

    transition:
        .2s;

}

.new-client-button:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-1px);

}

.new-client-button span {

    margin-right:
        5px;

    font-size:
        17px;

}

/* =========================================================
   STATS
   ========================================================= */

.stats {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        16px;

    margin-bottom:
        20px;

}

.stat-card {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        18px;

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

    border-radius:
        11px;

    background:
        white;

    transition:
        .2s;

}

.stat-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, .05);

}

.stat-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    font-size:
        17px;

}

.stat-icon.blue {

    background:
        #eff6ff;

}

.stat-icon.green {

    background:
        #f0fdf4;

}

.stat-icon.orange {

    background:
        #fff7ed;

}

.stat-card span,
.stat-card strong {

    display:
        block;

}

.stat-card span {

    color:
        var(--muted);

    font-size:
        10px;

}

.stat-card strong {

    margin-top:
        5px;

    font-size:
        20px;

}

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

.filter-card {

    display:
        flex;

    gap:
        10px;

    padding:
        15px;

    margin-bottom:
        18px;

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

    border-radius:
        11px;

    background:
        white;

}

.search-box {

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 12px;

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

    border-radius:
        8px;

    background:
        white;

}

.search-box span {

    font-size:
        14px;

}

.search-box input {

    width:
        100%;

    height:
        40px;

    border:
        0;

    outline:
        0;

    font-size:
        11px;

}

.filter-card select {

    width:
        180px;

    height:
        40px;

    padding:
        0 10px;

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

    border-radius:
        8px;

    outline:
        0;

    background:
        white;

    color:
        #475569;

    font-size:
        10px;

}

.filter-card select:focus,
.search-box:focus-within {

    border-color:
        var(--primary);

}

/* =========================================================
   TABLE
   ========================================================= */

.table-card {

    overflow:
        hidden;

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

    border-radius:
        11px;

    background:
        white;

}

.table-header {

    padding:
        20px;

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

}

.table-header h3 {

    font-size:
        13px;

}

.table-header p {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        10px;

}

.table-wrapper {

    overflow-x:
        auto;

}

table {

    width:
        100%;

    min-width:
        950px;

    border-collapse:
        collapse;

}

th {

    padding:
        12px 15px;

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

    color:
        #94a3b8;

    font-size:
        9px;

    font-weight:
        700;

    text-align:
        left;

    white-space:
        nowrap;

}

td {

    padding:
        14px 15px;

    border-bottom:
        1px solid #f1f5f9;

    font-size:
        11px;

    vertical-align:
        middle;

}

tbody tr {

    transition:
        .15s;

}

tbody tr:hover {

    background:
        #f8fafc;

}

/* =========================================================
   CLIENT INFO
   ========================================================= */

.client-info {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}

.client-avatar {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #eff6ff;

    color:
        var(--primary);

    font-weight:
        bold;

}

.client-name strong,
.client-name span {

    display:
        block;

}

.client-name strong {

    font-size:
        11px;

}

.client-name span {

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        9px;

}

/* =========================================================
   TIPO
   ========================================================= */

.client-type-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        5px 8px;

    border-radius:
        20px;

    font-size:
        9px;

    font-weight:
        bold;

}

.client-type-badge.pf {

    background:
        #eff6ff;

    color:
        #1d4ed8;

}

.client-type-badge.pj {

    background:
        #f5f3ff;

    color:
        #6d28d9;

}

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

.status {

    display:
        inline-block;

    padding:
        5px 8px;

    border-radius:
        20px;

    font-size:
        9px;

    font-weight:
        bold;

}

.status.active {

    background:
        #dcfce7;

    color:
        #15803d;

}

.status.inactive {

    background:
        #fee2e2;

    color:
        #b91c1c;

}

/* =========================================================
   ACTIONS
   ========================================================= */

.actions {

    display:
        flex;

    gap:
        5px;

}

.action-button {

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        6px;

    background:
        white;

    transition:
        .2s;

}

.action-button:hover {

    border-color:
        var(--primary);

    background:
        #eff6ff;

}

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

.empty-state {

    padding:
        60px 20px;

    text-align:
        center;

}

.empty-state>div {

    margin-bottom:
        12px;

    font-size:
        35px;

}

.empty-state h3 {

    font-size:
        14px;

}

.empty-state p {

    margin:
        6px 0 15px;

    color:
        var(--muted);

    font-size:
        11px;

}

.empty-state button {

    padding:
        10px 15px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        10px;

    font-weight:
        bold;

}

/* =========================================================
   MODAL OVERLAY
   ========================================================= */

.modal-overlay {

    position:
        fixed;

    inset:
        0;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(15, 23, 42, .65);

    z-index:
        1000;

    backdrop-filter:
        blur(3px);

}

.modal-overlay.show {

    display:
        flex;

}

/* =========================================================
   MODAL
   ========================================================= */

.modal {

    width:
        100%;

    max-width:
        820px;

    max-height:
        92vh;

    overflow-y:
        auto;

    border-radius:
        13px;

    background:
        white;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .2);

    animation:
        modalOpen .2s ease;

}

@keyframes modalOpen {

    from {

        opacity:
            0;

        transform:
            translateY(15px) scale(.98);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0) scale(1);

    }

}

/* =========================================================
   MODAL HEADER
   ========================================================= */

.modal-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    padding:
        22px;

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

}

.modal-header h2 {

    margin-top:
        5px;

    font-size:
        19px;

}

.close-modal {

    width:
        32px;

    height:
        32px;

    border:
        0;

    border-radius:
        7px;

    background:
        #f1f5f9;

    color:
        #475569;

    font-size:
        20px;

    transition:
        .2s;

}

.close-modal:hover {

    background:
        #e2e8f0;

}

/* =========================================================
   MODAL SECTIONS
   ========================================================= */

.modal-section {

    padding:
        22px;

    border-bottom:
        1px solid #f1f5f9;

}

.modal-section h3 {

    margin-bottom:
        16px;

    font-size:
        13px;

}

/* =========================================================
   CLIENT TYPE
   ========================================================= */

.client-type {

    display:
        grid;

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

    gap:
        12px;

}

.type-option {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px;

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

    border-radius:
        9px;

    cursor:
        pointer;

    transition:
        .2s;

}

.type-option:hover {

    border-color:
        #93c5fd;

    background:
        #f8fbff;

}

.type-option.active {

    border-color:
        var(--primary);

    background:
        #eff6ff;

}

.type-option input {

    display:
        none;

}

.type-option>span {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        white;

    font-size:
        17px;

}

.type-option strong,
.type-option small {

    display:
        block;

}

.type-option strong {

    font-size:
        11px;

}

.type-option small {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        9px;

}

/* =========================================================
   FORM GRID
   ========================================================= */

.modal-grid {

    display:
        grid;

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

    gap:
        16px;

}

.field-full {

    grid-column:
        1 / -1;

}

/* =========================================================
   FORM FIELDS
   ========================================================= */

.field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #334155;

    font-size:
        10px;

    font-weight:
        bold;

}

.field input,
.field select {

    width:
        100%;

    height:
        42px;

    padding:
        0 11px;

    outline:
        0;

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

    border-radius:
        7px;

    background:
        white;

    color:
        var(--text);

    font-size:
        11px;

    transition:
        .2s;

}

.field input:focus,
.field select:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);

}

.field input::placeholder {

    color:
        #94a3b8;

}

/* =========================================================
   TEXTAREA
   ========================================================= */

textarea {

    width:
        100%;

    min-height:
        100px;

    padding:
        12px;

    resize:
        vertical;

    outline:
        0;

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

    border-radius:
        8px;

    font-size:
        11px;

}

textarea:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);

}

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

.status-option {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        18px 22px;

    background:
        #f8fafc;

}

.status-option strong,
.status-option span {

    display:
        block;

}

.status-option strong {

    font-size:
        11px;

}

.status-option span {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        9px;

}

/* =========================================================
   SWITCH
   ========================================================= */

.switch {

    position:
        relative;

    width:
        42px;

    height:
        23px;

}

.switch input {

    display:
        none;

}

.switch span {

    position:
        absolute;

    inset:
        0;

    border-radius:
        30px;

    background:
        #cbd5e1;

    cursor:
        pointer;

    transition:
        .2s;

}

.switch span::before {

    content:
        "";

    position:
        absolute;

    width:
        17px;

    height:
        17px;

    left:
        3px;

    top:
        3px;

    border-radius:
        50%;

    background:
        white;

    transition:
        .2s;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .15);

}

.switch input:checked+span {

    background:
        var(--primary);

}

.switch input:checked+span::before {

    transform:
        translateX(19px);

}

/* =========================================================
   MODAL ACTIONS
   ========================================================= */

.modal-actions {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;

    padding:
        18px 22px;

}

.cancel-button,
.save-button {

    height:
        42px;

    padding:
        0 17px;

    border-radius:
        7px;

    font-size:
        10px;

    font-weight:
        bold;

}

.cancel-button {

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

    background:
        white;

    color:
        #475569;

}

.cancel-button:hover {

    background:
        #f8fafc;

}

.save-button {

    border:
        0;

    background:
        var(--primary);

    color:
        white;

}

.save-button:hover {

    background:
        var(--primary-dark);

}

.save-button:disabled {

    opacity:
        .65;

    cursor:
        wait;

}

/* =========================================================
   UTILITÁRIOS, VALIDAÇÃO E MENSAGENS
   ========================================================= */

.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;

}

.field input.invalid,
.field select.invalid,
textarea.invalid {

    border-color:
        var(--red);

    background:
        #fffafa;

}

.field-error {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--red);

    font-size:
        9px;

}

.toast {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        2000;

    max-width:
        min(380px, calc(100vw - 32px));

    padding:
        13px 16px;

    border-radius:
        9px;

    background:
        #0f172a;

    color:
        white;

    font-size:
        11px;

    line-height:
        1.45;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(12px);

    transition:
        .2s;

    box-shadow:
        0 14px 35px rgba(15, 23, 42, .22);

}

.toast.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}

.toast.success {

    background:
        #166534;

}

.toast.error {

    background:
        #991b1b;

}

.empty-state[hidden],
.table-wrapper[hidden] {

    display:
        none;

}

body.modal-open,
body.sidebar-open {

    overflow:
        hidden;

}

.sidebar-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        90;

    background:
        rgba(15, 23, 42, .55);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .25s;

}

.sidebar-overlay.show {

    opacity:
        1;

    visibility:
        visible;

}

/* =========================================================
   SCROLLBAR
   ========================================================= */

.modal::-webkit-scrollbar,
.menu::-webkit-scrollbar {

    width:
        6px;

}

.modal::-webkit-scrollbar-thumb,
.menu::-webkit-scrollbar-thumb {

    border-radius:
        10px;

    background:
        #cbd5e1;

}

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

@media (max-width: 1000px) {

    .sidebar {

        width:
            230px;

    }

    .main {

        margin-left:
            230px;

    }

    .content {

        padding:
            25px;

    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

    .sidebar {

        width:
            260px;

        transform:
            translateX(-100%);

        transition:
            .25s;

    }

    .sidebar.open {

        transform:
            translateX(0);

    }

    .sidebar-overlay {

        display:
            block;

    }

    .main {

        margin-left:
            0;

    }

    .mobile-menu {

        display:
            block;

    }

    .content {

        padding:
            25px 20px;

    }

    .stats {

        grid-template-columns:
            1fr;

    }

    .filter-card {

        flex-direction:
            column;

    }

    .filter-card select {

        width:
            100%;

    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .header {

        padding:
            0 18px;

    }

    .user div:last-child {

        display:
            none;

    }

    .header-right {

        gap:
            10px;

    }

    .page-heading {

        align-items:
            stretch;

        flex-direction:
            column;

    }

    .new-client-button {

        width:
            100%;

    }

    .client-type {

        grid-template-columns:
            1fr;

    }

    .modal-grid {

        grid-template-columns:
            1fr;

    }

    .field-full {

        grid-column:
            auto;

    }

    .modal-actions {

        flex-direction:
            column-reverse;

    }

    .cancel-button,
    .save-button {

        width:
            100%;

    }

    .modal {

        max-height:
            95vh;

        border-radius:
            10px;

    }

    .modal-section {

        padding:
            18px;

    }

    .modal-header {

        padding:
            18px;

    }

    .toast {

        right:
            16px;

        bottom:
            16px;

    }

}