:root {
  --cs-primary: #6c63ff;
  --cs-primary-2: #24b9f2;
  --cs-bg: #f5f7fb;
  --cs-panel: #ffffff;
  --cs-panel-2: #f0f3f9;
  --cs-text: #1f2937;
  --cs-muted: #6b7280;
  --cs-border: #e5e7eb;
  --cs-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}
html[data-clickstar-theme="dark"] {
  --cs-bg: #070c15;
  --cs-panel: #0e1726;
  --cs-panel-2: #111d30;
  --cs-text: #eef2ff;
  --cs-muted: #91a0b7;
  --cs-border: #22324a;
  --cs-shadow: 0 18px 55px rgba(0, 0, 0, .34);
}
html[data-clickstar-theme="dark"] body,
html[data-clickstar-theme="dark"] .layout-page,
html[data-clickstar-theme="dark"] .content-wrapper { background: var(--cs-bg) !important; color: var(--cs-text); }
html[data-clickstar-theme="dark"] .card,
html[data-clickstar-theme="dark"] .modal-content,
html[data-clickstar-theme="dark"] .dropdown-menu,
html[data-clickstar-theme="dark"] .bg-navbar-theme,
html[data-clickstar-theme="dark"] .bg-menu-theme { background-color: var(--cs-panel) !important; color: var(--cs-text) !important; }
html[data-clickstar-theme="dark"] .menu-vertical,
html[data-clickstar-theme="dark"] .layout-navbar,
html[data-clickstar-theme="dark"] .card,
html[data-clickstar-theme="dark"] .modal-content { border-color: var(--cs-border) !important; }
html[data-clickstar-theme="dark"] .form-control,
html[data-clickstar-theme="dark"] .form-select,
html[data-clickstar-theme="dark"] .input-group-text { background-color: var(--cs-panel-2) !important; border-color: var(--cs-border) !important; color: var(--cs-text) !important; }
html[data-clickstar-theme="dark"] .form-control::placeholder { color: #708096; }
html[data-clickstar-theme="dark"] .text-muted { color: var(--cs-muted) !important; }
html[data-clickstar-theme="dark"] .table { --bs-table-color: var(--cs-text); --bs-table-bg: transparent; --bs-table-border-color: var(--cs-border); }
html[data-clickstar-theme="dark"] .menu-link,
html[data-clickstar-theme="dark"] .dropdown-item,
html[data-clickstar-theme="dark"] .navbar-nav .nav-link { color: var(--cs-text) !important; }
html[data-clickstar-theme="dark"] .menu-item.active > .menu-link { background: linear-gradient(135deg, rgba(108,99,255,.22), rgba(36,185,242,.13)) !important; }
.cs-theme-toggle {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cs-border); border-radius: 12px; background: var(--cs-panel); color: var(--cs-text);
  transition: .2s ease; cursor: pointer;
}
.cs-theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--cs-shadow); }
.cs-gradient-btn { background: linear-gradient(100deg, var(--cs-primary), var(--cs-primary-2)) !important; border: 0 !important; color:#fff !important; }
.cs-soft-card { border: 1px solid var(--cs-border); border-radius: 18px; box-shadow: var(--cs-shadow); }

/* Auth */
.cs-auth-body { margin:0; min-height:100vh; background:var(--cs-bg); color:var(--cs-text); font-family:'Public Sans',system-ui,-apple-system,sans-serif; }
.cs-auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(520px,1.18fr); }
.cs-auth-hero { position:relative; overflow:hidden; min-height:100vh; padding:42px clamp(30px,5vw,82px); display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#131633 0%,#11152a 45%,#07131c 100%); color:#eef2ff; border-right:1px solid rgba(141,158,255,.13); }
html[data-clickstar-theme="light"] .cs-auth-hero { background:linear-gradient(145deg,#161a3e 0%,#10152d 50%,#071722 100%); }
.cs-auth-hero::after { content:""; position:absolute; width:480px; height:480px; border:1px solid rgba(108,99,255,.22); border-radius:50%; right:-220px; bottom:-165px; box-shadow:0 0 0 58px rgba(36,185,242,.035),0 0 0 118px rgba(108,99,255,.025); }
.cs-auth-brand { display:flex; align-items:center; gap:12px; position:relative; z-index:2; }
.cs-auth-brand img { width:48px; height:48px; object-fit:contain; border-radius:14px; background:linear-gradient(135deg,#6963ff,#24b9f2); padding:7px; }
.cs-auth-brand strong { font-size:20px; letter-spacing:-.02em; }
.cs-auth-brand small { display:block; color:#8292b1; font-size: 13px; margin-top:2px; }
.cs-auth-copy { max-width:650px; position:relative; z-index:2; }
.cs-auth-kicker { text-transform:uppercase; color:#8593df; letter-spacing:.18em; font-weight:700; font-size: 13px; margin-bottom:16px; }
.cs-auth-copy h1 { font-size:clamp(38px,4vw,64px); line-height:1.04; letter-spacing:-.045em; margin:0 0 18px; font-weight:800; }
.cs-auth-copy p { color:#98a8c6; line-height:1.75; max-width:620px; }
.cs-auth-pills { display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:2; }
.cs-auth-pill { border:1px solid rgba(144,164,202,.16); background:rgba(8,14,25,.28); color:#9fb0cc; border-radius:999px; padding:8px 12px; font-size: 13px; }
.cs-auth-main { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:36px; position:relative; background:var(--cs-bg); }
.cs-auth-top { position:absolute; right:28px; top:26px; }
.cs-auth-card { width:min(100%,520px); border:1px solid var(--cs-border); border-radius:24px; background:var(--cs-panel); padding:34px; box-shadow:var(--cs-shadow); }
.cs-auth-card-head { display:flex; gap:14px; align-items:center; margin-bottom:26px; }
.cs-auth-icon { width:46px; height:46px; border-radius:14px; background:rgba(108,99,255,.12); border:1px solid rgba(108,99,255,.24); display:grid; place-items:center; color:#8c7dff; font-size:22px; }
.cs-auth-label { color:#7990b6; text-transform:uppercase; letter-spacing:.15em; font-size: 13px; font-weight:800; }
.cs-auth-card h2 { font-size:24px; margin:3px 0 4px; color:var(--cs-text); }
.cs-auth-card .subtitle { color:var(--cs-muted); margin:0; font-size:13px; }
.cs-field { margin-bottom:16px; }
.cs-field label { display:block; color:var(--cs-text); font-size: 13px; font-weight:700; margin-bottom:7px; }
.cs-field .form-control { height:48px; border-radius:12px; background:var(--cs-panel-2); border:1px solid var(--cs-border); color:var(--cs-text); }
.cs-password { position:relative; }
.cs-password .form-control { padding-right:48px; }
.cs-password button { position:absolute; right:6px; top:6px; width:36px; height:36px; border:0; background:transparent; color:var(--cs-muted); border-radius:10px; }
.cs-auth-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size: 13px; margin:7px 0 18px; }
.cs-auth-meta a { color:#8c7dff; text-decoration:none; }
.cs-auth-submit { width:100%; height:48px; border-radius:12px; font-weight:700; box-shadow:0 12px 28px rgba(75,110,255,.2); }
.cs-auth-switch { margin-top:16px; border:1px solid var(--cs-border); border-radius:13px; padding:11px 12px; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--cs-muted); font-size: 13px; }
.cs-auth-switch a { color:var(--cs-text); border:1px solid var(--cs-border); border-radius:10px; padding:8px 12px; text-decoration:none; font-weight:700; background:var(--cs-panel-2); }
.cs-auth-footerline { border-top:1px solid var(--cs-border); margin-top:20px; padding-top:15px; display:flex; justify-content:space-between; font-size: 13px; color:var(--cs-muted); }

/* Backup manager */
.cs-backup-hero { border:1px solid var(--cs-border); background:linear-gradient(135deg,rgba(108,99,255,.11),rgba(36,185,242,.06)); border-radius:20px; padding:24px; margin-bottom:22px; }
.cs-backup-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.cs-backup-stat { border:1px solid var(--cs-border); background:var(--cs-panel); border-radius:16px; padding:16px; }
.cs-backup-stat small { display:block; color:var(--cs-muted); margin-bottom:6px; }
.cs-backup-stat strong { font-size:20px; color:var(--cs-text); }
.cs-backup-status { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:6px 10px; font-size: 13px; font-weight:700; }
.cs-backup-status.ok { background:rgba(32,201,151,.12); color:#20c997; }
.cs-backup-status.running { background:rgba(255,193,7,.13); color:#d79d00; }
.cs-backup-status.error { background:rgba(220,53,69,.12); color:#dc3545; }
@media(max-width: 1050px){ .cs-auth-shell{grid-template-columns:1fr;} .cs-auth-hero{min-height:400px;} .cs-auth-main{min-height:auto;padding:34px 20px 60px;} .cs-backup-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width: 600px){ .cs-auth-hero{padding:28px 22px;min-height:360px;} .cs-auth-copy h1{font-size:38px;} .cs-auth-card{padding:24px 18px;} .cs-auth-top{right:16px;top:16px;} .cs-backup-grid{grid-template-columns:1fr;} }

/* ================================
   IDENTIDADE VISUAL - PERFIL
   ================================ */

.cs-upload-box {
    height: 100%;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 16px;
    background: rgba(15, 23, 42, .45);
}

.cs-upload-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.cs-upload-preview {
    width: 100%;
    min-height: 170px;
    max-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed rgba(148, 163, 184, .25);
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 16px;
    background: rgba(2, 6, 23, .18);
}

.cs-upload-preview img {
    display: block;
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Logos horizontais */
.cs-upload-preview-logo img,
.cs-upload-preview-menu img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

/* Avatar */
.cs-upload-preview-avatar {
    min-height: 170px;
}

.cs-upload-preview-avatar img {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, .35);
}

/* Campo de arquivo */
.cs-upload-box input[type="file"] {
    width: 100%;
}

/* Mobile */
@media (max-width: 767.98px) {
    .cs-upload-preview {
        min-height: 140px;
        max-height: 160px;
    }

    .cs-upload-preview img {
        max-height: 120px;
    }

    .cs-upload-preview-avatar img {
        width: 96px;
        height: 96px;
        max-width: 96px;
        max-height: 96px;
    }
}

/* =====================================================
   CORREÇÃO FORÇADA - IDENTIDADE VISUAL / PERFIL
   ===================================================== */

.cs-upload-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.cs-upload-preview {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    padding: 18px !important;
    margin: 0 0 15px 0 !important;

    border-radius: 14px !important;
}

.cs-upload-preview img,
.cs-upload-preview-logo img,
.cs-upload-preview-menu img {
    position: static !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 125px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    display: block !important;
    margin: auto !important;

    transform: none !important;
}

/* AVATAR */
.cs-upload-preview-avatar {
    width: 100% !important;
    height: 170px !important;
    max-height: 170px !important;
    overflow: hidden !important;
}

.cs-upload-preview-avatar img,
#preview-avatar {
    position: static !important;

    width: 110px !important;
    height: 110px !important;

    min-width: 110px !important;
    min-height: 110px !important;

    max-width: 110px !important;
    max-height: 110px !important;

    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;

    display: block !important;
    margin: auto !important;

    transform: none !important;
}

/* Evita estouro horizontal dos três cards */
#formperfil .row {
    max-width: 100% !important;
}

#formperfil .col-md-4 {
    min-width: 0 !important;
    overflow: hidden !important;
}

#formperfil input[type="file"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .cs-upload-preview,
    .cs-upload-preview-avatar {
        height: 145px !important;
        min-height: 145px !important;
        max-height: 145px !important;
    }

    .cs-upload-preview img,
    .cs-upload-preview-logo img,
    .cs-upload-preview-menu img {
        max-height: 105px !important;
    }

    .cs-upload-preview-avatar img,
    #preview-avatar {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
    }
}

/* =========================================
   LOGIN - CORREÇÃO AUTOFILL / SENHA SALVA
   ========================================= */

.cs-auth-card input:-webkit-autofill,
.cs-auth-card input:-webkit-autofill:hover,
.cs-auth-card input:-webkit-autofill:focus,
.cs-auth-card input:-webkit-autofill:active {
    -webkit-text-fill-color: #e8eefc !important;
    caret-color: #e8eefc !important;
    -webkit-box-shadow: 0 0 0 1000px #0d1728 inset !important;
    box-shadow: 0 0 0 1000px #0d1728 inset !important;
    border: 1px solid rgba(96, 165, 250, .28) !important;
    transition: background-color 9999s ease-out 0s !important;
}

.cs-auth-card input:-moz-autofill {
    color: #e8eefc !important;
    background: #0d1728 !important;
    border-color: rgba(96, 165, 250, .28) !important;
}

.cs-auth-card .form-control {
    color: #e8eefc !important;
}

.cs-auth-card .form-control::placeholder {
    color: #71819b !important;
    opacity: 1;
}

.cs-auth-card input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14) !important;
}

/* Remove aparência amarelada/azulada do login salvo */
.cs-auth-card input {
    background-color: #0d1728 !important;
    background-clip: padding-box !important;
}

/* =====================================================
   CLICKSTAR - IDENTIDADE VISUAL MODERNA DO PAINEL
   Sidebar + Navbar + Menu + Cards
   ===================================================== */

:root {
    --cs-sidebar-width: 250px;
    --cs-radius: 14px;
    --cs-radius-sm: 10px;
    --cs-border-dark: rgba(148, 163, 184, .14);
    --cs-text-muted-dark: #8fa1b8;
}

/* ---------- SIDEBAR ---------- */
#layout-menu {
    width: var(--cs-sidebar-width) !important;
    border-right: 1px solid var(--cs-border-dark) !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .08) !important;
    overflow: hidden !important;
}

#layout-menu .app-brand {
    min-height: 100px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
}

#layout-menu .app-brand > a:first-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#layout-menu .app-brand img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 190px !important;
    max-height: 68px !important;
    object-fit: contain !important;
    margin: auto !important;
}

#layout-menu .menu-inner {
    padding: 16px 12px !important;
}

#layout-menu .menu-item {
    margin: 3px 0 !important;
}

#layout-menu .menu-link {
    min-height: 44px !important;
    padding: 10px 13px !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}

#layout-menu .menu-link:hover {
    transform: translateX(2px);
}

#layout-menu .menu-icon {
    font-size: 19px !important;
    width: 24px !important;
    margin-right: 10px !important;
}

/* Item ativo */
#layout-menu .menu-item.active > .menu-link,
#layout-menu .menu-item.open > .menu-link {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, .92),
        rgba(37, 99, 235, .82)
    ) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .20) !important;
}

/* Submenus */
#layout-menu .menu-sub {
    padding-top: 4px !important;
    padding-bottom: 5px !important;
}

#layout-menu .menu-sub .menu-link {
    min-height: 38px !important;
    padding-left: 42px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#layout-menu .menu-sub .menu-item.active > .menu-link {
    background: rgba(99, 102, 241, .13) !important;
    color: #8b7cff !important;
    box-shadow: none !important;
}

/* Footer do menu */
#layout-menu .content-footer {
    margin-top: auto !important;
    border-top: 1px solid rgba(148, 163, 184, .10) !important;
}

#layout-menu .content-footer .container-xxl {
    padding: 14px 16px !important;
}

#layout-menu .footer-link {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

/* ---------- CONTEÚDO / PAGE ---------- */
.layout-page {
    min-width: 0 !important;
}

/* ---------- NAVBAR ---------- */
#layout-navbar {
    min-height: 68px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08) !important;
    backdrop-filter: blur(12px);
}

#layout-navbar .navbar-nav-right {
    min-height: 66px !important;
}

/* Busca */
#layout-navbar .nav-item.d-flex.align-items-center {
    min-width: 280px;
    padding: 0 12px !important;
    border-radius: 11px !important;
    transition: background .2s ease !important;
}

#layout-navbar .nav-item.d-flex.align-items-center:focus-within {
    background: rgba(99, 102, 241, .06);
}

#layout-navbar input.form-control {
    height: 42px !important;
    font-weight: 500 !important;
}

/* Theme button */
.cs-theme-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease !important;
}

.cs-theme-toggle:hover {
    transform: translateY(-1px);
}

/* Avatar navbar */
#layout-navbar .avatar {
    width: 42px !important;
    height: 42px !important;
}

#layout-navbar .avatar img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

#layout-navbar .avatar-online:after {
    width: 10px !important;
    height: 10px !important;
    border-width: 2px !important;
}

/* ---------- DROPDOWN DO USUÁRIO ---------- */
.dropdown-user .dropdown-menu {
    min-width: 240px !important;
    padding: 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .16) !important;
}

.dropdown-user .dropdown-item {
    border-radius: 9px !important;
    padding: 10px 12px !important;
}

/* ---------- CARDS GERAIS ---------- */
.card {
    border-radius: var(--cs-radius) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .035) !important;
}

.card-header {
    padding: 18px 20px !important;
    font-weight: 700 !important;
}

.card-body {
    padding: 20px !important;
}

/* ---------- BOTÕES ---------- */
.btn {
    border-radius: 10px !important;
    font-weight: 650 !important;
    min-height: 40px;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease !important;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    border: 0 !important;
    background: linear-gradient(
        135deg,
        #635bff,
        #2fb7ef
    ) !important;
    box-shadow: 0 7px 18px rgba(79, 70, 229, .20) !important;
}

/* ---------- FORMULÁRIOS ---------- */
.form-control,
.form-select,
.input-group-text {
    border-radius: 10px !important;
}

.form-control,
.form-select {
    min-height: 42px !important;
}

.form-label {
    margin-bottom: 7px !important;
    font-weight: 600 !important;
}

/* ---------- TABELAS ---------- */
.table {
    --bs-table-bg: transparent !important;
}

.table > :not(caption) > * > * {
    padding: 13px 16px !important;
}

/* ---------- NAV PILLS DAS PÁGINAS ---------- */
.nav-pills {
    gap: 7px !important;
}

.nav-pills .nav-link {
    min-height: 40px !important;
    padding: 9px 13px !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1199.98px) {
    #layout-menu {
        width: 260px !important;
    }
}

@media (max-width: 767.98px) {
    #layout-navbar {
        margin: 8px !important;
        border-radius: 13px !important;
    }

    #layout-navbar .nav-item.d-flex.align-items-center {
        min-width: 0 !important;
        width: 100% !important;
    }

    .card-header,
    .card-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* =====================================================
   CLICKSTAR - IDENTIDADE VISUAL MODERNA DO PAINEL
   Sidebar + Navbar + Menu + Cards
   ===================================================== */

:root {
    --cs-sidebar-width: 250px;
    --cs-radius: 14px;
    --cs-radius-sm: 10px;
    --cs-border-dark: rgba(148, 163, 184, .14);
    --cs-text-muted-dark: #8fa1b8;
}

/* ---------- SIDEBAR ---------- */
#layout-menu {
    width: var(--cs-sidebar-width) !important;
    border-right: 1px solid var(--cs-border-dark) !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .08) !important;
    overflow: hidden !important;
}

#layout-menu .app-brand {
    min-height: 100px !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
}

#layout-menu .app-brand > a:first-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#layout-menu .app-brand img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 190px !important;
    max-height: 68px !important;
    object-fit: contain !important;
    margin: auto !important;
}

#layout-menu .menu-inner {
    padding: 16px 12px !important;
}

#layout-menu .menu-item {
    margin: 3px 0 !important;
}

#layout-menu .menu-link {
    min-height: 44px !important;
    padding: 10px 13px !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}

#layout-menu .menu-link:hover {
    transform: translateX(2px);
}

#layout-menu .menu-icon {
    font-size: 19px !important;
    width: 24px !important;
    margin-right: 10px !important;
}

/* Item ativo */
#layout-menu .menu-item.active > .menu-link,
#layout-menu .menu-item.open > .menu-link {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, .92),
        rgba(37, 99, 235, .82)
    ) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .20) !important;
}

/* Submenus */
#layout-menu .menu-sub {
    padding-top: 4px !important;
    padding-bottom: 5px !important;
}

#layout-menu .menu-sub .menu-link {
    min-height: 38px !important;
    padding-left: 42px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

#layout-menu .menu-sub .menu-item.active > .menu-link {
    background: rgba(99, 102, 241, .13) !important;
    color: #8b7cff !important;
    box-shadow: none !important;
}

/* Footer do menu */
#layout-menu .content-footer {
    margin-top: auto !important;
    border-top: 1px solid rgba(148, 163, 184, .10) !important;
}

#layout-menu .content-footer .container-xxl {
    padding: 14px 16px !important;
}

#layout-menu .footer-link {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

/* ---------- CONTEÚDO / PAGE ---------- */
.layout-page {
    min-width: 0 !important;
}

/* ---------- NAVBAR ---------- */
#layout-navbar {
    min-height: 68px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08) !important;
    backdrop-filter: blur(12px);
}

#layout-navbar .navbar-nav-right {
    min-height: 66px !important;
}

/* Busca */
#layout-navbar .nav-item.d-flex.align-items-center {
    min-width: 280px;
    padding: 0 12px !important;
    border-radius: 11px !important;
    transition: background .2s ease !important;
}

#layout-navbar .nav-item.d-flex.align-items-center:focus-within {
    background: rgba(99, 102, 241, .06);
}

#layout-navbar input.form-control {
    height: 42px !important;
    font-weight: 500 !important;
}

/* Theme button */
.cs-theme-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease !important;
}

.cs-theme-toggle:hover {
    transform: translateY(-1px);
}

/* Avatar navbar */
#layout-navbar .avatar {
    width: 42px !important;
    height: 42px !important;
}

#layout-navbar .avatar img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

#layout-navbar .avatar-online:after {
    width: 10px !important;
    height: 10px !important;
    border-width: 2px !important;
}

/* ---------- DROPDOWN DO USUÁRIO ---------- */
.dropdown-user .dropdown-menu {
    min-width: 240px !important;
    padding: 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .16) !important;
}

.dropdown-user .dropdown-item {
    border-radius: 9px !important;
    padding: 10px 12px !important;
}

/* ---------- CARDS GERAIS ---------- */
.card {
    border-radius: var(--cs-radius) !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .035) !important;
}

.card-header {
    padding: 18px 20px !important;
    font-weight: 700 !important;
}

.card-body {
    padding: 20px !important;
}

/* ---------- BOTÕES ---------- */
.btn {
    border-radius: 10px !important;
    font-weight: 650 !important;
    min-height: 40px;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        opacity .16s ease !important;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    border: 0 !important;
    background: linear-gradient(
        135deg,
        #635bff,
        #2fb7ef
    ) !important;
    box-shadow: 0 7px 18px rgba(79, 70, 229, .20) !important;
}

/* ---------- FORMULÁRIOS ---------- */
.form-control,
.form-select,
.input-group-text {
    border-radius: 10px !important;
}

.form-control,
.form-select {
    min-height: 42px !important;
}

.form-label {
    margin-bottom: 7px !important;
    font-weight: 600 !important;
}

/* ---------- TABELAS ---------- */
.table {
    --bs-table-bg: transparent !important;
}

.table > :not(caption) > * > * {
    padding: 13px 16px !important;
}

/* ---------- NAV PILLS DAS PÁGINAS ---------- */
.nav-pills {
    gap: 7px !important;
}

.nav-pills .nav-link {
    min-height: 40px !important;
    padding: 9px 13px !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1199.98px) {
    #layout-menu {
        width: 260px !important;
    }
}

@media (max-width: 767.98px) {
    #layout-navbar {
        margin: 8px !important;
        border-radius: 13px !important;
    }

    #layout-navbar .nav-item.d-flex.align-items-center {
        min-width: 0 !important;
        width: 100% !important;
    }

    .card-header,
    .card-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* =====================================================
   CLICKSTAR DASHBOARD 2026
   ===================================================== */

.cs-dashboard {
    max-width: 1450px !important;
}

/* HERO */

.cs-dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 24px;
    padding: 30px;
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(116, 128, 255, .18);
    border-radius: 20px;
    background:
        radial-gradient(circle at 85% 10%, rgba(47, 183, 239, .13), transparent 32%),
        radial-gradient(circle at 10% 100%, rgba(99, 91, 255, .12), transparent 36%),
        rgba(15, 27, 46, .72);
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.cs-dashboard-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #818cf8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
}

.cs-dashboard-hero h2 {
    margin: 0 0 7px;
    font-size: clamp(25px, 2vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
}

.cs-dashboard-greeting {
    margin: 0;
    opacity: .68;
    font-size: 14px;
}

.cs-dashboard-status {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.cs-dashboard-status-item {
    min-width: 195px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.cs-status-icon {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #818cf8;
    background: rgba(99,102,241,.12);
    font-size: 19px;
}

.cs-dashboard-status-item small {
    display: block;
    margin-bottom: 2px;
    opacity: .58;
    font-size: 13px;
}

.cs-dashboard-status-item strong {
    display: block;
    font-size: 14px;
}

/* AÇÕES HERO */

.cs-dashboard-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.cs-dashboard-action {
    display: grid;
    grid-template-columns: 42px 1fr 20px;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 13px;
    color: inherit !important;
    text-decoration: none !important;
    background: rgba(255,255,255,.025);
    transition: .18s ease;
}

.cs-dashboard-action:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,.38);
    background: rgba(99,102,241,.07);
}

.cs-action-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #2fb7ef;
    background: rgba(47,183,239,.11);
    font-size: 20px;
}

.cs-action-icon.cs-youtube {
    color: #ff5252;
    background: rgba(255,82,82,.10);
}

.cs-dashboard-action small {
    display: block;
    opacity: .55;
    font-size: 13px;
}

.cs-dashboard-action strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

/* LINK TESTE */

.cs-dashboard-test {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 18px;
    margin-bottom: 28px;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 15px;
    background: rgba(15,27,46,.55);
}

.cs-dashboard-test-info {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-test-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #818cf8;
    background: rgba(99,102,241,.11);
    font-size: 20px;
}

.cs-dashboard-test-info small {
    display: block;
    margin-bottom: 3px;
    opacity: .5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-test-url {
    max-width: 700px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    opacity: .78;
}

.cs-dashboard-test-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cs-copy-test,
.cs-open-test {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 37px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
}

.cs-copy-test {
    border: 1px solid rgba(148,163,184,.16) !important;
}

.cs-open-test {
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(135deg,#635bff,#2fb7ef) !important;
}

/* CABEÇALHO MÉTRICAS */

.cs-dashboard-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 0 2px 14px;
}

.cs-dashboard-section-head span {
    display: block;
    margin-bottom: 3px;
    color: #818cf8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
}

.cs-dashboard-section-head h4 {
    margin: 0;
    font-size: 19px;
    font-weight: 750;
}

.cs-dashboard-section-head p {
    margin: 0;
    opacity: .5;
    font-size: 13px;
}

/* GRID */

.cs-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

/* CARD */

.cs-metric-card {
    position: relative;
    min-height: 172px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 16px;
    background: rgba(15,27,46,.68);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cs-metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99,102,241,.30);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.cs-metric-top {
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cs-metric-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #7ddf64;
    background: rgba(80,200,120,.10);
    font-size: 20px;
}

.cs-metric-danger {
    color: #ff6258;
    background: rgba(255,82,82,.10);
}

.cs-dashboard-select {
    width: 112px !important;
    min-height: 36px !important;
    padding: 5px 27px 5px 10px !important;
    font-size: 13px !important;
}

.cs-metric-content {
    margin-top: 15px;
}

.cs-metric-content > span {
    display: block;
    margin-bottom: 3px;
    opacity: .68;
    font-size: 13px;
    font-weight: 600;
}

.cs-metric-content > strong {
    display: block;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.04em;
}

.cs-metric-footer {
    margin-top: 11px;
    font-size: 13px;
    opacity: .72;
}

.cs-metric-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cs-positive {
    color: #65d86e;
}

.cs-negative {
    color: #ff6258;
}

/* RESPONSIVO */

@media (max-width: 1100px) {
    .cs-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .cs-dashboard-actions {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .cs-metrics-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 767.98px) {
    .cs-dashboard-hero {
        padding: 20px;
    }

    .cs-dashboard-actions,
    .cs-metrics-grid {
        grid-template-columns: 1fr;
    }

    .cs-dashboard-status-item {
        width: 100%;
    }

    .cs-dashboard-test {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-dashboard-test-actions {
        width: 100%;
    }

    .cs-dashboard-test-actions .btn {
        flex: 1;
    }

    .cs-dashboard-section-head p {
        display: none;
    }
}


/* =====================================================
   DASHBOARD - AJUSTES ESPECÍFICOS DO TEMA CLARO
   ===================================================== */

html[data-clickstar-theme="light"] body,
html[data-clickstar-theme="light"] .content-wrapper {
    background: #f5f7fb !important;
    color: #172033 !important;
}

/* HERO */
html[data-clickstar-theme="light"] .cs-dashboard-hero {
    background:
        radial-gradient(circle at 85% 10%, rgba(47,183,239,.08), transparent 32%),
        radial-gradient(circle at 10% 100%, rgba(99,91,255,.08), transparent 36%),
        #ffffff !important;

    border-color: #dfe5ef !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.06) !important;
}

html[data-clickstar-theme="light"] .cs-dashboard-hero h2,
html[data-clickstar-theme="light"] .cs-dashboard-hero strong,
html[data-clickstar-theme="light"] .cs-dashboard-section-head h4,
html[data-clickstar-theme="light"] .cs-metric-content > strong {
    color: #182235 !important;
}

html[data-clickstar-theme="light"] .cs-dashboard-greeting,
html[data-clickstar-theme="light"] .cs-dashboard-status-item small,
html[data-clickstar-theme="light"] .cs-dashboard-action small,
html[data-clickstar-theme="light"] .cs-dashboard-section-head p,
html[data-clickstar-theme="light"] .cs-metric-content > span,
html[data-clickstar-theme="light"] .cs-metric-footer {
    color: #66758c !important;
    opacity: 1 !important;
}

html[data-clickstar-theme="light"] .cs-dashboard-kicker,
html[data-clickstar-theme="light"] .cs-dashboard-section-head span {
    color: #635bff !important;
}

/* Status dentro do hero */
html[data-clickstar-theme="light"] .cs-dashboard-status-item {
    background: #f8faff !important;
    border-color: #e3e8f2 !important;
}

html[data-clickstar-theme="light"] .cs-status-icon {
    color: #635bff !important;
    background: #eef0ff !important;
}

/* Ações Telegram / YouTube */
html[data-clickstar-theme="light"] .cs-dashboard-action {
    background: #f9fbff !important;
    border-color: #e1e6ef !important;
    color: #243047 !important;
}

html[data-clickstar-theme="light"] .cs-dashboard-action:hover {
    background: #f1f4ff !important;
    border-color: #cfd6ff !important;
}

html[data-clickstar-theme="light"] .cs-dashboard-action strong {
    color: #243047 !important;
}

html[data-clickstar-theme="light"] .cs-action-icon {
    background: #e8f7ff !important;
}

html[data-clickstar-theme="light"] .cs-action-icon.cs-youtube {
    background: #fff0f0 !important;
}

/* Link de teste */
html[data-clickstar-theme="light"] .cs-dashboard-test {
    background: #ffffff !important;
    border-color: #dfe5ef !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.04) !important;
}

html[data-clickstar-theme="light"] .cs-test-icon {
    background: #eef0ff !important;
    color: #635bff !important;
}

html[data-clickstar-theme="light"] .cs-test-url {
    color: #56657b !important;
    opacity: 1 !important;
}

html[data-clickstar-theme="light"] .cs-copy-test {
    background: #f7f9fc !important;
    color: #394860 !important;
    border-color: #dfe5ef !important;
}

/* Cards das métricas */
html[data-clickstar-theme="light"] .cs-metric-card {
    background: #ffffff !important;
    border-color: #dfe5ef !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.04) !important;
}

html[data-clickstar-theme="light"] .cs-metric-card:hover {
    border-color: #cfd6ff !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.07) !important;
}

html[data-clickstar-theme="light"] .cs-metric-icon {
    background: #edf9f0 !important;
    color: #35a854 !important;
}

html[data-clickstar-theme="light"] .cs-metric-danger {
    background: #fff1f0 !important;
    color: #e74c3c !important;
}

html[data-clickstar-theme="light"] .cs-positive {
    color: #2f9e44 !important;
}

html[data-clickstar-theme="light"] .cs-negative {
    color: #e5484d !important;
}

/* Select do mês */
html[data-clickstar-theme="light"] .cs-dashboard-select {
    background-color: #ffffff !important;
    color: #2c3950 !important;
    border-color: #d9e0ea !important;
}

/* Navbar */
html[data-clickstar-theme="light"] #layout-navbar {
    background: #ffffff !important;
    border-color: #e2e7ef !important;
    box-shadow: 0 8px 25px rgba(15,23,42,.05) !important;
}

html[data-clickstar-theme="light"] #layout-navbar input.form-control {
    color: #273449 !important;
    background: transparent !important;
}

/* Cards gerais */
html[data-clickstar-theme="light"] .card {
    background: #ffffff !important;
    border-color: #e0e6ef !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.04) !important;
}

/* Dropdown */
html[data-clickstar-theme="light"] .dropdown-user .dropdown-menu {
    background: #ffffff !important;
    border-color: #e0e6ef !important;
}

html[data-clickstar-theme="light"] .dropdown-user .dropdown-item {
    color: #2f3b4f !important;
}

html[data-clickstar-theme="light"] .dropdown-user .dropdown-item:hover {
    background: #f3f6fb !important;
}

/* Forms */
html[data-clickstar-theme="light"] .form-control,
html[data-clickstar-theme="light"] .form-select {
    background-color: #ffffff !important;
    color: #253147 !important;
    border-color: #dce3ed !important;
}

html[data-clickstar-theme="light"] .form-control::placeholder {
    color: #95a2b5 !important;
}


/* =====================================================
   CLICKSTAR - PERFIL MODERNO
   ===================================================== */

.cs-profile-page .content-wrapper {
    background: transparent;
}

.cs-profile-page .container-p-y {
    max-width: 1450px;
}

/* Navegação superior da página */
.cs-profile-page .nav-pills {
    margin-bottom: 18px !important;
    padding: 5px;
    width: fit-content;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 13px;
    background: rgba(15,27,46,.48);
}

.cs-profile-page .nav-pills .nav-link {
    min-height: 40px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px !important;
    border-radius: 9px !important;
    font-size: 13px;
    font-weight: 700 !important;
}

.cs-profile-page .nav-pills .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg,#635bff,#4978f5) !important;
    box-shadow: 0 7px 18px rgba(79,70,229,.20);
}

/* Cards principais */
.cs-profile-page .card {
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.13) !important;
    border-radius: 18px !important;
    background: rgba(15,27,46,.68) !important;
    box-shadow: 0 14px 35px rgba(0,0,0,.06) !important;
}

.cs-profile-page .card-header {
    min-height: 66px;
    display: flex;
    align-items: center;
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(148,163,184,.10) !important;
    font-size: 17px;
    font-weight: 750 !important;
}

.cs-profile-page .card-body {
    padding: 24px !important;
}

/* Campos */
.cs-profile-page .form-label {
    margin-bottom: 7px !important;
    font-size: 13px;
    font-weight: 750 !important;
    letter-spacing: .015em;
}

.cs-profile-page .form-control,
.cs-profile-page .form-select {
    min-height: 44px !important;
    border-radius: 11px !important;
    border-color: rgba(148,163,184,.18) !important;
}

.cs-profile-page .form-control:focus,
.cs-profile-page .form-select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.11) !important;
}

/* Identidade visual */
.cs-profile-page .cs-upload-box {
    padding: 16px !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.025) !important;
}

.cs-profile-page .cs-upload-title {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 750;
}

.cs-profile-page .cs-upload-preview {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    margin-bottom: 12px !important;
    border: 1px dashed rgba(148,163,184,.18) !important;
    border-radius: 12px !important;
    background: rgba(2,6,23,.14) !important;
}

.cs-profile-page .cs-upload-preview-logo img,
.cs-profile-page .cs-upload-preview-menu img {
    max-width: 95% !important;
    max-height: 105px !important;
}

.cs-profile-page #preview-avatar {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
}

/* Botão salvar */
.cs-profile-page #formperfil > .row + .mt-2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px !important;
}

.cs-profile-page #formperfil button[type="submit"] {
    min-width: 150px;
    padding: 10px 20px !important;
}

/* Banco / integrações */
.cs-profile-page .card.mb-4.col-md-6 {
    width: 100%;
    max-width: none;
}

/* =====================================================
   PERFIL - TEMA CLARO
   ===================================================== */

html[data-clickstar-theme="light"] .cs-profile-page {
    background: #f5f7fb !important;
    color: #243047 !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .nav-pills {
    background: #fff !important;
    border-color: #e0e6ef !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .nav-pills .nav-link:not(.active) {
    color: #46556d !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .card {
    background: #fff !important;
    border-color: #dfe5ef !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.045) !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .card-header {
    color: #28364c !important;
    border-bottom-color: #e8ecf2 !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .form-label {
    color: #53627a !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .form-control,
html[data-clickstar-theme="light"] .cs-profile-page .form-select {
    color: #273449 !important;
    background: #fff !important;
    border-color: #dce3ed !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .form-control[readonly] {
    background: #f6f8fb !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .cs-upload-box {
    background: #f8faff !important;
    border-color: #e0e6ef !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .cs-upload-title {
    color: #35445b !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .cs-upload-preview {
    background: #fff !important;
    border-color: #d7deea !important;
}

html[data-clickstar-theme="light"] .cs-profile-page .text-muted {
    color: #78869a !important;
}

html[data-clickstar-theme="light"] .cs-profile-page small.text-muted {
    color: #8491a3 !important;
}

@media (max-width: 767.98px) {
    .cs-profile-page .card-body {
        padding: 17px !important;
    }

    .cs-profile-page .cs-upload-preview {
        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;
    }
}


/* =========================================================
   CLICKSTAR / CHATPLUS - CENTRAL DE CLIENTES
   ========================================================= */

.cs-client-page {
    padding: 28px 24px 40px;
    max-width: 1440px;
    margin: 0 auto;
}

.cs-client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.cs-client-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6c72ff;
}

.cs-client-header h2 {
    margin: 0;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.cs-client-header p {
    margin: 7px 0 0;
    opacity: .68;
    font-size: 14px;
}

.cs-client-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cs-client-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(135deg, #6466ff, #28b7ed);
    box-shadow: 0 8px 22px rgba(82, 100, 255, .20);
    text-decoration: none;
}

.cs-client-primary:hover {
    transform: translateY(-1px);
    color: #fff;
}

.cs-client-card {
    border: 1px solid rgba(132, 151, 185, .18) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(3, 10, 25, .06) !important;
}

.cs-client-card .card-header {
    padding: 20px 22px !important;
    border-bottom: 1px solid rgba(132, 151, 185, .14);
    background: transparent;
}

.cs-client-card .card-body {
    padding: 22px !important;
}

.cs-client-table-wrap {
    padding: 0 20px 20px;
}

.cs-client-table-wrap .table-responsive {
    border: 1px solid rgba(132, 151, 185, .15);
    border-radius: 14px;
    overflow: hidden;
}

.cs-client-table-wrap table {
    margin-bottom: 0 !important;
}

.cs-client-table-wrap table thead th {
    padding: 14px 16px !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    border-bottom-width: 1px !important;
}

.cs-client-table-wrap table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle;
}

.cs-client-form-card {
    max-width: 1000px;
    margin: 0 auto;
}

.cs-client-form-card label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
}

.cs-client-form-card .form-control,
.cs-client-form-card .form-select {
    min-height: 46px;
    border-radius: 11px;
}

.cs-client-form-card textarea.form-select,
.cs-client-form-card textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.cs-client-form-card .input-group .form-control:first-child {
    border-radius: 11px 0 0 11px;
}

.cs-client-form-card .input-group .form-control:last-child {
    border-radius: 0 11px 11px 0;
}

.cs-client-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
}

.cs-client-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
    font-size: 20px;
}

.cs-client-section-title h5 {
    margin: 0;
    font-weight: 800;
}

.cs-client-section-title small {
    display: block;
    margin-top: 3px;
    opacity: .62;
}

.cs-client-page .dataTables_wrapper {
    padding-top: 4px;
}

.cs-client-page .dataTables_filter input,
.cs-client-page .dataTables_length select {
    border-radius: 9px !important;
}

.cs-client-page .pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
}

/* DARK */
html[data-theme="dark"] .cs-client-card,
.dark-style .cs-client-card {
    background: #0d1829 !important;
    border-color: #20334e !important;
}

html[data-theme="dark"] .cs-client-table-wrap .table-responsive,
.dark-style .cs-client-table-wrap .table-responsive {
    border-color: #20334e;
}

html[data-theme="dark"] .cs-client-form-card .form-control,
html[data-theme="dark"] .cs-client-form-card .form-select,
.dark-style .cs-client-form-card .form-control,
.dark-style .cs-client-form-card .form-select {
    background: #0b1626 !important;
    border-color: #223651 !important;
    color: #e9effb !important;
}

/* LIGHT */
html:not([data-theme="dark"]) .cs-client-card,
.light-style .cs-client-card {
    background: #fff;
}

.light-style .cs-client-header h2,
.light-style .cs-client-section-title h5 {
    color: #27364c;
}

.light-style .cs-client-form-card .form-control,
.light-style .cs-client-form-card .form-select {
    background: #fff !important;
    border-color: #dbe3ee !important;
    color: #243248 !important;
}

/* MOBILE */
@media (max-width: 767px) {
    .cs-client-page {
        padding: 18px 14px 30px;
    }

    .cs-client-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .cs-client-header h2 {
        font-size: 23px;
    }

    .cs-client-actions,
    .cs-client-actions .cs-client-primary {
        width: 100%;
    }

    .cs-client-card .card-body {
        padding: 17px !important;
    }

    .cs-client-table-wrap {
        padding: 0 12px 14px;
    }
}

/* =========================================================
   CLIENTES V2 - CABEÇALHO / BOTÕES / CARD
   ========================================================= */

.cs-client-page {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 28px 24px 42px !important;
}

/* Cabeçalho */
.cs-client-header {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;

    width: 100% !important;
    margin: 0 0 22px !important;
    padding: 24px 26px !important;

    border: 1px solid rgba(120, 145, 185, .18) !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(99, 102, 241, .09),
            rgba(40, 183, 237, .035)
        ) !important;

    overflow: hidden;
}

.cs-client-header::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -120px;
    border-radius: 50%;
    background: rgba(99, 102, 241, .08);
    pointer-events: none;
}

.cs-client-header > div {
    position: relative;
    z-index: 1;
}

/* Etiqueta superior */
.cs-client-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    margin: 0 0 8px !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;

    color: #7478ff !important;
}

.cs-client-kicker i {
    font-size: 15px !important;
}

/* Título */
.cs-client-header h2 {
    margin: 0 !important;

    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;

    color: #e7edf8 !important;
}

/* Descrição */
.cs-client-header p {
    max-width: 650px !important;
    margin: 8px 0 0 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;

    color: #8796ad !important;
}

/* Área do botão */
.cs-client-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    flex-shrink: 0 !important;
}

/* Botão principal */
a.cs-client-primary,
.cs-client-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    min-width: 170px !important;
    min-height: 44px !important;

    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: linear-gradient(
        135deg,
        #6265f7 0%,
        #5577f5 48%,
        #27b7ec 100%
    ) !important;

    color: #fff !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 20px rgba(74, 91, 245, .22) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

a.cs-client-primary:hover,
.cs-client-primary:hover {
    color: #fff !important;
    text-decoration: none !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 11px 25px rgba(74, 91, 245, .30) !important;

    filter: brightness(1.05);
}

.cs-client-primary i {
    color: #fff !important;
    font-size: 18px !important;
}

/* Card principal */
.cs-client-page .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cs-client-page .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cs-client-card {
    width: 100% !important;
    margin: 0 !important;

    border: 1px solid #20324b !important;
    border-radius: 18px !important;

    background: #0e192a !important;

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .12) !important;
}

/* Cabeçalho interno */
.cs-client-card .card-header {
    min-height: auto !important;
    padding: 21px 22px 17px !important;

    border-bottom: 1px solid rgba(116, 139, 173, .13) !important;

    background: transparent !important;
}

.cs-client-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 !important;
}

.cs-client-section-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;

    border-radius: 11px !important;

    background: rgba(99, 102, 241, .12) !important;
    color: #777bff !important;
}

.cs-client-section-icon i {
    font-size: 20px !important;
}

.cs-client-section-title h5 {
    margin: 0 !important;

    color: #dce5f3 !important;

    font-size: 16px !important;
    font-weight: 750 !important;
}

.cs-client-section-title small {
    display: block !important;
    margin-top: 3px !important;

    color: #718198 !important;

    font-size: 13px !important;
}

/* DataTables */
.cs-client-table-wrap {
    width: 100% !important;
    padding: 18px 20px 22px !important;
}

.cs-client-table-wrap .table-responsive {
    width: 100% !important;
}

/* Botão TORNA CLIENTE */
.cs-client-page table .btn-primary {
    border: 0 !important;
    border-radius: 8px !important;

    padding: 7px 11px !important;

    background: rgba(99, 102, 241, .15) !important;
    color: #8589ff !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    box-shadow: none !important;
}

.cs-client-page table .btn-primary:hover {
    background: #6366f1 !important;
    color: #fff !important;
}

/* =========================================
   TEMA CLARO
   ========================================= */

.light-style .cs-client-header {
    border-color: #e1e7f0 !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7f9fd
        ) !important;

    box-shadow: 0 8px 25px rgba(37, 52, 79, .045) !important;
}

.light-style .cs-client-header h2 {
    color: #27364c !important;
}

.light-style .cs-client-header p {
    color: #7b899e !important;
}

.light-style .cs-client-card {
    background: #fff !important;
    border-color: #e0e7f0 !important;

    box-shadow:
        0 10px 28px rgba(31, 47, 74, .055) !important;
}

.light-style .cs-client-card .card-header {
    border-bottom-color: #edf1f6 !important;
}

.light-style .cs-client-section-title h5 {
    color: #314158 !important;
}

.light-style .cs-client-section-title small {
    color: #8a97aa !important;
}

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

@media (max-width: 767px) {

    .cs-client-page {
        padding: 18px 13px 30px !important;
    }

    .cs-client-header {
        align-items: flex-start !important;
        flex-direction: column !important;

        padding: 20px !important;
    }

    .cs-client-header h2 {
        font-size: 24px !important;
    }

    .cs-client-actions {
        width: 100% !important;
    }

    a.cs-client-primary,
    .cs-client-primary {
        width: 100% !important;
    }

    .cs-client-table-wrap {
        padding: 14px 12px 18px !important;
    }
}

/* =========================================================
   PERFIL V2
   ========================================================= */

.cs-profile-v2 .container-p-y {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 28px 24px 40px !important;
}

/* Navegação superior */
.cs-profile-v2 .nav-pills {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 22px !important;
    padding: 6px !important;
    border: 1px solid rgba(130,150,180,.15) !important;
    border-radius: 14px !important;
    background: rgba(15,27,46,.55) !important;
}

.cs-profile-v2 .nav-pills .nav-link {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 15px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.cs-profile-v2 .nav-pills .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg,#6265f7,#2fb7ef) !important;
    box-shadow: 0 8px 18px rgba(79,70,229,.22) !important;
}

/* Cards */
.cs-profile-v2 .card {
    border: 1px solid rgba(132,151,185,.16) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #0e192a !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}

.cs-profile-v2 .card-header {
    padding: 20px 22px !important;
    border-bottom: 1px solid rgba(132,151,185,.12) !important;
    background: transparent !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.cs-profile-v2 .card-body {
    padding: 22px !important;
}

/* Campos */
.cs-profile-v2 .form-label,
.cs-profile-v2 .col-form-label {
    margin-bottom: 7px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    letter-spacing: .02em !important;
}

.cs-profile-v2 .form-control,
.cs-profile-v2 .form-select {
    min-height: 44px !important;
    border-radius: 11px !important;
    border-color: #223650 !important;
    background: #0b1626 !important;
    color: #edf2fb !important;
}

.cs-profile-v2 .form-control:focus,
.cs-profile-v2 .form-select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

/* Identidade visual */
.cs-profile-v2 .cs-upload-box {
    height: 100% !important;
    padding: 16px !important;
    border: 1px solid #223650 !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.025) !important;
}

.cs-profile-v2 .cs-upload-title {
    margin-bottom: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.cs-profile-v2 .cs-upload-preview {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    border-radius: 12px !important;
    border: 1px dashed #2b405d !important;
    background: #0a1422 !important;
}

.cs-profile-v2 .cs-upload-preview-logo img,
.cs-profile-v2 .cs-upload-preview-menu img {
    max-width: 95% !important;
    max-height: 100px !important;
}

.cs-profile-v2 #preview-avatar {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
}

/* Botões */
.cs-profile-v2 .btn-primary {
    min-height: 42px !important;
    padding: 9px 18px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg,#6265f7,#2fb7ef) !important;
    box-shadow: 0 8px 18px rgba(79,70,229,.20) !important;
}

/* Seções do perfil */
.cs-profile-v2 h5,
.cs-profile-v2 .card-title {
    font-weight: 800 !important;
}

.cs-profile-v2 .text-muted {
    color: #8291a8 !important;
}

/* Tema claro */
html[data-clickstar-theme="light"] .cs-profile-v2 {
    background: #f5f7fb !important;
    color: #27364c !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .nav-pills {
    background: #fff !important;
    border-color: #e1e7f0 !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .nav-pills .nav-link:not(.active) {
    color: #53627a !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .card {
    background: #fff !important;
    border-color: #e0e7f0 !important;
    box-shadow: 0 10px 28px rgba(31,47,74,.05) !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .card-header {
    color: #2b3a50 !important;
    border-bottom-color: #edf1f6 !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .form-label,
html[data-clickstar-theme="light"] .cs-profile-v2 .col-form-label {
    color: #55657d !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .form-control,
html[data-clickstar-theme="light"] .cs-profile-v2 .form-select {
    background: #fff !important;
    color: #273449 !important;
    border-color: #dbe3ed !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .form-control[readonly] {
    background: #f6f8fb !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .cs-upload-box {
    background: #f8faff !important;
    border-color: #e0e6ef !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .cs-upload-preview {
    background: #fff !important;
    border-color: #d7deea !important;
}

html[data-clickstar-theme="light"] .cs-profile-v2 .cs-upload-title {
    color: #35445b !important;
}

/* Mobile */
@media (max-width: 767px) {
    .cs-profile-v2 .container-p-y {
        padding: 18px 13px 30px !important;
    }

    .cs-profile-v2 .nav-pills {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }

    .cs-profile-v2 .card-body {
        padding: 17px !important;
    }

    .cs-profile-v2 .cs-upload-preview {
        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;
    }
}

/* =========================================================
   CADASTRAR / EDITAR CLIENTE
   ========================================================= */

.cs-customer-create {
    max-width: 1180px !important;
}

.cs-customer-form-card {
    max-width: 920px !important;
    margin: 0 auto !important;
}

.cs-customer-form-card .card-body {
    padding: 26px !important;
}

.cs-customer-form {
    width: 100%;
}

.cs-customer-form .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cs-customer-form .col-sm-20,
.cs-customer-form .col-sm-10 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
}

.cs-customer-form label {
    display: block !important;
    margin: 0 0 8px !important;

    color: #a9b6c9 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.cs-customer-form label .text-danger {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.cs-customer-form .form-control,
.cs-customer-form .form-select {
    width: 100% !important;
    min-height: 46px !important;

    border: 1px solid #223650 !important;
    border-radius: 11px !important;

    background: #0b1626 !important;
    color: #e9eff9 !important;

    font-size: 13px !important;

    box-shadow: none !important;
}

.cs-customer-form .form-control:focus,
.cs-customer-form .form-select:focus {
    border-color: #6467f5 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}

.cs-customer-form .form-control::placeholder {
    color: #65758c !important;
}

/* Login + senha e Data + hora */
.cs-customer-form .input-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.cs-customer-form .input-group > .form-control {
    width: 100% !important;
    border-radius: 11px !important;
}

/* Notas */
.cs-customer-form textarea.form-select {
    min-height: 120px !important;
    padding: 13px 14px !important;
    resize: vertical !important;
}

/* Salvar */
.cs-customer-form button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 145px !important;
    min-height: 44px !important;

    padding: 0 22px !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: linear-gradient(135deg,#6265f7,#2fb7ef) !important;
    color: #fff !important;

    font-size: 13px !important;
    font-weight: 750 !important;

    box-shadow: 0 9px 22px rgba(79,70,229,.22) !important;
}

/* Voltar */
.cs-customer-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    min-height: 42px !important;
    padding: 0 16px !important;

    border: 1px solid #293d59 !important;
    border-radius: 10px !important;

    background: rgba(255,255,255,.025) !important;
    color: #aebbd0 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.cs-customer-back:hover {
    border-color: #6366f1 !important;
    color: #fff !important;
    background: rgba(99,102,241,.10) !important;
}

/* LIGHT */
html[data-clickstar-theme="light"] .cs-customer-form label {
    color: #596980 !important;
}

html[data-clickstar-theme="light"] .cs-customer-form .form-control,
html[data-clickstar-theme="light"] .cs-customer-form .form-select {
    background: #fff !important;
    color: #273449 !important;
    border-color: #dbe3ed !important;
}

html[data-clickstar-theme="light"] .cs-customer-form .form-control::placeholder {
    color: #9aa6b6 !important;
}

html[data-clickstar-theme="light"] .cs-customer-back {
    background: #fff !important;
    border-color: #dce3ed !important;
    color: #596980 !important;
}

html[data-clickstar-theme="light"] .cs-customer-back:hover {
    color: #5558e8 !important;
    border-color: #7779ee !important;
    background: #f7f7ff !important;
}

/* MOBILE */
@media (max-width: 767px) {

    .cs-customer-form-card .card-body {
        padding: 18px !important;
    }

    .cs-customer-form .input-group {
        grid-template-columns: 1fr !important;
    }

    .cs-customer-form button[type="submit"] {
        width: 100% !important;
    }

    .cs-customer-back {
        width: 100% !important;
    }
}

/* =========================================================
   BOT WHATSAPP V2
   ========================================================= */

.cs-zap-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 24px 42px;
}

.cs-zap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.cs-zap-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #6d72ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
}

.cs-zap-header h2 {
    margin: 0;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.cs-zap-header p {
    margin: 7px 0 0;
    color: #8391a6;
    font-size: 13px;
}

.cs-zap-live {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #213650;
    border-radius: 999px;
    background: #0d192a;
    color: #91a1b8;
    font-size: 13px;
    font-weight: 700;
}

.cs-zap-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,.10);
}

/* Navegação */
.cs-zap-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid #1d3048;
    border-radius: 14px;
    background: #0d1929;
}

.cs-zap-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    color: #8595aa;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.cs-zap-nav a:hover {
    color: #dce5f3;
    background: rgba(255,255,255,.035);
}

.cs-zap-nav a.active {
    color: #fff;
    background: linear-gradient(135deg,#6265f7,#2fb7ef);
    box-shadow: 0 7px 17px rgba(79,70,229,.18);
}

/* Grid */
.cs-zap-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: 18px;
    align-items: stretch;
}

.cs-zap-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #1c3048;
    border-radius: 18px;
    background: #0d1929;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.cs-zap-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.cs-zap-card-head span {
    display: block;
    margin-bottom: 3px;
    color: #71839c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-zap-card-head h4 {
    margin: 0;
    color: #e7edf7;
    font-size: 16px;
    font-weight: 800;
}

.cs-zap-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(34,197,94,.10);
    color: #35d274;
    font-size: 21px;
}

.cs-zap-icon-qr {
    background: rgba(99,102,241,.11);
    color: #8588ff;
}

/* Status */
.cs-zap-status-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 17px;
    border: 1px solid #20354f;
    border-radius: 14px;
    background: #0a1524;
}

.cs-zap-status-box small {
    display: block;
    margin-bottom: 7px;
    color: #71839b;
    font-size: 13px;
    font-weight: 700;
}

.cs-zap-status-line {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cs-zap-status-line strong {
    font-size: 15px;
    font-weight: 800;
}

.cs-zap-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #64748b;
}

.cs-zap-wifi {
    color: #53677f;
    font-size: 27px;
}

/* Informação */
.cs-zap-info {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding: 13px 14px;
    border: 1px solid rgba(59,130,246,.13);
    border-radius: 12px;
    background: rgba(59,130,246,.045);
}

.cs-zap-info i {
    margin-top: 2px;
    color: #5da1ff;
    font-size: 17px;
}

.cs-zap-info p {
    margin: 0;
    color: #8292a9;
    font-size: 13px;
    line-height: 1.65;
}

/* Ações */
.cs-zap-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.cs-zap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.cs-zap-btn-danger {
    border: 1px solid rgba(239,68,68,.25);
    background: rgba(239,68,68,.10);
    color: #fb7185;
}

.cs-zap-btn-warning {
    border: 1px solid rgba(245,158,11,.24);
    background: rgba(245,158,11,.09);
    color: #fbbf24;
}

.cs-zap-btn-outline {
    border: 1px solid #293d58;
    background: transparent;
    color: #95a4b9;
}

/* QR */
.cs-zap-qr-card {
    display: flex;
    flex-direction: column;
}

.cs-zap-qr-area {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 24px;
    overflow: hidden;
    border: 1px dashed #2b405c;
    border-radius: 16px;
    background:
        radial-gradient(circle at center, rgba(99,102,241,.07), transparent 55%),
        #091421;
}

.cs-zap-qr-area #qrcode {
    display: block;
    width: 290px;
    height: 290px;
    max-width: 100%;
    padding: 10px;
    object-fit: contain;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(0,0,0,.20);
}

.cs-zap-qr-area #qrcode.d-none {
    display: none !important;
}

.cs-zap-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #8fa0b6;
    text-align: center;
}

.cs-zap-loading .spinner-border {
    width: 34px;
    height: 34px;
    margin-bottom: 5px;
    color: #6366f1;
}

.cs-zap-loading strong {
    color: #dbe4f2;
    font-size: 13px;
}

.cs-zap-loading small {
    color: #71839a;
    font-size: 13px;
}

.cs-zap-code {
    margin: 14px 0 0;
    color: #e7edf7;
    font-size: 19px;
}

.cs-zap-qr-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 13px;
    color: #74869d;
    font-size: 13px;
    text-align: center;
}

/* LIGHT */
html[data-clickstar-theme="light"] .cs-zap-card,
html[data-clickstar-theme="light"] .cs-zap-nav,
html[data-clickstar-theme="light"] .cs-zap-live {
    background: #fff;
    border-color: #e0e7f0;
}

html[data-clickstar-theme="light"] .cs-zap-card {
    box-shadow: 0 10px 28px rgba(31,47,74,.05);
}

html[data-clickstar-theme="light"] .cs-zap-card-head h4,
html[data-clickstar-theme="light"] .cs-zap-loading strong {
    color: #2d3c52;
}

html[data-clickstar-theme="light"] .cs-zap-status-box {
    background: #f8faff;
    border-color: #e1e7f0;
}

html[data-clickstar-theme="light"] .cs-zap-qr-area {
    border-color: #d9e1ec;
    background:
        radial-gradient(circle at center, rgba(99,102,241,.055), transparent 55%),
        #f8faff;
}

html[data-clickstar-theme="light"] .cs-zap-nav a {
    color: #63738a;
}

html[data-clickstar-theme="light"] .cs-zap-info {
    background: #f7faff;
}

html[data-clickstar-theme="light"] .cs-zap-info p {
    color: #65758c;
}

/* MOBILE */
@media (max-width: 900px) {
    .cs-zap-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .cs-zap-page {
        padding: 18px 13px 32px;
    }

    .cs-zap-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .cs-zap-header h2 {
        font-size: 23px;
    }

    .cs-zap-live {
        align-self: flex-start;
    }

    .cs-zap-nav {
        width: 100%;
    }

    .cs-zap-card {
        padding: 17px;
    }

    .cs-zap-actions {
        flex-direction: column;
    }

    .cs-zap-btn {
        width: 100%;
    }

    .cs-zap-qr-area {
        min-height: 310px;
        padding: 18px;
    }

    .cs-zap-qr-area #qrcode {
        width: 250px;
        height: 250px;
    }
}

/* =========================================================
   CLICKSTAR - CENTRAL DO BOT
   ========================================================= */

.cs-bot-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.cs-bot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.cs-bot-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cs-bot-kicker i {
    font-size: 17px;
}

.cs-bot-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.035em;
}

.cs-bot-header p {
    max-width: 700px;
    margin: 7px 0 0;
    color: var(--bs-secondary-color);
    font-size: 14px;
    line-height: 1.6;
}

.cs-bot-header-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: rgba(105, 108, 255, .11);
    color: #696cff;
}

.cs-bot-header-icon i {
    font-size: 29px;
}

/* Navegação */

.cs-bot-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px;
    margin-bottom: 22px;
    overflow-x: auto;
    border: 1px solid rgba(127, 127, 127, .14);
    border-radius: 15px;
    background: var(--bs-body-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .025);
}

.cs-bot-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 11px;
    color: var(--bs-body-color);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: .2s ease;
}

.cs-bot-nav a i {
    font-size: 18px;
}

.cs-bot-nav a:hover {
    color: #696cff;
    background: rgba(105, 108, 255, .07);
}

.cs-bot-nav a.active {
    color: #fff !important;
    background: #696cff;
    box-shadow: 0 5px 14px rgba(105, 108, 255, .25);
}

/* Grid principal */

.cs-bot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cs-bot-panel,
.cs-bot-variables,
.cs-bot-savebar {
    border: 1px solid rgba(127, 127, 127, .14);
    background: var(--bs-body-bg);
    box-shadow: 0 5px 22px rgba(0, 0, 0, .035);
}

.cs-bot-panel {
    padding: 22px;
    border-radius: 17px;
}

.cs-bot-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 20px;
}

.cs-bot-panel-icon,
.cs-bot-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #696cff;
    background: rgba(105, 108, 255, .1);
}

.cs-bot-panel-icon i,
.cs-bot-section-icon i {
    font-size: 21px;
}

.cs-bot-panel-head h5,
.cs-bot-section-title h5 {
    margin: 1px 0 4px;
    font-size: 16px;
    font-weight: 800;
}

.cs-bot-panel-head p,
.cs-bot-section-title p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.5;
}

/* Campos */

.cs-bot-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.cs-bot-field-label label {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cs-bot-field-label span {
    padding: 4px 8px;
    border-radius: 20px;
    color: #696cff;
    background: rgba(105, 108, 255, .1);
    font-size: 13px;
    font-weight: 800;
}

.cs-bot-field-label span.optional {
    color: var(--bs-secondary-color);
    background: rgba(127, 127, 127, .09);
}

.cs-bot-field textarea.form-control {
    width: 100%;
    min-height: 260px;
    padding: 15px 16px;
    resize: vertical;
    border-radius: 12px !important;
    border: 1px solid rgba(127, 127, 127, .2) !important;
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    line-height: 1.6;
    transition: .2s ease;
}

.cs-bot-field textarea.form-control:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 3px rgba(105, 108, 255, .11) !important;
}

.cs-bot-field textarea::placeholder {
    color: var(--bs-secondary-color);
    opacity: .7;
}

.cs-bot-field-help {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-bot-field-help i {
    color: #696cff;
    font-size: 15px;
}

/* Variáveis */

.cs-bot-variables {
    margin-top: 20px;
    padding: 22px;
    border-radius: 17px;
}

.cs-bot-section-title > div {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.cs-variable-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.cs-variable-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(127, 127, 127, .13);
    border-radius: 13px;
    background: rgba(127, 127, 127, .025);
}

.cs-variable-code {
    display: inline-flex;
    margin-bottom: 11px;
    padding: 5px 9px;
    border-radius: 7px;
    color: #696cff;
    background: rgba(105, 108, 255, .1);
    font-family: monospace;
    font-size: 13px;
    font-weight: 800;
}

.cs-variable-content strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.cs-variable-content p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.5;
}

/* Barra salvar */

.cs-bot-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 15px;
}

.cs-bot-save-info {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.cs-bot-save-info > i {
    color: #696cff;
    font-size: 24px;
}

.cs-bot-save-info strong,
.cs-bot-save-info span {
    display: block;
}

.cs-bot-save-info strong {
    margin-bottom: 2px;
    font-size: 13px;
}

.cs-bot-save-info span {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-bot-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: #696cff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(105, 108, 255, .23);
    transition: .2s ease;
}

.cs-bot-save:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

/* Tema escuro */

html.dark-style .cs-bot-nav,
html.dark-style .cs-bot-panel,
html.dark-style .cs-bot-variables,
html.dark-style .cs-bot-savebar,
.dark-style .cs-bot-nav,
.dark-style .cs-bot-panel,
.dark-style .cs-bot-variables,
.dark-style .cs-bot-savebar {
    background: #111827;
    border-color: rgba(255, 255, 255, .07);
}

html.dark-style .cs-variable-card,
.dark-style .cs-variable-card {
    background: rgba(255, 255, 255, .025);
    border-color: rgba(255, 255, 255, .07);
}

html.dark-style .cs-bot-field textarea.form-control,
.dark-style .cs-bot-field textarea.form-control {
    background: #0d1524 !important;
    border-color: rgba(255, 255, 255, .09) !important;
}

/* Responsivo */

@media (max-width: 991.98px) {
    .cs-bot-grid {
        grid-template-columns: 1fr;
    }

    .cs-variable-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .cs-bot-page {
        padding: 20px 14px 30px;
    }

    .cs-bot-header {
        align-items: flex-start;
    }

    .cs-bot-header-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .cs-bot-header h2 {
        font-size: 23px;
    }

    .cs-bot-nav {
        justify-content: flex-start;
    }

    .cs-bot-nav a {
        padding: 0 13px;
    }

    .cs-bot-panel,
    .cs-bot-variables {
        padding: 17px;
    }

    .cs-bot-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-bot-save {
        width: 100%;
    }
}


/* =========================================================
   FLUXOS / MENSAGENS
   ========================================================= */

.cs-flow-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.cs-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .65fr);
    gap: 20px;
}

.cs-flow-builder,
.cs-flow-tools,
.cs-flow-list-card {
    border: 1px solid rgba(127,127,127,.14);
    border-radius: 17px;
    background: var(--bs-body-bg);
    box-shadow: 0 6px 24px rgba(0,0,0,.035);
}

.cs-flow-builder,
.cs-flow-tools {
    padding: 22px;
}

.cs-flow-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cs-flow-title-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #696cff;
    background: rgba(105,108,255,.1);
    font-size: 21px;
}

.cs-flow-title h4 {
    margin: 1px 0 4px;
    font-size: 16px;
    font-weight: 800;
}

.cs-flow-title p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-flow-form-wrap {
    margin-top: 22px;
}

/* Form principal */
.cs-flow-form-wrap #formAccountSettings > .row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin: 0 !important;
}

.cs-flow-form-wrap #formAccountSettings .mb-3 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cs-flow-form-wrap label {
    margin-bottom: 7px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cs-flow-form-wrap .form-control {
    min-height: 44px;
    border-radius: 11px !important;
    border: 1px solid rgba(127,127,127,.2) !important;
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

.cs-flow-form-wrap textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.cs-flow-form-wrap .form-control:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 3px rgba(105,108,255,.1) !important;
}

/* Esconde botão Exportar antigo dentro do formulário */
.cs-flow-form-wrap button[onclick="baixarFluxos()"] {
    display: none !important;
}

.cs-flow-form-wrap .btn-group {
    margin-top: 18px !important;
}

.cs-flow-form-wrap button[type="submit"] {
    min-height: 42px;
    padding: 0 18px;
    border: 0 !important;
    border-radius: 10px !important;
    background: #696cff !important;
    font-weight: 750;
}

/* Ferramentas */
.cs-flow-tools {
    align-self: start;
}

.cs-flow-export-card,
.cs-flow-import-card {
    margin-top: 18px;
    padding: 15px;
    border: 1px solid rgba(127,127,127,.13);
    border-radius: 13px;
    background: rgba(127,127,127,.025);
}

.cs-flow-export-card {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px 12px;
    align-items: center;
}

.cs-flow-export-card > i {
    grid-row: span 2;
    font-size: 24px;
    color: #696cff;
}

.cs-flow-export-card strong,
.cs-flow-import-card strong {
    display: block;
    font-size: 13px;
}

.cs-flow-export-card span,
.cs-flow-import-card p {
    display: block;
    margin: 3px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-flow-tool-btn {
    grid-column: 2;
    justify-self: start;
    min-height: 36px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #696cff;
    font-size: 13px;
    font-weight: 750;
}

.cs-flow-import-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-flow-import-card > div:first-child i {
    color: #696cff;
    font-size: 20px;
}

.cs-flow-import-form {
    margin-top: 12px;
}

.cs-flow-import-form form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-flow-import-form input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(127,127,127,.18);
    border-radius: 9px;
}

.cs-flow-import-form .btn-success {
    width: 100%;
    border-radius: 9px !important;
}

.cs-flow-tip {
    display: flex;
    gap: 9px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 11px;
    background: rgba(59,130,246,.055);
}

.cs-flow-tip i {
    color: #60a5fa;
    font-size: 17px;
}

.cs-flow-tip p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.55;
}

/* Lista */
.cs-flow-list-card {
    margin-top: 20px;
    overflow: hidden;
}

.cs-flow-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(127,127,127,.12);
}

.cs-flow-delete-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(239,68,68,.18);
    border-radius: 9px;
    color: #ef4444;
    background: rgba(239,68,68,.06);
    font-size: 13px;
    font-weight: 750;
}

.cs-flow-table-wrap {
    padding: 18px 20px 22px;
}

.cs-flow-table-wrap .table-responsive {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.13);
    border-radius: 13px;
}

/* Accordion antigo dentro do form */
.cs-flow-form-wrap .accordion {
    margin-top: 10px !important;
}

.cs-flow-form-wrap .accordion-item {
    border-radius: 10px !important;
    overflow: hidden;
}

.cs-flow-form-wrap .accordion-button {
    font-size: 13px !important;
}

/* Dark */
.dark-style .cs-flow-builder,
.dark-style .cs-flow-tools,
.dark-style .cs-flow-list-card {
    background: #111827;
    border-color: rgba(255,255,255,.07);
}

.dark-style .cs-flow-form-wrap .form-control {
    background: #0d1524 !important;
    border-color: rgba(255,255,255,.09) !important;
}

/* Responsivo */
@media (max-width: 991.98px) {
    .cs-flow-grid {
        grid-template-columns: 1fr;
    }

    .cs-flow-form-wrap #formAccountSettings > .row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .cs-flow-page {
        padding: 20px 14px 30px;
    }

    .cs-flow-builder,
    .cs-flow-tools {
        padding: 17px;
    }

    .cs-flow-list-head {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-flow-delete-all {
        width: 100%;
        justify-content: center;
    }

    .cs-flow-table-wrap {
        padding: 13px;
    }
}

/* =========================================================
   FLUXOS - UPLOAD DE MÍDIA
   ========================================================= */

.cs-media-source {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 13px;
}

.cs-media-source-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    margin: 0 !important;
    cursor: pointer;
    border: 1px solid rgba(127,127,127,.16);
    border-radius: 11px;
    background: rgba(127,127,127,.025);
    transition: .2s ease;
}

.cs-media-source-option input {
    display: none;
}

.cs-media-source-option > i {
    font-size: 21px;
    color: var(--bs-secondary-color);
}

.cs-media-source-option span {
    display: block;
    min-width: 0;
}

.cs-media-source-option strong,
.cs-media-source-option small {
    display: block;
}

.cs-media-source-option strong {
    font-size: 13px;
    font-weight: 800;
}

.cs-media-source-option small {
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-media-source-option.active {
    border-color: rgba(105,108,255,.4);
    background: rgba(105,108,255,.075);
    box-shadow: 0 0 0 2px rgba(105,108,255,.05);
}

.cs-media-source-option.active > i,
.cs-media-source-option.active strong {
    color: #696cff;
}

.cs-media-drop {
    min-height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    margin: 0 !important;
    cursor: pointer;
    text-align: center;
    border: 1px dashed rgba(105,108,255,.38);
    border-radius: 13px;
    background: rgba(105,108,255,.035);
    transition: .2s ease;
}

.cs-media-drop:hover {
    border-color: #696cff;
    background: rgba(105,108,255,.065);
}

.cs-media-drop-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 12px;
    color: #696cff;
    background: rgba(105,108,255,.1);
}

.cs-media-drop-icon i {
    font-size: 23px;
}

.cs-media-drop strong {
    font-size: 13px;
}

.cs-media-drop span {
    margin-top: 3px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-media-drop small {
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 20px;
    color: #696cff;
    background: rgba(105,108,255,.09);
    font-size: 13px;
    font-weight: 750;
}

.cs-media-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 11px;
    padding: 11px;
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.13);
    border-radius: 11px;
}

.cs-media-preview-image {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    overflow: hidden;
    border-radius: 9px;
}

.cs-media-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-media-preview audio {
    width: 230px;
    max-width: 100%;
}

.cs-media-preview video {
    width: 170px;
    max-height: 110px;
    border-radius: 8px;
}

.cs-media-file-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #696cff;
    background: rgba(105,108,255,.09);
}

.cs-media-file-icon i {
    font-size: 23px;
}

.cs-media-file-info {
    min-width: 0;
}

.cs-media-file-info strong {
    display: block;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-media-file-info span,
.cs-media-hint {
    display: block;
    margin-top: 3px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.dark-style .cs-media-source-option,
.dark-style .cs-media-preview {
    border-color: rgba(255,255,255,.08);
}

@media (max-width: 575.98px) {
    .cs-media-source {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   CENTRAL DE ARQUIVOS DOS FLUXOS
   ========================================================= */

.cs-flow-adminbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    padding:14px 16px;
    border:1px solid rgba(105,108,255,.18);
    border-radius:14px;
    background:rgba(105,108,255,.055);
}

.cs-flow-adminbar > div {
    display:flex;
    align-items:center;
    gap:11px;
}

.cs-flow-adminbar > div > i {
    font-size:23px;
    color:#696cff;
}

.cs-flow-adminbar span strong,
.cs-flow-adminbar span small {
    display:block;
}

.cs-flow-adminbar span strong {
    font-size: 13px;
}

.cs-flow-adminbar span small {
    margin-top:2px;
    color:var(--bs-secondary-color);
    font-size: 13px;
}

.cs-flow-adminbar > a {
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:38px;
    padding:0 13px;
    border-radius:9px;
    color:#fff;
    background:#696cff;
    font-size: 13px;
    font-weight:750;
    text-decoration:none;
}

/* Página */

.cs-files-page {
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:28px 24px 40px;
}

.cs-files-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.cs-files-header h2 {
    margin:0;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.035em;
}

.cs-files-header p {
    margin:6px 0 0;
    color:var(--bs-secondary-color);
    font-size:13px;
}

.cs-files-header-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.cs-files-header-actions form {
    margin:0;
}

.cs-files-back,
.cs-files-clean {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:0 14px;
    border-radius:10px;
    font-size: 13px;
    font-weight:750;
}

.cs-files-back {
    color:var(--bs-body-color);
    border:1px solid rgba(127,127,127,.17);
    text-decoration:none;
}

.cs-files-clean {
    border:1px solid rgba(239,68,68,.18);
    color:#ef4444;
    background:rgba(239,68,68,.06);
}

/* Stats */

.cs-files-stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.cs-files-stat {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    border:1px solid rgba(127,127,127,.13);
    border-radius:14px;
    background:var(--bs-body-bg);
}

.cs-files-stat-icon {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 42px;
    border-radius:11px;
    color:#696cff;
    background:rgba(105,108,255,.09);
    font-size:20px;
}

.cs-files-stat-icon.success {
    color:#22c55e;
    background:rgba(34,197,94,.08);
}

.cs-files-stat-icon.warning {
    color:#f59e0b;
    background:rgba(245,158,11,.08);
}

.cs-files-stat span,
.cs-files-stat strong {
    display:block;
}

.cs-files-stat span {
    margin-bottom:3px;
    color:var(--bs-secondary-color);
    font-size: 13px;
}

.cs-files-stat strong {
    font-size:18px;
}

.cs-files-type-stats {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0 18px;
}

.cs-files-type-stats span {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid rgba(127,127,127,.12);
    border-radius:20px;
    color:var(--bs-secondary-color);
    font-size: 13px;
}

/* Card */

.cs-files-card {
    overflow:hidden;
    border:1px solid rgba(127,127,127,.13);
    border-radius:17px;
    background:var(--bs-body-bg);
}

.cs-files-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:15px;
    border-bottom:1px solid rgba(127,127,127,.11);
}

.cs-files-search {
    position:relative;
    flex:1;
    max-width:470px;
}

.cs-files-search i {
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--bs-secondary-color);
}

.cs-files-search input,
.cs-files-toolbar select {
    min-height:40px;
    border:1px solid rgba(127,127,127,.17);
    border-radius:10px;
    background:var(--bs-body-bg);
    color:var(--bs-body-color);
    outline:none;
}

.cs-files-search input {
    width:100%;
    padding:0 13px 0 38px;
}

.cs-files-toolbar select {
    min-width:180px;
    padding:0 12px;
}

/* Rows */

.cs-file-row {
    display:grid;
    grid-template-columns:56px minmax(220px,1fr) 90px 180px 90px;
    gap:14px;
    align-items:center;
    padding:12px 15px;
    border-bottom:1px solid rgba(127,127,127,.08);
}

.cs-file-row:last-child {
    border-bottom:0;
}

.cs-file-preview {
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:10px;
    color:#696cff;
    background:rgba(105,108,255,.07);
    font-size:23px;
}

.cs-file-preview img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.cs-file-main {
    min-width:0;
}

.cs-file-main > strong {
    display:block;
    overflow:hidden;
    font-size: 13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cs-file-meta {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:5px;
    color:var(--bs-secondary-color);
    font-size: 13px;
}

.cs-file-meta span {
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.cs-file-badge {
    display:inline-flex;
    padding:5px 8px;
    border-radius:7px;
    color:#696cff;
    background:rgba(105,108,255,.09);
    font-size: 13px;
    font-weight:800;
}

.cs-file-status-use,
.cs-file-status-orphan {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size: 13px;
    font-weight:700;
}

.cs-file-status-use {
    color:#22c55e;
}

.cs-file-status-orphan {
    color:#f59e0b;
}

.cs-file-actions {
    display:flex;
    justify-content:flex-end;
    gap:6px;
}

.cs-file-actions form {
    margin:0;
}

.cs-file-view,
.cs-file-delete {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:8px;
}

.cs-file-view {
    color:#696cff;
    background:rgba(105,108,255,.08);
    text-decoration:none;
}

.cs-file-delete {
    border:0;
    color:#ef4444;
    background:rgba(239,68,68,.07);
}

.cs-file-delete.danger {
    color:#fff;
    background:#ef4444;
}

.cs-files-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    min-height:260px;
    padding:30px;
    text-align:center;
}

.cs-files-empty > i {
    margin-bottom:10px;
    color:#696cff;
    font-size:42px;
}

.cs-files-empty strong {
    font-size:14px;
}

.cs-files-empty span {
    margin-top:4px;
    color:var(--bs-secondary-color);
    font-size: 13px;
}

/* Dark */

.dark-style .cs-files-stat,
.dark-style .cs-files-card {
    background:#111827;
    border-color:rgba(255,255,255,.07);
}

/* Mobile */

@media (max-width:991.98px) {

    .cs-files-stats {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cs-file-row {
        grid-template-columns:52px 1fr auto;
    }

    .cs-file-type,
    .cs-file-status {
        grid-column:2;
    }

    .cs-file-actions {
        grid-column:3;
        grid-row:1 / span 3;
    }
}

@media (max-width:767.98px) {

    .cs-files-page {
        padding:20px 14px 30px;
    }

    .cs-files-header {
        align-items:stretch;
        flex-direction:column;
    }

    .cs-files-header-actions {
        align-items:stretch;
        flex-direction:column;
    }

    .cs-files-header-actions form,
    .cs-files-back,
    .cs-files-clean {
        width:100%;
    }

    .cs-files-stats {
        grid-template-columns:1fr 1fr;
    }

    .cs-files-toolbar {
        align-items:stretch;
        flex-direction:column;
    }

    .cs-files-search,
    .cs-files-toolbar select {
        width:100%;
        max-width:none;
    }

    .cs-flow-adminbar {
        align-items:stretch;
        flex-direction:column;
    }

    .cs-flow-adminbar > a {
        justify-content:center;
    }
}


/* =========================================================
   ENQUETE / LISTAS INTERATIVAS
   ========================================================= */

.cs-poll-page {
    max-width: 1440px;
}

.cs-poll-card {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.13) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 35px rgba(0,0,0,.035) !important;
}

.cs-poll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px 20px;
}

.cs-poll-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
}

.cs-poll-header h4 {
    margin: 0;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-poll-header p {
    max-width: 650px;
    margin: 6px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-poll-header-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    border-radius: 13px;
    color: #696cff;
    background: rgba(105,108,255,.09);
    font-size: 24px;
}

.cs-poll-command {
    padding: 0 12px;
}

.cs-poll-command .form-label {
    display: block;
    margin-bottom: 3px;
    color: var(--bs-body-color);
    font-size: 13px;
    font-weight: 750;
}

.cs-poll-field-help {
    display: block;
    margin-bottom: 9px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-poll-command .form-control {
    min-height: 44px;
    border: 1px solid rgba(127,127,127,.16);
    border-radius: 10px;
}

.cs-poll-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 6px 0 14px;
}

.cs-poll-section-title strong,
.cs-poll-section-title small {
    display: block;
}

.cs-poll-section-title strong {
    font-size: 13px;
}

.cs-poll-section-title small {
    margin-top: 3px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-poll-section-title > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 8px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}

/* Opções */

.cs-poll-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 12px;
    background: rgba(127,127,127,.018);
    transition: border-color .2s ease, transform .2s ease;
}

.cs-poll-option:hover {
    border-color: rgba(105,108,255,.27);
}

.cs-poll-option-number {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 9px;
    color: #696cff;
    background: rgba(105,108,255,.09);
    font-size: 13px;
    font-weight: 800;
}

.cs-poll-option-field {
    min-width: 0;
    flex: 1;
}

.cs-poll-option-field label {
    display: block;
    margin: 0 0 4px;
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cs-poll-option-field select {
    width: 100%;
    min-height: 36px;
    padding: 5px 9px;
    border: 1px solid rgba(127,127,127,.13);
    border-radius: 8px;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    font-size: 13px;
}

/* Salvar */

.cs-poll-save {
    display: flex;
    justify-content: flex-end;
    padding: 2px 24px 22px;
}

.cs-poll-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 17px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #696cff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(105,108,255,.18);
}

/* Ajuda */

.cs-poll-help {
    margin: 0 24px 20px;
    padding: 15px;
    border: 1px solid rgba(105,108,255,.12);
    border-radius: 13px;
    background: rgba(105,108,255,.025);
}

.cs-poll-help-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.cs-poll-help-heading > i {
    color: #696cff;
    font-size: 19px;
}

.cs-poll-help-heading strong,
.cs-poll-help-heading small {
    display: block;
}

.cs-poll-help-heading strong {
    font-size: 13px;
}

.cs-poll-help-heading small {
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-poll-help .accordion {
    margin-top: 7px !important;
}

.cs-poll-help .accordion-item {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.1) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.cs-poll-help .accordion-button {
    min-height: 39px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
}

.cs-poll-help .accordion-body {
    padding: 11px 13px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

/* Listagem */

.cs-poll-list-heading {
    padding: 18px 24px 12px;
    border-top: 1px solid rgba(127,127,127,.09);
}

.cs-poll-list-heading strong,
.cs-poll-list-heading small {
    display: block;
}

.cs-poll-list-heading strong {
    font-size: 13px;
}

.cs-poll-list-heading small {
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-poll-table {
    margin: 0 24px 24px;
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.11) !important;
    border-radius: 12px;
}

/* Tema escuro */

.dark-style .cs-poll-card {
    background: #111827;
    border-color: rgba(255,255,255,.07) !important;
}

.dark-style .cs-poll-option {
    background: rgba(255,255,255,.015);
    border-color: rgba(255,255,255,.07);
}

.dark-style .cs-poll-option-field select {
    background-color: #111827;
    border-color: rgba(255,255,255,.09);
}

/* Mobile */

@media (max-width: 767.98px) {

    .cs-poll-header {
        align-items: flex-start;
        padding: 20px 17px 16px;
    }

    .cs-poll-header-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 20px;
    }

    .cs-poll-header h4 {
        font-size: 20px;
    }

    .cs-poll-help,
    .cs-poll-table {
        margin-left: 14px;
        margin-right: 14px;
    }

    .cs-poll-save {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cs-poll-save-btn {
        width: 100%;
    }

    .cs-poll-section-title {
        align-items: flex-start;
    }
}


/* =========================================================
   ENQUETE - LISTAS CADASTRADAS V2
   ========================================================= */

.cs-poll-table {
    position: relative;
}

/* Estado vazio */

.cs-poll-table.cs-poll-table-empty {
    border: 0 !important;
    overflow: visible;
}

.cs-poll-empty {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 35px 20px;
    text-align: center;
    border: 1px dashed rgba(105,108,255,.18);
    border-radius: 14px;
    background: rgba(105,108,255,.018);
}

.cs-poll-empty-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 15px;
    color: #696cff;
    background: rgba(105,108,255,.09);
}

.cs-poll-empty-icon i {
    font-size: 27px;
}

.cs-poll-empty > strong {
    font-size: 14px;
    font-weight: 800;
}

.cs-poll-empty > p {
    max-width: 450px;
    margin: 6px auto 16px;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.65;
}

.cs-poll-empty-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #696cff;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 5px 15px rgba(105,108,255,.18);
}


/* DataTables */

.cs-poll-table .dt-container {
    padding: 0 !important;
}

.cs-poll-table .dt-layout-row {
    margin: 0 !important;
    padding: 12px 14px;
}

.cs-poll-table .dt-layout-row:first-child {
    align-items: center;
    border-bottom: 1px solid rgba(127,127,127,.08);
}

.cs-poll-table .dt-layout-row:last-child {
    border-top: 1px solid rgba(127,127,127,.08);
}

.cs-poll-table .dt-length,
.cs-poll-table .dt-search,
.cs-poll-table .dataTables_length,
.cs-poll-table .dataTables_filter {
    color: var(--bs-secondary-color) !important;
    font-size: 13px;
}

.cs-poll-table .dt-length select,
.cs-poll-table .dt-search input,
.cs-poll-table .dataTables_length select,
.cs-poll-table .dataTables_filter input {
    min-height: 35px;
    border: 1px solid rgba(127,127,127,.15) !important;
    border-radius: 8px !important;
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
}

.cs-poll-table .dt-search input,
.cs-poll-table .dataTables_filter input {
    min-width: 190px;
    padding: 0 10px !important;
}


/* Tabela */

.cs-poll-table table {
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cs-poll-table table thead th {
    padding: 12px 13px !important;
    border-bottom: 1px solid rgba(127,127,127,.11) !important;
    color: #77869b !important;
    background: rgba(127,127,127,.018) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cs-poll-table table tbody td {
    padding: 11px 13px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(127,127,127,.07) !important;
    color: var(--bs-body-color);
    font-size: 13px;
}

.cs-poll-table table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.cs-poll-table table tbody tr:hover td {
    background: rgba(105,108,255,.025);
}


/* ID */

.cs-poll-id {
    color: var(--bs-secondary-color);
    font-size: 13px;
    font-weight: 700;
}


/* Comando */

.cs-poll-command-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 180px;
}

.cs-poll-command-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border-radius: 8px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 15px;
}

.cs-poll-command-cell strong {
    max-width: 240px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Ver mensagem */

.cs-poll-view-message {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(105,108,255,.15);
    border-radius: 7px;
    color: #696cff;
    background: rgba(105,108,255,.055);
    font-size: 13px;
    font-weight: 750;
}

.cs-poll-view-message:hover {
    background: rgba(105,108,255,.1);
}


/* Tipo */

.cs-poll-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 20px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}


/* Status */

.cs-poll-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
}

.cs-poll-status > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.cs-poll-status-active {
    color: #16a34a;
    background: rgba(34,197,94,.09);
}

.cs-poll-status-active > span {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.08);
}

.cs-poll-status-inactive {
    color: #ef4444;
    background: rgba(239,68,68,.08);
}

.cs-poll-status-inactive > span {
    background: #ef4444;
}


/* Ações */

.cs-poll-row-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cs-poll-action {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    transition: .18s ease;
}

.cs-poll-action:hover {
    transform: translateY(-1px);
}

.cs-poll-action-edit {
    color: #696cff;
    background: rgba(105,108,255,.08);
}

.cs-poll-action-delete {
    color: #ef4444;
    background: rgba(239,68,68,.07);
}


/* Paginação */

.cs-poll-table .dt-paging-button,
.cs-poll-table .paginate_button {
    min-width: 31px !important;
    height: 31px !important;
    display: inline-grid !important;
    place-items: center;
    margin: 0 2px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--bs-body-color) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.cs-poll-table .dt-paging-button.current,
.cs-poll-table .paginate_button.current {
    color: #fff !important;
    background: #696cff !important;
}

.cs-poll-table .dt-info,
.cs-poll-table .dataTables_info {
    color: var(--bs-secondary-color) !important;
    font-size: 13px !important;
}


/* Dark */

.dark-style .cs-poll-table .dt-length select,
.dark-style .cs-poll-table .dt-search input,
.dark-style .cs-poll-table .dataTables_length select,
.dark-style .cs-poll-table .dataTables_filter input {
    background: #0d1524 !important;
    border-color: rgba(255,255,255,.08) !important;
}

.dark-style .cs-poll-empty {
    border-color: rgba(105,108,255,.16);
    background: rgba(105,108,255,.025);
}


/* Mobile */

@media (max-width: 767.98px) {

    .cs-poll-table .dt-layout-row {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 9px;
    }

    .cs-poll-table .dt-search input,
    .cs-poll-table .dataTables_filter input {
        width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    .cs-poll-empty {
        min-height: 230px;
    }
}


/* =========================================================
   ENQUETE - MODAL DE MENSAGEM
   ========================================================= */

.cs-poll-message-modal .modal-dialog {
    width: calc(100% - 30px);
    max-width: 560px;
}

.cs-poll-message-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.14);
    border-radius: 18px;
    background: var(--bs-body-bg);
    box-shadow: 0 25px 70px rgba(0,0,0,.22);
}

.cs-poll-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(127,127,127,.10);
}

.cs-poll-modal-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.cs-poll-modal-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border-radius: 11px;
    color: #696cff;
    background: rgba(105,108,255,.09);
    font-size: 20px;
}

.cs-poll-modal-title small {
    display: block;
    margin-bottom: 2px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
}

.cs-poll-modal-title h5 {
    margin: 0;
    color: var(--bs-body-color);
    font-size: 15px;
    font-weight: 800;
}

.cs-poll-modal-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--bs-secondary-color);
    background: rgba(127,127,127,.07);
    font-size: 21px;
}

.cs-poll-modal-close:hover {
    color: #ef4444;
    background: rgba(239,68,68,.07);
}

.cs-poll-modal-body {
    padding: 20px;
}

.cs-poll-message-preview {
    overflow: hidden;
    border: 1px solid rgba(34,197,94,.14);
    border-radius: 13px;
    background: rgba(34,197,94,.035);
}

.cs-poll-message-preview-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border-bottom: 1px solid rgba(34,197,94,.11);
    color: #22a75a;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cs-poll-message-preview-head i {
    font-size: 17px;
}

.cs-poll-message-text {
    min-height: 90px;
    padding: 16px;
    color: var(--bs-body-color);
    font-size: 13px;
    line-height: 1.65;
    word-break: break-word;
}

.cs-poll-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px 18px;
}

.cs-poll-modal-button {
    min-height: 37px;
    padding: 0 15px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #696cff;
    font-size: 13px;
    font-weight: 800;
}

/* Tema escuro */

.dark-style .cs-poll-message-modal .modal-content {
    background: #111827;
    border-color: rgba(255,255,255,.08);
}

.dark-style .cs-poll-message-preview {
    background: rgba(34,197,94,.025);
    border-color: rgba(34,197,94,.12);
}

/* Mobile */

@media (max-width: 575.98px) {

    .cs-poll-modal-head,
    .cs-poll-modal-body {
        padding-left: 15px;
        padding-right: 15px;
    }

    .cs-poll-modal-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .cs-poll-modal-button {
        width: 100%;
    }
}


/* =========================================================
   ENQUETE - CORREÇÃO PAGINAÇÃO
   ========================================================= */

.cs-poll-table {
    overflow: visible !important;
}

.cs-poll-table .dt-layout-row:last-child,
.cs-poll-table .dataTables_wrapper > .row:last-child {
    overflow: visible !important;
}

.cs-poll-table .dt-paging,
.cs-poll-table .dataTables_paginate {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    overflow: visible !important;
}

.cs-poll-table .dt-paging nav,
.cs-poll-table .dataTables_paginate span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}

.cs-poll-table .dt-paging-button,
.cs-poll-table .paginate_button {
    width: auto !important;
    min-width: 32px !important;
    max-width: none !important;
    padding: 0 9px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.cs-poll-table .dt-paging-button.previous,
.cs-poll-table .dt-paging-button.next,
.cs-poll-table .paginate_button.previous,
.cs-poll-table .paginate_button.next {
    min-width: 66px !important;
}

@media (max-width: 575.98px) {
    .cs-poll-table .dt-paging,
    .cs-poll-table .dataTables_paginate {
        justify-content: center !important;
        width: 100%;
    }
}


/* =========================================================
   ENQUETE - AJUSTE FINAL DA TABELA / PAGINAÇÃO
   ========================================================= */

/* Card da tabela nunca ultrapassa a página */
.cs-poll-table {
    width: auto !important;
    max-width: calc(100% - 48px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* DataTables respeita 100% da área disponível */
.cs-poll-table .dt-container,
.cs-poll-table .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Somente a tabela pode ter rolagem horizontal se necessário */
.cs-poll-table .dt-layout-table,
.cs-poll-table .dataTables_scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Cabeçalho: Exibir / Buscar */
.cs-poll-table .dt-layout-row:first-child {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Rodapé */
.cs-poll-table .dt-layout-row:last-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    padding: 13px 15px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Informação do lado esquerdo */
.cs-poll-table .dt-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
}

/* Paginação do lado direito */
.cs-poll-table .dt-paging {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Container dos botões */
.cs-poll-table .dt-paging nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    white-space: nowrap !important;
}

/* Todos os botões */
.cs-poll-table .dt-paging-button {
    width: auto !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* Anterior / Próximo precisam de mais largura */
.cs-poll-table .dt-paging-button.previous,
.cs-poll-table .dt-paging-button.next {
    min-width: 64px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Mobile */
@media (max-width: 767.98px) {

    .cs-poll-table {
        max-width: calc(100% - 28px) !important;
    }

    .cs-poll-table .dt-layout-row:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cs-poll-table .dt-info {
        text-align: center !important;
    }

    .cs-poll-table .dt-paging {
        width: 100% !important;
    }

    .cs-poll-table .dt-paging nav {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}


/* =========================================================
   ZAPBOT - PADRONIZAÇÃO DA NAVEGAÇÃO SUPERIOR
   ========================================================= */

.cs-zap-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 14px !important;
}

/* Todos os itens com o mesmo padrão */
.cs-zap-nav a {
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    padding: 0 14px !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    color: #8392a8 !important;
    background: transparent !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
    transform: none !important;
}

/* Ícones todos iguais */
.cs-zap-nav a i {
    width: 17px !important;
    min-width: 17px !important;
    height: 17px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 17px !important;
    line-height: 1 !important;
}

/* Hover */
.cs-zap-nav a:hover {
    color: #c8d2e2 !important;
    background: rgba(255,255,255,.035) !important;
    border-color: rgba(255,255,255,.04) !important;
}

/* Item ativo */
.cs-zap-nav a.active {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #6366f1 0%,
        #38bdf8 100%
    ) !important;

    border-color: transparent !important;

    box-shadow: 0 6px 16px rgba(79,70,229,.18) !important;
}

/* Não aumenta nem muda formato no ativo */
.cs-zap-nav a.active i {
    color: #ffffff !important;
}

/* Tema claro */
html[data-clickstar-theme="light"] .cs-zap-nav a {
    color: #64748b !important;
}

html[data-clickstar-theme="light"] .cs-zap-nav a:hover {
    color: #334155 !important;
    background: #f5f7fb !important;
    border-color: #edf0f5 !important;
}

html[data-clickstar-theme="light"] .cs-zap-nav a.active {
    color: #ffffff !important;
}

/* Mobile */
@media (max-width: 767.98px) {

    .cs-zap-nav {
        overflow-x: auto !important;
        justify-content: flex-start !important;
    }

    .cs-zap-nav a {
        flex: 0 0 auto !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
    }
}


/* =========================================================
   BOT WHATSAPP - NAVEGAÇÃO ÚNICA EM TODAS AS PÁGINAS
   ========================================================= */

.cs-bot-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    width: 100% !important;
    padding: 6px !important;

    border: 1px solid rgba(127,127,127,.14) !important;
    border-radius: 14px !important;

    background: var(--bs-body-bg) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* TODOS OS BOTÕES */

.cs-bot-nav > a {
    height: 42px !important;
    min-height: 42px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 0 15px !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    background: transparent !important;
    color: #71839d !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    box-shadow: none !important;
}

/* ÍCONES */

.cs-bot-nav > a i {
    width: 17px !important;
    height: 17px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 17px !important;
    line-height: 1 !important;

    color: inherit !important;
}

/* HOVER */

.cs-bot-nav > a:hover {
    color: #696cff !important;
    background: rgba(105,108,255,.065) !important;
}

/* ÚNICA DIFERENÇA: PÁGINA ATIVA */

.cs-bot-nav > a.active {
    height: 42px !important;

    color: #fff !important;

    background: linear-gradient(
        135deg,
        #696cff 0%,
        #32b5ed 100%
    ) !important;

    border-color: transparent !important;

    box-shadow:
        0 5px 15px rgba(105,108,255,.20) !important;
}

/* DARK */

html.dark-style .cs-bot-nav,
.dark-style .cs-bot-nav {
    background: #111827 !important;
    border-color: rgba(255,255,255,.08) !important;
}

html.dark-style .cs-bot-nav > a,
.dark-style .cs-bot-nav > a {
    color: #8191aa !important;
}

html.dark-style .cs-bot-nav > a:hover,
.dark-style .cs-bot-nav > a:hover {
    color: #b9c4ff !important;
    background: rgba(105,108,255,.07) !important;
}

html.dark-style .cs-bot-nav > a.active,
.dark-style .cs-bot-nav > a.active {
    color: #fff !important;
}

/* MOBILE */

@media (max-width: 767.98px) {

    .cs-bot-nav {
        justify-content: flex-start !important;
    }

    .cs-bot-nav > a {
        flex: 0 0 auto !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
    }

    .cs-bot-nav > a.active {
        height: 40px !important;
    }
}


/* =========================================================
   BOT WHATSAPP - BOAS-VINDAS
   ========================================================= */

.cs-welcome-page {
    max-width: 1380px;
    margin: 0 auto;
}

.cs-welcome-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 18px;
    padding: 24px 26px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
    background: var(--bs-body-bg);
}

.cs-welcome-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-welcome-hero h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-welcome-hero p {
    margin: 6px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-current-status {
    min-width: 145px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 11px;
}

.cs-welcome-current-status small,
.cs-welcome-current-status strong {
    display: block;
}

.cs-welcome-current-status small {
    margin-bottom: 2px;
    font-size: 13px;
    opacity: .7;
}

.cs-welcome-current-status strong {
    font-size: 13px;
}

.cs-welcome-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.cs-welcome-current-status.is-active {
    color: #16a34a;
    background: rgba(34,197,94,.08);
}

.cs-welcome-current-status.is-active .cs-welcome-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}

.cs-welcome-current-status.is-inactive {
    color: #ef4444;
    background: rgba(239,68,68,.07);
}

.cs-welcome-current-status.is-inactive .cs-welcome-status-dot {
    background: #ef4444;
}

.cs-welcome-grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr);
    gap: 16px;
    align-items: start;
}

.cs-welcome-side {
    display: grid;
    gap: 16px;
}

.cs-welcome-card {
    padding: 20px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 15px;
    background: var(--bs-body-bg);
}

.cs-welcome-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
}

.cs-welcome-card-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 10px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 18px;
}

.cs-welcome-card-head h5 {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-card-head p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-field {
    margin-bottom: 20px;
}

.cs-welcome-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-field-help {
    margin: -2px 0 8px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-input-icon {
    position: relative;
}

.cs-welcome-input-icon > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 2;
    transform: translateY(-50%);
    color: #7b8ba1;
    font-size: 17px;
}

.cs-welcome-input-icon input {
    min-height: 43px;
    padding-left: 39px;
    border-radius: 10px;
}

.cs-welcome-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cs-welcome-label-row span {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-label-row b {
    color: #696cff;
}

.cs-welcome-textarea {
    min-height: 235px;
    padding: 14px;
    border-radius: 11px;
    resize: vertical;
    line-height: 1.65;
}

.cs-welcome-flows {
    margin-top: 5px;
    padding: 16px;
    border: 1px solid rgba(127,127,127,.10);
    border-radius: 12px;
    background: rgba(127,127,127,.018);
}

.cs-welcome-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
}

.cs-welcome-section-title > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cs-welcome-section-title i {
    color: #696cff;
    font-size: 19px;
}

.cs-welcome-section-title strong,
.cs-welcome-section-title small {
    display: block;
}

.cs-welcome-section-title strong {
    font-size: 13px;
}

.cs-welcome-section-title small {
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-limit {
    padding: 4px 8px;
    border-radius: 20px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-flows select {
    min-height: 38px;
    border-radius: 9px;
    font-size: 13px;
}

.cs-welcome-save {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.cs-welcome-btn {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-btn-primary {
    color: #fff;
    background: linear-gradient(135deg,#696cff,#32b5ed);
    box-shadow: 0 6px 16px rgba(105,108,255,.18);
}

.cs-welcome-btn-success {
    width: 100%;
    color: #16a34a;
    background: rgba(34,197,94,.09);
    border: 1px solid rgba(34,197,94,.14);
}

.cs-welcome-btn-warning {
    width: 100%;
    color: #ef4444;
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.12);
}

.cs-welcome-no-config {
    padding: 11px;
    border-radius: 9px;
    color: var(--bs-secondary-color);
    background: rgba(127,127,127,.04);
    font-size: 13px;
    line-height: 1.5;
}

.cs-welcome-info {
    display: grid;
    gap: 13px;
}

.cs-welcome-info-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.cs-welcome-info-item > span {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    border-radius: 7px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-info-item p {
    margin: 2px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.55;
}

.cs-welcome-variable {
    padding: 11px 0;
    border-bottom: 1px solid rgba(127,127,127,.08);
}

.cs-welcome-variable:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cs-welcome-variable code {
    display: inline-block;
    margin-bottom: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-variable p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.5;
}

.cs-welcome-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(239,68,68,.10);
    border-radius: 13px;
    background: rgba(239,68,68,.025);
}

.cs-welcome-danger strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.cs-welcome-danger p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-delete {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid rgba(239,68,68,.13);
    border-radius: 8px;
    color: #ef4444;
    background: rgba(239,68,68,.06);
    font-size: 13px;
    font-weight: 800;
}

/* DARK */

.dark-style .cs-welcome-hero,
.dark-style .cs-welcome-card {
    background: #111827;
    border-color: rgba(255,255,255,.07);
}

.dark-style .cs-welcome-flows {
    background: rgba(255,255,255,.015);
    border-color: rgba(255,255,255,.06);
}

/* RESPONSIVO */

@media (max-width: 991.98px) {

    .cs-welcome-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 575.98px) {

    .cs-welcome-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .cs-welcome-current-status {
        width: 100%;
    }

    .cs-welcome-card {
        padding: 16px;
    }

    .cs-welcome-label-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .cs-welcome-save .cs-welcome-btn {
        width: 100%;
    }

}


/* =========================================================
   BOT WHATSAPP - BOAS-VINDAS
   ========================================================= */

.cs-welcome-page {
    max-width: 1380px;
    margin: 0 auto;
}

.cs-welcome-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 18px;
    padding: 24px 26px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
    background: var(--bs-body-bg);
}

.cs-welcome-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-welcome-hero h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-welcome-hero p {
    margin: 6px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-current-status {
    min-width: 145px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 11px;
}

.cs-welcome-current-status small,
.cs-welcome-current-status strong {
    display: block;
}

.cs-welcome-current-status small {
    margin-bottom: 2px;
    font-size: 13px;
    opacity: .7;
}

.cs-welcome-current-status strong {
    font-size: 13px;
}

.cs-welcome-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.cs-welcome-current-status.is-active {
    color: #16a34a;
    background: rgba(34,197,94,.08);
}

.cs-welcome-current-status.is-active .cs-welcome-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}

.cs-welcome-current-status.is-inactive {
    color: #ef4444;
    background: rgba(239,68,68,.07);
}

.cs-welcome-current-status.is-inactive .cs-welcome-status-dot {
    background: #ef4444;
}

.cs-welcome-grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr);
    gap: 16px;
    align-items: start;
}

.cs-welcome-side {
    display: grid;
    gap: 16px;
}

.cs-welcome-card {
    padding: 20px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 15px;
    background: var(--bs-body-bg);
}

.cs-welcome-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
}

.cs-welcome-card-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 10px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 18px;
}

.cs-welcome-card-head h5 {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-card-head p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-field {
    margin-bottom: 20px;
}

.cs-welcome-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-field-help {
    margin: -2px 0 8px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-input-icon {
    position: relative;
}

.cs-welcome-input-icon > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 2;
    transform: translateY(-50%);
    color: #7b8ba1;
    font-size: 17px;
}

.cs-welcome-input-icon input {
    min-height: 43px;
    padding-left: 39px;
    border-radius: 10px;
}

.cs-welcome-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cs-welcome-label-row span {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-label-row b {
    color: #696cff;
}

.cs-welcome-textarea {
    min-height: 235px;
    padding: 14px;
    border-radius: 11px;
    resize: vertical;
    line-height: 1.65;
}

.cs-welcome-flows {
    margin-top: 5px;
    padding: 16px;
    border: 1px solid rgba(127,127,127,.10);
    border-radius: 12px;
    background: rgba(127,127,127,.018);
}

.cs-welcome-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
}

.cs-welcome-section-title > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cs-welcome-section-title i {
    color: #696cff;
    font-size: 19px;
}

.cs-welcome-section-title strong,
.cs-welcome-section-title small {
    display: block;
}

.cs-welcome-section-title strong {
    font-size: 13px;
}

.cs-welcome-section-title small {
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-limit {
    padding: 4px 8px;
    border-radius: 20px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-flows select {
    min-height: 38px;
    border-radius: 9px;
    font-size: 13px;
}

.cs-welcome-save {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.cs-welcome-btn {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-btn-primary {
    color: #fff;
    background: linear-gradient(135deg,#696cff,#32b5ed);
    box-shadow: 0 6px 16px rgba(105,108,255,.18);
}

.cs-welcome-btn-success {
    width: 100%;
    color: #16a34a;
    background: rgba(34,197,94,.09);
    border: 1px solid rgba(34,197,94,.14);
}

.cs-welcome-btn-warning {
    width: 100%;
    color: #ef4444;
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.12);
}

.cs-welcome-no-config {
    padding: 11px;
    border-radius: 9px;
    color: var(--bs-secondary-color);
    background: rgba(127,127,127,.04);
    font-size: 13px;
    line-height: 1.5;
}

.cs-welcome-info {
    display: grid;
    gap: 13px;
}

.cs-welcome-info-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.cs-welcome-info-item > span {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    border-radius: 7px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-info-item p {
    margin: 2px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.55;
}

.cs-welcome-variable {
    padding: 11px 0;
    border-bottom: 1px solid rgba(127,127,127,.08);
}

.cs-welcome-variable:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cs-welcome-variable code {
    display: inline-block;
    margin-bottom: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 13px;
    font-weight: 800;
}

.cs-welcome-variable p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.5;
}

.cs-welcome-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(239,68,68,.10);
    border-radius: 13px;
    background: rgba(239,68,68,.025);
}

.cs-welcome-danger strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.cs-welcome-danger p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-welcome-delete {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid rgba(239,68,68,.13);
    border-radius: 8px;
    color: #ef4444;
    background: rgba(239,68,68,.06);
    font-size: 13px;
    font-weight: 800;
}

/* DARK */

.dark-style .cs-welcome-hero,
.dark-style .cs-welcome-card {
    background: #111827;
    border-color: rgba(255,255,255,.07);
}

.dark-style .cs-welcome-flows {
    background: rgba(255,255,255,.015);
    border-color: rgba(255,255,255,.06);
}

/* RESPONSIVO */

@media (max-width: 991.98px) {

    .cs-welcome-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 575.98px) {

    .cs-welcome-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .cs-welcome-current-status {
        width: 100%;
    }

    .cs-welcome-card {
        padding: 16px;
    }

    .cs-welcome-label-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .cs-welcome-save .cs-welcome-btn {
        width: 100%;
    }

}


/* =========================================================
   CLICKSTAR - COMANDO DO BOT DE VENDAS
   ========================================================= */

.cs-command-page {
    max-width: 1380px;
    margin: 0 auto;
}

.cs-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 18px;
    padding: 24px 26px;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-command-kicker {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 7px;

    color: #696cff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-command-header h2 {
    margin: 0;

    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-command-header p {
    max-width: 650px;

    margin: 6px 0 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
    line-height: 1.6;
}


/* STATUS */

.cs-command-status {
    min-width: 145px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 14px;

    border-radius: 11px;
}

.cs-command-status > span {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;
}

.cs-command-status small,
.cs-command-status strong {
    display: block;
}

.cs-command-status small {
    margin-bottom: 2px;

    font-size: 13px;

    opacity: .7;
}

.cs-command-status strong {
    font-size: 13px;
}

.cs-command-status.is-active {
    color: #16a34a;

    background: rgba(34,197,94,.08);
}

.cs-command-status.is-active > span {
    background: #22c55e;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.10);
}

.cs-command-status.is-disabled {
    color: #ef4444;

    background: rgba(239,68,68,.07);
}

.cs-command-status.is-disabled > span {
    background: #ef4444;
}


/* GRID */

.cs-command-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(300px,.7fr);

    gap: 16px;

    align-items: start;
}

.cs-command-card,
.cs-command-info,
.cs-command-example,
.cs-command-disable {
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 15px;

    background: var(--bs-body-bg);
}

.cs-command-card {
    padding: 22px;
}


/* CABEÇALHO CARD */

.cs-command-card-head {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 22px;
}

.cs-command-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex: 0 0 40px;

    border-radius: 11px;

    color: #696cff;
    background: rgba(105,108,255,.08);

    font-size: 19px;
}

.cs-command-card-head h5 {
    margin: 0 0 3px;

    font-size: 13px;
    font-weight: 800;
}

.cs-command-card-head p {
    margin: 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
}


/* CAMPO */

.cs-command-field label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 800;
}

.cs-command-input {
    position: relative;
}

.cs-command-input > i {
    position: absolute;

    top: 50%;
    left: 13px;

    z-index: 2;

    transform: translateY(-50%);

    color: #7b8ba1;

    font-size: 17px;
}

.cs-command-input input {
    min-height: 46px;

    padding-left: 41px;

    border-radius: 10px;

    font-size: 13px;
}

.cs-command-field > small {
    display: block;

    margin-top: 7px;

    color: var(--bs-secondary-color);

    font-size: 13px;
}


/* SALVAR */

.cs-command-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
}

.cs-command-save {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 16px;

    border: 0;
    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #696cff,
            #32b5ed
        );

    box-shadow:
        0 6px 16px rgba(105,108,255,.18);

    font-size: 13px;
    font-weight: 800;
}


/* LATERAL */

.cs-command-side {
    display: grid;
    gap: 14px;
}

.cs-command-info {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 18px;
}

.cs-command-info-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border-radius: 9px;

    color: #696cff;
    background: rgba(105,108,255,.08);

    font-size: 17px;
}

.cs-command-info strong {
    display: block;

    margin: 2px 0 5px;

    font-size: 13px;
}

.cs-command-info p {
    margin: 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
    line-height: 1.55;
}


/* EXEMPLO */

.cs-command-example {
    padding: 18px;
}

.cs-command-example-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 15px;

    color: #696cff;

    font-size: 13px;
    font-weight: 800;
}

.cs-command-chat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 11px 12px;

    border-radius: 10px;

    background: rgba(127,127,127,.035);
}

.cs-command-chat span {
    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-command-chat div {
    padding: 6px 10px;

    border-radius: 8px 8px 2px 8px;

    color: #fff;
    background: #696cff;

    font-size: 13px;
    font-weight: 700;
}

.cs-command-arrow {
    display: flex;
    justify-content: center;

    padding: 7px 0;

    color: #8a94a6;
}

.cs-command-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px;

    border-radius: 9px;

    color: #16a34a;
    background: rgba(34,197,94,.07);

    font-size: 13px;
    font-weight: 700;
}


/* DESATIVAR */

.cs-command-disable {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 15px;

    border-color: rgba(239,68,68,.10);

    background: rgba(239,68,68,.025);
}

.cs-command-disable > i {
    margin-top: 1px;

    color: #ef4444;

    font-size: 18px;
}

.cs-command-disable strong {
    display: block;

    margin-bottom: 3px;

    font-size: 13px;
}

.cs-command-disable p {
    margin: 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
    line-height: 1.5;
}

.cs-command-disable b {
    color: #ef4444;
}


/* DARK */

.dark-style .cs-command-header,
.dark-style .cs-command-card,
.dark-style .cs-command-info,
.dark-style .cs-command-example,
.dark-style .cs-command-disable {
    background: #111827;

    border-color: rgba(255,255,255,.07);
}


/* RESPONSIVO */

@media (max-width: 991.98px) {

    .cs-command-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 575.98px) {

    .cs-command-header {
        align-items: flex-start;
        flex-direction: column;

        padding: 18px;
    }

    .cs-command-status {
        width: 100%;
    }

    .cs-command-card {
        padding: 17px;
    }

    .cs-command-actions {
        display: block;
    }

    .cs-command-save {
        width: 100%;
    }

}


/* =========================================================
   CLICKSTAR - PRODUTOS E ESTOQUE
   ========================================================= */

.cs-products-page {
    max-width: 1440px;
    margin: 0 auto;
}

.cs-products-card {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.12) !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.035) !important;
}

.cs-products-card .card-header,
.cs-products-card .card-body {
    border: 0 !important;
}

.cs-product-create-card {
    max-width: 860px;
}

.cs-products-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.cs-products-section-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 12px;
    color: #696cff;
    background: rgba(105,108,255,.09);
    font-size: 21px;
}

.cs-products-kicker {
    margin-bottom: 3px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-products-section-head h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.cs-products-section-head p {
    margin: 3px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}


/* FORMULÁRIOS */

.cs-products-page .form-control,
.cs-products-page .form-select {
    min-height: 42px;
    border: 1px solid rgba(127,127,127,.16) !important;
    border-radius: 10px !important;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 13px;
    box-shadow: none !important;
}

.cs-products-page textarea.form-control {
    min-height: 180px;
    padding: 13px;
    line-height: 1.55;
    resize: vertical;
}

.cs-products-page .form-control:focus,
.cs-products-page .form-select:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 3px rgba(105,108,255,.09) !important;
}

.cs-products-page label,
.cs-products-page .col-form-label {
    margin-bottom: 5px;
    color: var(--bs-body-color);
    font-size: 13px;
    font-weight: 750;
}

.cs-products-page .text-danger {
    font-size: 13px;
}


/* BOTÕES */

.cs-products-page .btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px !important;
    font-size: 13px;
    font-weight: 750;
}

.cs-products-page .btn-primary {
    border: 0 !important;
    background: linear-gradient(135deg,#696cff,#32b5ed) !important;
    box-shadow: 0 5px 14px rgba(105,108,255,.16);
}

.cs-products-page .btn-success {
    border: 1px solid rgba(34,197,94,.15) !important;
    color: #16a34a !important;
    background: rgba(34,197,94,.08) !important;
}


/* SEGUNDO CARD / CÓDIGOS */

.cs-products-page #formCodigo {
    padding-top: 4px;
}

.cs-products-page #formCodigo textarea {
    font-family: monospace;
    font-size: 13px;
}

.cs-products-page .accordion {
    margin-top: 14px !important;
}

.cs-products-page .accordion-item {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.1) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.cs-products-page .accordion-button {
    min-height: 40px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 750;
}


/* GERADOR EXCEL */

.cs-products-generator {
    padding: 20px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
    background: var(--bs-body-bg);
}

.cs-products-generator-head {
    margin-bottom: 18px;
}

.cs-products-generator-head .cs-products-tag {
    margin-left: auto;
}

.cs-products-tag {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 20px;
    color: #f59e0b;
    background: rgba(245,158,11,.08);
    font-size: 13px;
    font-weight: 800;
}

.cs-products-generator #result {
    min-height: 110px;
    overflow: auto;
    border: 1px solid rgba(127,127,127,.12) !important;
    border-radius: 10px;
    background: rgba(127,127,127,.02);
    font-family: monospace;
    font-size: 13px;
}


/* ESTOQUE */

.cs-products-stock-section {
    margin-top: 22px;
}

.cs-products-stock-head {
    padding: 20px 22px 12px;
}

.cs-products-stock-card .table-responsive {
    padding: 0 18px 20px;
}

.cs-products-search {
    position: relative;
    max-width: 360px;
    margin: 0 0 14px;
}

.cs-products-search > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 2;
    transform: translateY(-50%);
    color: #8290a4;
    font-size: 16px;
}

.cs-products-search input {
    padding-left: 37px !important;
}


/* TABELA */

.cs-products-stock-card table {
    margin: 0 !important;
    border: 1px solid rgba(127,127,127,.09) !important;
    border-radius: 11px;
    overflow: hidden;
}

.cs-products-stock-card thead th {
    padding: 11px 10px !important;
    color: #748399 !important;
    background: rgba(127,127,127,.018);
    border-bottom: 1px solid rgba(127,127,127,.10) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cs-products-stock-card tbody td {
    padding: 11px 10px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(127,127,127,.07) !important;
    font-size: 13px;
}

.cs-products-stock-card tbody tr:hover td {
    background: rgba(105,108,255,.02);
}

.cs-products-stock-card .badge {
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 13px;
}

.cs-products-stock-card .dropdown-toggle {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px !important;
}

.cs-products-stock-card .dropdown-menu {
    min-width: 145px;
    padding: 6px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.cs-products-stock-card .dropdown-item {
    padding: 8px 9px;
    border-radius: 7px;
    font-size: 13px;
}


/* MODAL DE EDIÇÃO */

#editarModal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.13);
    border-radius: 16px;
}

#editarModal .modal-header {
    padding: 17px 19px;
    border-bottom: 1px solid rgba(127,127,127,.09);
}

#editarModal .modal-title {
    font-size: 14px;
    font-weight: 800;
}

#editarModal .modal-body {
    padding: 18px;
}

#editarModal .modal-footer {
    padding: 13px 18px 18px;
    border-top: 0;
}


/* DARK */

.dark-style .cs-products-generator,
.dark-style .cs-products-card {
    background: #111827;
    border-color: rgba(255,255,255,.07) !important;
}

.dark-style .cs-products-page .form-control,
.dark-style .cs-products-page .form-select {
    background-color: #0d1524;
    border-color: rgba(255,255,255,.08) !important;
}


/* RESPONSIVO */

@media (max-width: 767.98px) {

    .cs-product-create-card {
        max-width: none;
    }

    .cs-products-generator {
        padding: 15px;
    }

    .cs-products-generator-head {
        align-items: flex-start;
    }

    .cs-products-generator-head .cs-products-tag {
        margin-left: 0;
    }

    .cs-products-stock-card .table-responsive {
        padding: 0 12px 15px;
    }

}


/* =========================================================
   CLICKSTAR - CÓDIGOS / ESTOQUE DIGITAL
   ========================================================= */

.cs-codes-page {
    max-width: 1380px;
    margin: 0 auto;
}

.cs-codes-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 16px;
    padding: 23px 25px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
    background: var(--bs-body-bg);
}

.cs-codes-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-codes-hero h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
}

.cs-codes-hero p {
    max-width: 650px;
    margin: 5px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
    line-height: 1.55;
}

.cs-codes-list-btn {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid rgba(105,108,255,.15);
    border-radius: 9px;
    color: #696cff;
    background: rgba(105,108,255,.06);
    font-size: 13px;
    font-weight: 800;
}

.cs-codes-list-btn:hover {
    color: #fff;
    background: #696cff;
}


/* CARD PRINCIPAL */

.cs-codes-card {
    padding: 21px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
    background: var(--bs-body-bg);
}

.cs-codes-card-head,
.cs-converter-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
}

.cs-codes-icon,
.cs-converter-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border-radius: 11px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 19px;
}

.cs-codes-card-head span,
.cs-converter-card-head span,
.cs-converter-heading span {
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
}

.cs-codes-card-head h4,
.cs-converter-card-head h4 {
    margin: 1px 0 2px;
    font-size: 13px;
    font-weight: 800;
}

.cs-codes-card-head p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}


/* FORM */

.cs-codes-form-grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(270px,.65fr);
    gap: 18px;
}

.cs-codes-page label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
}

.cs-codes-page .form-control,
.cs-codes-page .form-select {
    border: 1px solid rgba(127,127,127,.15) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 13px;
}

.cs-codes-page .form-control:focus,
.cs-codes-page .form-select:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 3px rgba(105,108,255,.08) !important;
}

.cs-codes-main-field textarea {
    min-height: 215px;
    padding: 13px;
    font-family: monospace;
    line-height: 1.55;
    resize: vertical;
}

.cs-codes-main-field > small {
    display: block;
    margin-top: 6px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-codes-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cs-codes-options .form-select {
    min-height: 42px;
}


/* DICA */

.cs-codes-tip {
    display: flex;
    gap: 9px;
    margin-top: auto;
    padding: 13px;
    border: 1px solid rgba(105,108,255,.10);
    border-radius: 10px;
    background: rgba(105,108,255,.035);
}

.cs-codes-tip > i {
    color: #696cff;
    font-size: 17px;
}

.cs-codes-tip strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.cs-codes-tip p {
    margin: 2px 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-codes-tip b {
    color: #696cff;
}


/* SALVAR */

.cs-codes-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(127,127,127,.08);
}

.cs-codes-savebar > div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-codes-savebar > div i {
    color: #22c55e;
}

.cs-codes-save,
.cs-converter-open,
.cs-converter-copy {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}

.cs-codes-save,
.cs-converter-open {
    color: #fff;
    background: linear-gradient(135deg,#696cff,#32b5ed);
    box-shadow: 0 5px 14px rgba(105,108,255,.16);
}


/* EXEMPLOS */

.cs-codes-example {
    margin-top: 17px;
}

.cs-codes-example .accordion-item {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.09) !important;
    border-radius: 10px !important;
}

.cs-codes-example .accordion-button {
    padding: 11px 13px;
    gap: 7px;
    font-size: 13px;
    font-weight: 750;
}

.cs-code-example-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cs-code-example-grid > div {
    padding: 12px;
    border-radius: 9px;
    background: rgba(127,127,127,.035);
}

.cs-code-example-grid span {
    display: block;
    margin-bottom: 7px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
}

.cs-code-example-grid code {
    color: var(--bs-body-color);
    font-size: 13px;
    line-height: 1.7;
}


/* CONVERSORES */

.cs-converter-heading {
    margin: 25px 3px 12px;
}

.cs-converter-heading h3 {
    margin: 2px 0;
    font-size: 16px;
    font-weight: 800;
}

.cs-converter-heading p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-converter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.cs-converter-card {
    padding: 19px;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 15px;
    background: var(--bs-body-bg);
}

.cs-converter-icon.combo {
    color: #8b5cf6;
    background: rgba(139,92,246,.08);
}

.cs-converter-form {
    display: grid;
    gap: 11px;
}

.cs-converter-form input {
    min-height: 40px;
}

.cs-converter-text-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cs-converter-open {
    justify-self: start;
}

.cs-converter-result-head {
    margin: 17px 0 7px;
    font-size: 13px;
    font-weight: 800;
}

.cs-converter-result {
    min-height: 115px;
    max-height: 220px;
    overflow: auto;
    padding: 11px;
    border: 1px solid rgba(127,127,127,.11);
    border-radius: 9px;
    background: rgba(127,127,127,.025);
    font-family: monospace;
    font-size: 13px;
    line-height: 1.55;
}

.cs-converter-copy {
    margin-top: 10px;
    color: #16a34a;
    border: 1px solid rgba(34,197,94,.12);
    background: rgba(34,197,94,.07);
}


/* DARK */

.dark-style .cs-codes-hero,
.dark-style .cs-codes-card,
.dark-style .cs-converter-card {
    background: #111827;
    border-color: rgba(255,255,255,.07);
}


/* MOBILE */

@media (max-width: 767.98px) {

    .cs-codes-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .cs-codes-list-btn {
        width: 100%;
    }

    .cs-codes-form-grid,
    .cs-converter-grid,
    .cs-code-example-grid,
    .cs-converter-text-grid {
        grid-template-columns: 1fr;
    }

    .cs-codes-card,
    .cs-converter-card {
        padding: 16px;
    }

    .cs-codes-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-codes-save {
        width: 100%;
    }

}


/* =========================================================
   CLICKSTAR - LISTA DE CÓDIGOS
   ========================================================= */

.cs-stock-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.cs-stock-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}

.cs-stock-kicker {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 6px;

    color: #696cff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-stock-hero h2 {
    margin: 0;

    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-stock-hero p {
    margin: 5px 0 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-stock-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.cs-stock-actions a,
.cs-stock-actions button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 0 12px;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 800;
}

.cs-stock-add {
    border: 0;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #696cff,
            #32b5ed
        );

    box-shadow:
        0 5px 14px rgba(105,108,255,.16);
}

.cs-stock-delete-selected {
    border: 1px solid rgba(245,158,11,.14);

    color: #d97706;

    background: rgba(245,158,11,.07);
}

.cs-stock-delete-all {
    border: 1px solid rgba(239,68,68,.13);

    color: #ef4444;

    background: rgba(239,68,68,.06);
}


/* CARD */

.cs-stock-card {
    overflow: hidden;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-stock-card-head {
    padding: 17px 18px;

    border-bottom: 1px solid rgba(127,127,127,.08);
}

.cs-stock-card-head strong,
.cs-stock-card-head small {
    display: block;
}

.cs-stock-card-head strong {
    font-size: 13px;
}

.cs-stock-card-head small {
    margin-top: 3px;

    color: var(--bs-secondary-color);

    font-size: 13px;
}


/* DATATABLE */

.cs-stock-table {
    margin: 0 !important;

    border: 0 !important;
}

.cs-stock-table .dt-layout-row {
    padding: 12px 15px;

    margin: 0 !important;
}

.cs-stock-table .dt-layout-row:first-child {
    border-bottom: 1px solid rgba(127,127,127,.08);
}

.cs-stock-table .dt-layout-row:last-child {
    border-top: 1px solid rgba(127,127,127,.08);
}

.cs-stock-table .dt-length,
.cs-stock-table .dt-search {
    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-stock-table .dt-length select,
.cs-stock-table .dt-search input {
    min-height: 34px;

    border: 1px solid rgba(127,127,127,.14) !important;
    border-radius: 8px !important;

    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

.cs-stock-table table {
    margin: 0 !important;
}

.cs-stock-table thead th {
    padding: 11px 10px !important;

    border-bottom: 1px solid rgba(127,127,127,.10) !important;

    color: #748399 !important;
    background: rgba(127,127,127,.018);

    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cs-stock-table tbody td {
    padding: 10px !important;

    vertical-align: middle !important;

    border-bottom: 1px solid rgba(127,127,127,.07) !important;

    font-size: 13px;
}

.cs-stock-table tbody tr:hover td {
    background: rgba(105,108,255,.02);
}

.cs-stock-table .badge {
    padding: 5px 7px;

    border-radius: 20px;

    font-size: 13px;
}


/* CHECKBOX */

.cs-stock-table input[type="checkbox"] {
    width: 15px;
    height: 15px;

    cursor: pointer;

    accent-color: #696cff;
}


/* DROPDOWN DE FUNÇÕES */

.cs-stock-table .dropdown-toggle {
    min-height: 31px !important;

    padding: 0 9px !important;

    border: 1px solid rgba(105,108,255,.14) !important;
    border-radius: 8px !important;

    color: #696cff !important;

    background: rgba(105,108,255,.07) !important;

    font-size: 13px !important;
    font-weight: 750 !important;
}

.cs-stock-table .dropdown-menu {
    min-width: 145px;

    padding: 6px;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 10px;

    box-shadow:
        0 14px 30px rgba(0,0,0,.12);
}

.cs-stock-table .dropdown-item {
    padding: 7px 9px;

    border-radius: 7px;

    font-size: 13px;
}


/* PAGINAÇÃO */

.cs-stock-table .dt-info {
    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-stock-table .dt-paging-button {
    min-width: 31px !important;
    height: 31px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 2px !important;
    padding: 0 8px !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-size: 13px !important;
}

.cs-stock-table .dt-paging-button.current {
    color: #fff !important;

    background: #696cff !important;
}


/* MODAL */

#editarModal .modal-content {
    overflow: hidden;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
}

#editarModal .modal-header {
    padding: 16px 18px;

    border-bottom: 1px solid rgba(127,127,127,.08);
}

#editarModal .modal-title {
    font-size: 13px;
    font-weight: 800;
}

#editarModal .modal-body {
    padding: 18px;
}

#editarModal .modal-footer {
    padding: 12px 18px 17px;

    border-top: 0;
}

#editarModal .form-control,
#editarModal .form-select {
    min-height: 40px;

    border: 1px solid rgba(127,127,127,.14);
    border-radius: 9px;

    font-size: 13px;
}


/* DARK */

.dark-style .cs-stock-card {
    background: #111827;

    border-color: rgba(255,255,255,.07);
}


/* MOBILE */

@media (max-width: 767.98px) {

    .cs-stock-page {
        padding: 20px 14px 30px;
    }

    .cs-stock-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-stock-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-stock-actions a,
    .cs-stock-actions button {
        width: 100%;
    }

    .cs-stock-table .dt-layout-row {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 8px;
    }

    .cs-stock-table .dt-search input {
        width: 100% !important;
        margin-left: 0 !important;
    }

}


/* =========================================================
   LISTAR CÓDIGOS - CORREÇÃO DE LARGURA / ESCALA / DARK
   ========================================================= */

/* A página precisa ocupar toda a área útil do painel */
.cs-stock-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 0 40px !important;
}

.cs-stock-card {
    width: 100% !important;
    max-width: none !important;
}


/* CARD DA TABELA */

.cs-stock-card-head {
    padding: 20px 22px !important;
}

.cs-stock-card-head strong {
    font-size: 14px !important;
    font-weight: 800 !important;
}

.cs-stock-card-head small {
    margin-top: 4px !important;
    font-size: 13px !important;
}


/* DATATABLE OCUPANDO 100% */

.cs-stock-table,
.cs-stock-table .dt-container,
.cs-stock-table .dataTables_wrapper,
.cs-stock-table .table-responsive {
    width: 100% !important;
    max-width: none !important;
}

.cs-stock-table .table-responsive {
    padding: 0 18px !important;
    overflow-x: auto !important;
}

.cs-stock-table table,
.cs-stock-table #example {
    width: 100% !important;
    min-width: 1050px !important;
}


/* BARRA SUPERIOR */

.cs-stock-table .dt-layout-row {
    width: 100% !important;
    padding: 16px 20px !important;
}

.cs-stock-table .dt-length,
.cs-stock-table .dt-search {
    font-size: 13px !important;
}

.cs-stock-table .dt-length select {
    width: auto !important;
    min-width: 85px !important;
    height: 38px !important;
    min-height: 38px !important;

    padding: 5px 30px 5px 10px !important;

    font-size: 13px !important;
}

.cs-stock-table .dt-search input {
    width: 210px !important;
    height: 38px !important;
    min-height: 38px !important;

    padding: 6px 10px !important;

    font-size: 13px !important;
}


/* CABEÇALHO DA TABELA */

.cs-stock-table thead th {
    height: 44px !important;

    padding: 12px 12px !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* LINHAS */

.cs-stock-table tbody td {
    height: 52px !important;

    padding: 12px !important;

    font-size: 13px !important;
    line-height: 1.35 !important;

    white-space: nowrap;
}


/* STATUS / CATEGORIA */

.cs-stock-table .badge {
    padding: 6px 9px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}


/* BOTÃO FUNÇÕES */

.cs-stock-table .dropdown-toggle {
    min-width: 72px !important;
    height: 34px !important;

    padding: 0 11px !important;

    font-size: 13px !important;
}


/* CHECKBOX */

.cs-stock-table input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
}


/* RODAPÉ */

.cs-stock-table .dt-info {
    font-size: 13px !important;
}

.cs-stock-table .dt-paging {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.cs-stock-table .dt-paging-button {
    min-width: 34px !important;
    height: 34px !important;

    font-size: 13px !important;
}


/* =========================================================
   DARK MODE - DATATABLE
   ========================================================= */

html.dark-style .cs-stock-card,
.dark-style .cs-stock-card {
    background: #111827 !important;
    border-color: #243247 !important;
}


/* SELECT QUANTIDADE */

html.dark-style .cs-stock-table select,
.dark-style .cs-stock-table select {
    color: #f1f5f9 !important;
    background-color: #111827 !important;

    border-color: #40506a !important;

    color-scheme: dark !important;
}


/* OPÇÕES NATIVAS DO SELECT */

html.dark-style .cs-stock-table select option,
.dark-style .cs-stock-table select option {
    color: #f1f5f9 !important;
    background: #111827 !important;
}


/* CAMPO BUSCAR */

html.dark-style .cs-stock-table .dt-search input,
.dark-style .cs-stock-table .dt-search input {
    color: #f1f5f9 !important;
    background: #111827 !important;

    border-color: #40506a !important;
}

html.dark-style .cs-stock-table .dt-search input:focus,
.dark-style .cs-stock-table .dt-search input:focus {
    border-color: #696cff !important;

    box-shadow:
        0 0 0 3px rgba(105,108,255,.12) !important;
}


/* TEXTOS SHOW / ENTRIES / SEARCH */

html.dark-style .cs-stock-table .dt-length,
html.dark-style .cs-stock-table .dt-search,
html.dark-style .cs-stock-table .dt-info,
.dark-style .cs-stock-table .dt-length,
.dark-style .cs-stock-table .dt-search,
.dark-style .cs-stock-table .dt-info {
    color: #cbd5e1 !important;
}


/* CABEÇALHO */

html.dark-style .cs-stock-table thead th,
.dark-style .cs-stock-table thead th {
    color: #8294ae !important;

    background: #0f1827 !important;

    border-color: #26364d !important;
}


/* LINHAS */

html.dark-style .cs-stock-table tbody td,
.dark-style .cs-stock-table tbody td {
    color: #e5e7eb !important;

    background: #111827 !important;

    border-color: #223047 !important;
}

html.dark-style .cs-stock-table tbody tr:hover td,
.dark-style .cs-stock-table tbody tr:hover td {
    background: #151f31 !important;
}


/* DROPDOWN */

html.dark-style .cs-stock-table .dropdown-menu,
.dark-style .cs-stock-table .dropdown-menu {
    color: #e5e7eb !important;
    background: #111827 !important;

    border-color: #2a3950 !important;
}

html.dark-style .cs-stock-table .dropdown-item,
.dark-style .cs-stock-table .dropdown-item {
    color: #d7deea !important;
}

html.dark-style .cs-stock-table .dropdown-item:hover,
.dark-style .cs-stock-table .dropdown-item:hover {
    color: #fff !important;
    background: #192338 !important;
}


/* MOBILE */

@media (max-width: 767.98px) {

    .cs-stock-page {
        padding: 16px 0 30px !important;
    }

    .cs-stock-table .table-responsive {
        padding: 0 10px !important;
    }

    .cs-stock-table .dt-search input {
        width: 100% !important;
    }

}


/* =========================================================
   CLICKSTAR - VENDAS
   ========================================================= */

.cs-sales-page {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.cs-sales-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.cs-sales-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #696cff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-sales-hero h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-sales-hero p {
    margin: 5px 0 0;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-sales-delete-all {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid rgba(239,68,68,.14);
    border-radius: 9px;
    color: #ef4444;
    background: rgba(239,68,68,.06);
    font-size: 13px;
    font-weight: 800;
}


/* CARD */

.cs-sales-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
    background: var(--bs-body-bg);
}

.cs-sales-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(127,127,127,.08);
}

.cs-sales-card-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 10px;
    color: #696cff;
    background: rgba(105,108,255,.08);
    font-size: 18px;
}

.cs-sales-card-head strong,
.cs-sales-card-head small {
    display: block;
}

.cs-sales-card-head strong {
    font-size: 13px;
}

.cs-sales-card-head small {
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 13px;
}


/* DATATABLE */

.cs-sales-table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
}

.cs-sales-table .dt-container,
.cs-sales-table .dataTables_wrapper,
.cs-sales-table .table-responsive {
    width: 100% !important;
}

.cs-sales-table .table-responsive {
    padding: 0 16px;
    overflow-x: auto;
}

.cs-sales-table table {
    width: 100% !important;
    min-width: 950px;
    margin: 0 !important;
}

.cs-sales-table .dt-layout-row {
    width: 100%;
    margin: 0 !important;
    padding: 13px 16px;
}

.cs-sales-table .dt-layout-row:first-child {
    border-bottom: 1px solid rgba(127,127,127,.08);
}

.cs-sales-table .dt-layout-row:last-child {
    border-top: 1px solid rgba(127,127,127,.08);
}


/* SEARCH / LENGTH */

.cs-sales-table .dt-length,
.cs-sales-table .dt-search {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-sales-table .dt-length select,
.cs-sales-table .dt-search input {
    height: 36px;
    min-height: 36px;
    border: 1px solid rgba(127,127,127,.15) !important;
    border-radius: 8px !important;
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    box-shadow: none !important;
}

.cs-sales-table .dt-search input {
    min-width: 200px;
    padding: 0 9px !important;
}


/* CABEÇALHO */

.cs-sales-table thead th {
    padding: 11px !important;
    border-bottom: 1px solid rgba(127,127,127,.10) !important;
    color: #748399 !important;
    background: rgba(127,127,127,.018);
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* LINHAS */

.cs-sales-table tbody td {
    min-height: 50px;
    padding: 11px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(127,127,127,.07) !important;
    font-size: 13px;
    white-space: nowrap;
}

.cs-sales-table tbody tr:hover td {
    background: rgba(105,108,255,.02);
}


/* BOTÕES EDITAR / EXCLUIR */

.cs-sales-table .btn-icon {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
    min-height: 33px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

.cs-sales-table .btn-primary {
    border: 1px solid rgba(105,108,255,.14) !important;
    color: #696cff !important;
    background: rgba(105,108,255,.07) !important;
}

.cs-sales-table .btn-danger {
    border: 1px solid rgba(239,68,68,.13) !important;
    color: #ef4444 !important;
    background: rgba(239,68,68,.06) !important;
}

.cs-sales-table .btn-icon i {
    font-size: 14px;
}


/* RODAPÉ */

.cs-sales-table .dt-info {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.cs-sales-table .dt-paging-button {
    min-width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 2px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

.cs-sales-table .dt-paging-button.current {
    color: #fff !important;
    background: #696cff !important;
}


/* MODAL */

#modalCenter .modal-content {
    overflow: hidden;
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;
}

#modalCenter .modal-header {
    padding: 17px 19px;
    border-bottom: 1px solid rgba(127,127,127,.08);
}

#modalCenter .modal-title {
    font-size: 14px;
    font-weight: 800;
}

#modalCenter .modal-body {
    padding: 18px;
}

#modalCenter .modal-footer {
    padding: 12px 18px 18px;
    border-top: 0;
}

#modalCenter label {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 750;
}

#modalCenter .form-control {
    min-height: 40px;
    border: 1px solid rgba(127,127,127,.14);
    border-radius: 9px;
    font-size: 13px;
}


/* DARK */

html.dark-style .cs-sales-card,
.dark-style .cs-sales-card {
    background: #111827;
    border-color: rgba(255,255,255,.07);
}

html.dark-style .cs-sales-table select,
.dark-style .cs-sales-table select,
html.dark-style .cs-sales-table .dt-search input,
.dark-style .cs-sales-table .dt-search input {
    color: #e5e7eb !important;
    background: #111827 !important;
    border-color: #35445d !important;
    color-scheme: dark;
}

html.dark-style .cs-sales-table select option,
.dark-style .cs-sales-table select option {
    color: #e5e7eb !important;
    background: #111827 !important;
}

html.dark-style .cs-sales-table thead th,
.dark-style .cs-sales-table thead th {
    color: #8494ab !important;
    background: #0f1827 !important;
    border-color: #26364d !important;
}

html.dark-style .cs-sales-table tbody td,
.dark-style .cs-sales-table tbody td {
    color: #e5e7eb !important;
    background: #111827 !important;
    border-color: #223047 !important;
}

html.dark-style .cs-sales-table tbody tr:hover td,
.dark-style .cs-sales-table tbody tr:hover td {
    background: #151f31 !important;
}


/* MOBILE */

@media (max-width: 767.98px) {

    .cs-sales-page {
        padding: 20px 14px 30px;
    }

    .cs-sales-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-sales-delete-all {
        width: 100%;
    }

    .cs-sales-table .dt-layout-row {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 8px;
    }

    .cs-sales-table .dt-search input {
        width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
    }

}


/* =========================================================
   CLICKSTAR - ADICIONAR REVENDA
   ========================================================= */

.cs-reseller-create-page {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


/* HERO */

.cs-reseller-create-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 17px;
    padding: 22px 24px;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-reseller-create-kicker {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 5px;

    color: #696cff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-reseller-create-hero h2 {
    margin: 0;

    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-reseller-create-hero p {
    max-width: 620px;

    margin: 5px 0 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
    line-height: 1.55;
}

.cs-reseller-create-list {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;

    padding: 0 14px;

    border: 1px solid rgba(105,108,255,.14);
    border-radius: 9px;

    color: #696cff;

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

    font-size: 13px;
    font-weight: 800;
}

.cs-reseller-create-list:hover {
    color: #fff;

    background: #696cff;
}


/* GRID */

.cs-reseller-create-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(280px,.55fr);

    gap: 16px;

    align-items: start;
}


/* FORM CARD */

.cs-reseller-create-card,
.cs-reseller-credit-card,
.cs-reseller-info-card {
    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-reseller-create-card {
    padding: 21px;
}

.cs-reseller-create-card-head {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 21px;
}

.cs-reseller-create-icon {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    flex: 0 0 41px;

    border-radius: 11px;

    color: #696cff;

    background: rgba(105,108,255,.08);

    font-size: 20px;
}

.cs-reseller-create-card-head span {
    color: #696cff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
}

.cs-reseller-create-card-head h4 {
    margin: 1px 0 2px;

    font-size: 14px;
    font-weight: 800;
}

.cs-reseller-create-card-head p {
    margin: 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
}


/* CAMPOS */

.cs-reseller-create-fields {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}

.cs-reseller-field-full {
    grid-column: 1 / -1;
}

.cs-reseller-field label {
    display: block;

    margin-bottom: 6px;

    font-size: 13px;
    font-weight: 800;
}

.cs-reseller-field label span {
    color: #ef4444;
}

.cs-reseller-field > small {
    display: block;

    margin-top: 6px;

    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-reseller-input {
    position: relative;
}

.cs-reseller-input > i {
    position: absolute;

    top: 50%;
    left: 12px;

    z-index: 2;

    transform: translateY(-50%);

    color: #8492a7;

    font-size: 16px;

    pointer-events: none;
}

.cs-reseller-input .form-control {
    min-height: 42px;

    padding-left: 38px;

    border: 1px solid rgba(127,127,127,.15) !important;
    border-radius: 9px !important;

    background: var(--bs-body-bg);

    color: var(--bs-body-color);

    font-size: 13px;

    box-shadow: none !important;
}

.cs-reseller-input .form-control:focus {
    border-color: #696cff !important;

    box-shadow:
        0 0 0 3px rgba(105,108,255,.08) !important;
}


/* SENHA */

.cs-reseller-password .form-control {
    padding-right: 42px;
}

.cs-reseller-password-toggle {
    position: absolute;

    top: 50%;
    right: 7px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    border: 0;
    border-radius: 7px;

    color: #8492a7;

    background: transparent;
}

.cs-reseller-password-toggle:hover {
    color: #696cff;

    background: rgba(105,108,255,.06);
}


/* SAVE */

.cs-reseller-create-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-top: 21px;
    padding-top: 16px;

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

.cs-reseller-create-savebar > div {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-reseller-create-savebar > div i {
    color: #22c55e;

    font-size: 14px;
}

.cs-reseller-create-save {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 15px;

    border: 0;
    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #696cff,
            #32b5ed
        );

    box-shadow:
        0 5px 14px rgba(105,108,255,.16);

    font-size: 13px;
    font-weight: 800;
}


/* LATERAL */

.cs-reseller-create-side {
    display: grid;
    gap: 14px;
}

.cs-reseller-credit-card {
    padding: 21px;
}

.cs-reseller-credit-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    margin-bottom: 15px;

    border-radius: 11px;

    color: #16a34a;

    background: rgba(34,197,94,.08);

    font-size: 20px;
}

.cs-reseller-credit-card > span {
    display: block;

    color: var(--bs-secondary-color);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
}

.cs-reseller-credit-card > strong {
    display: block;

    margin: 5px 0 3px;

    color: #16a34a;

    font-size: 27px;
    font-weight: 850;
    line-height: 1;
}

.cs-reseller-credit-card > p {
    margin: 8px 0 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
    line-height: 1.55;
}


/* INFO */

.cs-reseller-info-card {
    padding: 18px;
}

.cs-reseller-info-title {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 15px;

    font-size: 13px;
    font-weight: 800;
}

.cs-reseller-info-title i {
    color: #696cff;

    font-size: 16px;
}

.cs-reseller-info-item {
    display: flex;
    gap: 10px;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(127,127,127,.07);
}

.cs-reseller-info-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.cs-reseller-info-item > i {
    margin-top: 1px;

    color: #696cff;

    font-size: 16px;
}

.cs-reseller-info-item strong,
.cs-reseller-info-item span {
    display: block;
}

.cs-reseller-info-item strong {
    margin-bottom: 2px;

    font-size: 13px;
}

.cs-reseller-info-item span {
    color: var(--bs-secondary-color);

    font-size: 13px;
    line-height: 1.45;
}


/* DARK */

html.dark-style .cs-reseller-create-hero,
html.dark-style .cs-reseller-create-card,
html.dark-style .cs-reseller-credit-card,
html.dark-style .cs-reseller-info-card,
.dark-style .cs-reseller-create-hero,
.dark-style .cs-reseller-create-card,
.dark-style .cs-reseller-credit-card,
.dark-style .cs-reseller-info-card {
    background: #111827;

    border-color: rgba(255,255,255,.07);
}

html.dark-style .cs-reseller-input .form-control,
.dark-style .cs-reseller-input .form-control {
    color: #e5e7eb;

    background: #0d1524;

    border-color: rgba(255,255,255,.09) !important;
}


/* RESPONSIVO */

@media (max-width: 991.98px) {

    .cs-reseller-create-grid {
        grid-template-columns: 1fr;
    }

    .cs-reseller-create-side {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 767.98px) {

    .cs-reseller-create-hero {
        align-items: stretch;
        flex-direction: column;

        padding: 18px;
    }

    .cs-reseller-create-list {
        width: 100%;
    }

    .cs-reseller-create-card {
        padding: 16px;
    }

    .cs-reseller-create-fields,
    .cs-reseller-create-side {
        grid-template-columns: 1fr;
    }

    .cs-reseller-field-full {
        grid-column: auto;
    }

    .cs-reseller-create-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-reseller-create-save {
        width: 100%;
    }

}


/* =========================================================
   CLICKSTAR - LISTA DE REVENDEDORES
   ========================================================= */

.cs-resellers-page {
    width: 100%;
    max-width: none;
    margin: 0;
}


/* HERO */

.cs-resellers-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 17px;
    padding: 21px 23px;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-resellers-kicker {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 5px;

    color: #696cff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-resellers-hero h2 {
    margin: 0;

    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-resellers-hero p {
    margin: 5px 0 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-resellers-add {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;

    padding: 0 14px;

    border: 0;
    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #696cff,
            #32b5ed
        );

    box-shadow:
        0 5px 14px rgba(105,108,255,.16);

    font-size: 13px;
    font-weight: 800;
}


/* CARD */

.cs-resellers-card {
    width: 100%;
    overflow: hidden;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-resellers-card-head {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 17px 19px;

    border-bottom:
        1px solid rgba(127,127,127,.08);
}

.cs-resellers-card-icon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex: 0 0 37px;

    border-radius: 10px;

    color: #696cff;

    background: rgba(105,108,255,.08);

    font-size: 18px;
}

.cs-resellers-card-head strong,
.cs-resellers-card-head small {
    display: block;
}

.cs-resellers-card-head strong {
    font-size: 13px;
}

.cs-resellers-card-head small {
    margin-top: 2px;

    color: var(--bs-secondary-color);

    font-size: 13px;
}


/* DATATABLE */

.cs-resellers-table {
    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;
}

.cs-resellers-table .dt-container,
.cs-resellers-table .dataTables_wrapper,
.cs-resellers-table .table-responsive {
    width: 100% !important;
    max-width: none !important;
}

.cs-resellers-table .table-responsive {
    padding: 0 16px;

    overflow-x: auto !important;
}

.cs-resellers-table table,
.cs-resellers-table #example {
    width: 100% !important;
    min-width: 1180px !important;

    margin: 0 !important;
}


/* CONTROLES DATATABLE */

.cs-resellers-table .dt-layout-row {
    width: 100% !important;

    margin: 0 !important;
    padding: 14px 17px;
}

.cs-resellers-table .dt-layout-row:first-child {
    border-bottom:
        1px solid rgba(127,127,127,.08);
}

.cs-resellers-table .dt-layout-row:last-child {
    border-top:
        1px solid rgba(127,127,127,.08);
}

.cs-resellers-table .dt-length,
.cs-resellers-table .dt-search {
    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-resellers-table .dt-length select,
.cs-resellers-table .dt-search input {
    height: 37px;
    min-height: 37px;

    border:
        1px solid rgba(127,127,127,.15) !important;

    border-radius: 8px !important;

    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;

    font-size: 13px;

    box-shadow: none !important;
}

.cs-resellers-table .dt-length select {
    min-width: 75px;
}

.cs-resellers-table .dt-search input {
    min-width: 210px;

    padding: 0 10px !important;
}


/* CABEÇALHO */

.cs-resellers-table thead th {
    padding: 11px 10px !important;

    border-bottom:
        1px solid rgba(127,127,127,.10) !important;

    color: #748399 !important;

    background:
        rgba(127,127,127,.018);

    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .045em;

    text-transform: uppercase;

    white-space: nowrap !important;
}


/* LINHAS */

.cs-resellers-table tbody td {
    height: 51px;

    padding: 10px !important;

    vertical-align: middle !important;

    border-bottom:
        1px solid rgba(127,127,127,.07) !important;

    font-size: 13px;

    white-space: nowrap;
}

.cs-resellers-table tbody tr:hover td {
    background:
        rgba(105,108,255,.025);
}


/* STATUS */

.cs-resellers-table .badge {
    min-width: 68px;

    padding: 6px 9px;

    border: 0;

    border-radius: 20px;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}


/* OPÇÕES */

.cs-resellers-table .dropdown-toggle {
    min-width: 78px !important;
    height: 33px !important;

    padding: 0 10px !important;

    border:
        1px solid rgba(105,108,255,.14) !important;

    border-radius: 8px !important;

    color: #696cff !important;

    background:
        rgba(105,108,255,.07) !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}

.cs-resellers-table .dropdown-menu {
    min-width: 175px;

    padding: 6px;

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

    border-radius: 10px;

    box-shadow:
        0 14px 30px rgba(0,0,0,.12);
}

.cs-resellers-table .dropdown-item {
    display: flex;
    align-items: center;

    padding: 8px 9px;

    border-radius: 7px;

    font-size: 13px;
}

.cs-resellers-table .dropdown-item i {
    width: 18px;

    font-size: 13px;
}


/* PAGINAÇÃO */

.cs-resellers-table .dt-info {
    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-resellers-table .dt-paging-button {
    min-width: 32px !important;
    height: 32px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 2px !important;
    padding: 0 8px !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-size: 13px !important;
}

.cs-resellers-table .dt-paging-button.current {
    color: #fff !important;

    background: #696cff !important;
}


/* =========================================================
   MODAL EDITAR REVENDA
   ========================================================= */

#editarModal .modal-content {
    overflow: hidden;

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

    border-radius: 16px;
}

#editarModal .modal-header {
    padding: 17px 19px;

    border-bottom:
        1px solid rgba(127,127,127,.08);
}

#editarModal .modal-title {
    font-size: 14px;
    font-weight: 800;
}

#editarModal .modal-body {
    padding: 18px 19px 5px;
}

#editarModal .form-label {
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 800;
}

#editarModal .form-control {
    min-height: 40px;

    border:
        1px solid rgba(127,127,127,.14);

    border-radius: 9px;

    font-size: 13px;

    box-shadow: none;
}

#editarModal .form-control:focus {
    border-color: #696cff;

    box-shadow:
        0 0 0 3px rgba(105,108,255,.08);
}

#editarModal .modal-footer {
    padding: 12px 19px 18px;

    border-top: 0;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark-style .cs-resellers-hero,
html.dark-style .cs-resellers-card,
.dark-style .cs-resellers-hero,
.dark-style .cs-resellers-card {
    background: #111827;

    border-color: rgba(255,255,255,.07);
}

html.dark-style .cs-resellers-table select,
.dark-style .cs-resellers-table select,
html.dark-style .cs-resellers-table .dt-search input,
.dark-style .cs-resellers-table .dt-search input {
    color: #e5e7eb !important;

    background: #111827 !important;

    border-color: #35445d !important;

    color-scheme: dark;
}

html.dark-style .cs-resellers-table select option,
.dark-style .cs-resellers-table select option {
    color: #e5e7eb !important;

    background: #111827 !important;
}

html.dark-style .cs-resellers-table thead th,
.dark-style .cs-resellers-table thead th {
    color: #8494ab !important;

    background: #0f1827 !important;

    border-color: #26364d !important;
}

html.dark-style .cs-resellers-table tbody td,
.dark-style .cs-resellers-table tbody td {
    color: #e5e7eb !important;

    background: #111827 !important;

    border-color: #223047 !important;
}

html.dark-style .cs-resellers-table tbody tr:hover td,
.dark-style .cs-resellers-table tbody tr:hover td {
    background: #151f31 !important;
}

html.dark-style .cs-resellers-table .dropdown-menu,
.dark-style .cs-resellers-table .dropdown-menu {
    color: #e5e7eb !important;

    background: #111827 !important;

    border-color: #2a3950 !important;
}

html.dark-style .cs-resellers-table .dropdown-item,
.dark-style .cs-resellers-table .dropdown-item {
    color: #d7deea !important;
}

html.dark-style .cs-resellers-table .dropdown-item:hover,
.dark-style .cs-resellers-table .dropdown-item:hover {
    color: #fff !important;

    background: #192338 !important;
}


/* MOBILE */

@media (max-width: 767.98px) {

    .cs-resellers-hero {
        align-items: stretch;
        flex-direction: column;

        padding: 18px;
    }

    .cs-resellers-add {
        width: 100%;
    }

    .cs-resellers-table .table-responsive {
        padding: 0 10px;
    }

    .cs-resellers-table .dt-layout-row {
        align-items: stretch !important;
        flex-direction: column !important;

        gap: 8px;
    }

    .cs-resellers-table .dt-search input {
        width: 100% !important;
        min-width: 0;

        margin-left: 0 !important;
    }

}


/* =========================================================
   CLICKSTAR - CENTRAL GLOBAL DE REVENDEDORES
   ========================================================= */

.cs-global-resellers-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* HERO */

.cs-global-resellers-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 17px;
    padding: 21px 23px;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-global-resellers-kicker {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 5px;

    color: #696cff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cs-global-resellers-hero h2 {
    margin: 0;

    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.cs-global-resellers-hero p {
    margin: 5px 0 0;

    color: var(--bs-secondary-color);

    font-size: 13px;
    line-height: 1.55;
}

.cs-global-resellers-add {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;

    padding: 0 14px;

    border: 0;
    border-radius: 9px;

    color: #fff !important;

    background: linear-gradient(
        135deg,
        #696cff,
        #32b5ed
    );

    box-shadow:
        0 5px 14px rgba(105,108,255,.16);

    font-size: 13px;
    font-weight: 800;
}

/* CARD */

.cs-global-resellers-card {
    width: 100%;
    overflow: hidden;

    border: 1px solid rgba(127,127,127,.12);
    border-radius: 16px;

    background: var(--bs-body-bg);
}

.cs-global-resellers-head {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 17px 19px;

    border-bottom:
        1px solid rgba(127,127,127,.08);
}

.cs-global-resellers-head-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 38px;

    border-radius: 10px;

    color: #696cff;

    background: rgba(105,108,255,.08);

    font-size: 18px;
}

.cs-global-resellers-head strong,
.cs-global-resellers-head small {
    display: block;
}

.cs-global-resellers-head strong {
    font-size: 13px;
    font-weight: 800;
}

.cs-global-resellers-head small {
    margin-top: 2px;

    color: var(--bs-secondary-color);

    font-size: 13px;
}

/* DATATABLE */

.cs-global-resellers-table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
}

.cs-global-resellers-table .dt-container,
.cs-global-resellers-table .dataTables_wrapper,
.cs-global-resellers-table .table-responsive {
    width: 100% !important;
    max-width: none !important;
}

.cs-global-resellers-table .table-responsive {
    padding: 0 16px;

    overflow-x: auto !important;
}

.cs-global-resellers-table table,
.cs-global-resellers-table #example {
    width: 100% !important;
    min-width: 1100px !important;

    margin: 0 !important;
}

/* DATATABLE CONTROLS */

.cs-global-resellers-table .dt-layout-row {
    width: 100% !important;

    margin: 0 !important;
    padding: 14px 17px;
}

.cs-global-resellers-table .dt-layout-row:first-child {
    border-bottom:
        1px solid rgba(127,127,127,.08);
}

.cs-global-resellers-table .dt-layout-row:last-child {
    border-top:
        1px solid rgba(127,127,127,.08);
}

.cs-global-resellers-table .dt-length,
.cs-global-resellers-table .dt-search {
    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-global-resellers-table .dt-length select,
.cs-global-resellers-table .dt-search input {
    height: 37px;
    min-height: 37px;

    border:
        1px solid rgba(127,127,127,.15) !important;

    border-radius: 8px !important;

    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;

    font-size: 13px;

    box-shadow: none !important;
}

.cs-global-resellers-table .dt-length select {
    min-width: 75px;
}

.cs-global-resellers-table .dt-search input {
    min-width: 220px;

    padding: 0 10px !important;
}

/* TABELA */

.cs-global-resellers-table thead th {
    padding: 11px 10px !important;

    border-bottom:
        1px solid rgba(127,127,127,.10) !important;

    color: #748399 !important;

    background: rgba(127,127,127,.018);

    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .045em;

    text-transform: uppercase;

    white-space: nowrap !important;
}

.cs-global-resellers-table tbody td {
    height: 51px;

    padding: 10px !important;

    vertical-align: middle !important;

    border-bottom:
        1px solid rgba(127,127,127,.07) !important;

    font-size: 13px;

    white-space: nowrap;
}

.cs-global-resellers-table tbody tr:hover td {
    background:
        rgba(105,108,255,.025);
}

/* STATUS */

.cs-global-resellers-table .badge {
    min-width: 72px;

    padding: 6px 9px;

    border: 0;
    border-radius: 20px;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

/* OPÇÕES */

.cs-global-resellers-table .dropdown-toggle {
    min-width: 78px !important;
    height: 33px !important;

    padding: 0 10px !important;

    border:
        1px solid rgba(105,108,255,.14) !important;

    border-radius: 8px !important;

    color: #696cff !important;

    background:
        rgba(105,108,255,.07) !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}

.cs-global-resellers-table .dropdown-menu {
    min-width: 175px;

    padding: 6px;

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

    border-radius: 10px;

    box-shadow:
        0 14px 30px rgba(0,0,0,.12);
}

.cs-global-resellers-table .dropdown-item {
    display: flex;
    align-items: center;

    padding: 8px 9px;

    border-radius: 7px;

    font-size: 13px;
}

/* PAGINAÇÃO */

.cs-global-resellers-table .dt-info {
    color: var(--bs-secondary-color);

    font-size: 13px;
}

.cs-global-resellers-table .dt-paging-button {
    min-width: 32px !important;
    height: 32px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 2px !important;
    padding: 0 8px !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-size: 13px !important;
}

.cs-global-resellers-table .dt-paging-button.current {
    color: #fff !important;
    background: #696cff !important;
}

/* MODAL */

#editarModal .modal-content {
    overflow: hidden;

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

    border-radius: 16px;
}

#editarModal .modal-header {
    padding: 17px 19px;

    border-bottom:
        1px solid rgba(127,127,127,.08);
}

#editarModal .modal-title {
    font-size: 14px;
    font-weight: 800;
}

#editarModal .modal-body {
    padding: 18px 19px 5px;
}

#editarModal .form-label {
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 800;
}

#editarModal .form-control {
    min-height: 40px;

    border:
        1px solid rgba(127,127,127,.14);

    border-radius: 9px;

    font-size: 13px;

    box-shadow: none;
}

#editarModal .form-control:focus {
    border-color: #696cff;

    box-shadow:
        0 0 0 3px rgba(105,108,255,.08);
}

/* DARK */

html.dark-style .cs-global-resellers-hero,
html.dark-style .cs-global-resellers-card,
.dark-style .cs-global-resellers-hero,
.dark-style .cs-global-resellers-card {
    background: #111827;

    border-color: rgba(255,255,255,.07);
}

html.dark-style .cs-global-resellers-table select,
.dark-style .cs-global-resellers-table select,
html.dark-style .cs-global-resellers-table .dt-search input,
.dark-style .cs-global-resellers-table .dt-search input {
    color: #e5e7eb !important;

    background: #111827 !important;

    border-color: #35445d !important;

    color-scheme: dark;
}

html.dark-style .cs-global-resellers-table select option,
.dark-style .cs-global-resellers-table select option {
    color: #e5e7eb !important;
    background: #111827 !important;
}

html.dark-style .cs-global-resellers-table thead th,
.dark-style .cs-global-resellers-table thead th {
    color: #8494ab !important;

    background: #0f1827 !important;

    border-color: #26364d !important;
}

html.dark-style .cs-global-resellers-table tbody td,
.dark-style .cs-global-resellers-table tbody td {
    color: #e5e7eb !important;

    background: #111827 !important;

    border-color: #223047 !important;
}

html.dark-style .cs-global-resellers-table tbody tr:hover td,
.dark-style .cs-global-resellers-table tbody tr:hover td {
    background: #151f31 !important;
}

html.dark-style .cs-global-resellers-table .dropdown-menu,
.dark-style .cs-global-resellers-table .dropdown-menu {
    color: #e5e7eb !important;

    background: #111827 !important;

    border-color: #2a3950 !important;
}

html.dark-style .cs-global-resellers-table .dropdown-item,
.dark-style .cs-global-resellers-table .dropdown-item {
    color: #d7deea !important;
}

/* MOBILE */

@media (max-width: 767.98px) {

    .cs-global-resellers-hero {
        align-items: stretch;
        flex-direction: column;

        padding: 18px;
    }

    .cs-global-resellers-add {
        width: 100%;
    }

    .cs-global-resellers-table .table-responsive {
        padding: 0 10px;
    }

    .cs-global-resellers-table .dt-layout-row {
        align-items: stretch !important;
        flex-direction: column !important;

        gap: 8px;
    }

    .cs-global-resellers-table .dt-search input {
        width: 100% !important;
        min-width: 0;

        margin-left: 0 !important;
    }

}


/* =========================================================
   CLICKSTAR - LEGIBILIDADE GLOBAL
   FONTES MAIORES EM TODO O PAINEL
   ========================================================= */

/* Base geral */
html {
    font-size: 15px !important;
}

body {
    font-size: 13px !important;
}

/* Textos gerais */
p,
span,
div,
a,
li {
    line-height: 1.45;
}

/* Labels */
label,
.form-label {
    font-size: 13px !important;
}

/* Inputs */
.form-control,
.form-select,
input,
select,
textarea {
    font-size: 13px !important;
}

/* Botões */
.btn,
button {
    font-size: 13px !important;
}

/* Textos auxiliares */
small,
.small,
.text-muted {
    font-size: 13px !important;
}

/* Tabelas */
table,
.table,
.dataTable {
    font-size: 13px !important;
}

table thead th,
.table thead th,
.dataTable thead th {
    font-size: 13px !important;
}

table tbody td,
.table tbody td,
.dataTable tbody td {
    font-size: 13px !important;
}

/* DataTables - busca, quantidade e paginação */
.dt-search,
.dt-length,
.dt-info,
.dataTables_filter,
.dataTables_length,
.dataTables_info {
    font-size: 13px !important;
}

.dt-search input,
.dt-length select,
.dataTables_filter input,
.dataTables_length select {
    font-size: 13px !important;
}

.dt-paging-button,
.paginate_button {
    font-size: 13px !important;
}

/* Menus */
.menu-link,
.menu-item,
.menu-sub .menu-link {
    font-size: 13px !important;
}

/* Cards */
.card-title {
    font-size: 14px !important;
}

.card-header {
    font-size: 13px !important;
}

/* Modais */
.modal-title {
    font-size: 15px !important;
}

.modal-body {
    font-size: 13px !important;
}

/* Badges e status */
.badge {
    font-size: 13px !important;
}

/* =========================================================
   COMPONENTES MODERNOS CLICKSTAR
   ========================================================= */

[class*="cs-"] p {
    font-size: 13px !important;
}

[class*="cs-"] small {
    font-size: 13px !important;
}

[class*="cs-"] label {
    font-size: 13px !important;
}

[class*="cs-"] input,
[class*="cs-"] select,
[class*="cs-"] textarea {
    font-size: 13px !important;
}

[class*="cs-"] button,
[class*="cs-"] .btn {
    font-size: 13px !important;
}

/* Tabelas modernas */
[class*="cs-"] table thead th {
    font-size: 13px !important;
}

[class*="cs-"] table tbody td {
    font-size: 13px !important;
}

/* Títulos principais continuam proporcionais */
[class*="cs-"] h2 {
    font-size: 24px !important;
}

[class*="cs-"] h3 {
    font-size: 19px !important;
}

[class*="cs-"] h4 {
    font-size: 15px !important;
}

[class*="cs-"] h5 {
    font-size: 13px !important;
}

/* Mobile */
@media (max-width: 767.98px) {

    body {
        font-size: 13px !important;
    }

    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    table tbody td,
    .table tbody td,
    .dataTable tbody td {
        font-size: 13px !important;
    }
}


/* =========================================================
   CLICKSTAR - LEGIBILIDADE GLOBAL V2
   AUMENTO DE FONTES
   ========================================================= */

html {
    font-size: 16px !important;
}

body {
    font-size: 14px !important;
}

/* Menu lateral */
.menu-link,
.menu-item,
.menu-sub .menu-link,
.menu-sub-link {
    font-size: 13px !important;
}

/* Navbar */
.navbar,
.navbar input,
.navbar .form-control {
    font-size: 13px !important;
}

/* Títulos */
h1 {
    font-size: 30px !important;
}

h2 {
    font-size: 26px !important;
}

h3 {
    font-size: 21px !important;
}

h4 {
    font-size: 17px !important;
}

h5 {
    font-size: 15px !important;
}

/* Textos */
p {
    font-size: 13px !important;
}

small,
.small {
    font-size: 13px !important;
}

/* Labels */
label,
.form-label {
    font-size: 13px !important;
}

/* Formulários */
.form-control,
.form-select,
input,
select,
textarea {
    font-size: 13px !important;
}

/* Botões */
.btn,
button {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Tabelas */
table,
.table,
.dataTable {
    font-size: 13px !important;
}

table thead th,
.table thead th,
.dataTable thead th {
    font-size: 13px !important;
}

table tbody td,
.table tbody td,
.dataTable tbody td {
    font-size: 13px !important;
}

/* DataTables */
.dt-search,
.dt-length,
.dt-info,
.dataTables_filter,
.dataTables_length,
.dataTables_info {
    font-size: 13px !important;
}

.dt-search input,
.dt-length select,
.dataTables_filter input,
.dataTables_length select {
    font-size: 13px !important;
}

.dt-paging-button,
.paginate_button {
    font-size: 13px !important;
}

/* Cards */
.card-title,
.card-header {
    font-size: 14px !important;
}

/* Modais */
.modal-title {
    font-size: 16px !important;
}

.modal-body {
    font-size: 13px !important;
}

/* Badges */
.badge {
    font-size: 13px !important;
}

/* =========================================================
   COMPONENTES CLICKSTAR
   ========================================================= */

[class*="cs-"] p {
    font-size: 13px !important;
}

[class*="cs-"] small {
    font-size: 13px !important;
}

[class*="cs-"] label {
    font-size: 13px !important;
}

[class*="cs-"] input,
[class*="cs-"] select,
[class*="cs-"] textarea {
    font-size: 13px !important;
}

[class*="cs-"] button,
[class*="cs-"] .btn {
    font-size: 13px !important;
}

[class*="cs-"] table thead th {
    font-size: 13px !important;
}

[class*="cs-"] table tbody td {
    font-size: 13px !important;
}

/* DataTables modernos */
[class*="cs-"] .dt-search,
[class*="cs-"] .dt-length,
[class*="cs-"] .dt-info {
    font-size: 13px !important;
}

/* Hero e cabeçalhos */
[class*="cs-"] h2 {
    font-size: 26px !important;
}

[class*="cs-"] h3 {
    font-size: 20px !important;
}

[class*="cs-"] h4 {
    font-size: 16px !important;
}

[class*="cs-"] h5 {
    font-size: 14px !important;
}

/* MOBILE */
@media (max-width: 767.98px) {

    body {
        font-size: 13px !important;
    }

    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    table tbody td,
    .table tbody td,
    .dataTable tbody td {
        font-size: 13px !important;
    }

    .menu-link,
    .menu-item,
    .menu-sub .menu-link {
        font-size: 13px !important;
    }
}


/* =========================================================
   CLICKSTAR - LEGIBILIDADE GLOBAL V2
   AUMENTO DE FONTES
   ========================================================= */

html {
    font-size: 16px !important;
}

body {
    font-size: 14px !important;
}

/* Menu lateral */
.menu-link,
.menu-item,
.menu-sub .menu-link,
.menu-sub-link {
    font-size: 13px !important;
}

/* Navbar */
.navbar,
.navbar input,
.navbar .form-control {
    font-size: 13px !important;
}

/* Títulos */
h1 {
    font-size: 30px !important;
}

h2 {
    font-size: 26px !important;
}

h3 {
    font-size: 21px !important;
}

h4 {
    font-size: 17px !important;
}

h5 {
    font-size: 15px !important;
}

/* Textos */
p {
    font-size: 13px !important;
}

small,
.small {
    font-size: 13px !important;
}

/* Labels */
label,
.form-label {
    font-size: 13px !important;
}

/* Formulários */
.form-control,
.form-select,
input,
select,
textarea {
    font-size: 13px !important;
}

/* Botões */
.btn,
button {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Tabelas */
table,
.table,
.dataTable {
    font-size: 13px !important;
}

table thead th,
.table thead th,
.dataTable thead th {
    font-size: 13px !important;
}

table tbody td,
.table tbody td,
.dataTable tbody td {
    font-size: 13px !important;
}

/* DataTables */
.dt-search,
.dt-length,
.dt-info,
.dataTables_filter,
.dataTables_length,
.dataTables_info {
    font-size: 13px !important;
}

.dt-search input,
.dt-length select,
.dataTables_filter input,
.dataTables_length select {
    font-size: 13px !important;
}

.dt-paging-button,
.paginate_button {
    font-size: 13px !important;
}

/* Cards */
.card-title,
.card-header {
    font-size: 14px !important;
}

/* Modais */
.modal-title {
    font-size: 16px !important;
}

.modal-body {
    font-size: 13px !important;
}

/* Badges */
.badge {
    font-size: 13px !important;
}

/* =========================================================
   COMPONENTES CLICKSTAR
   ========================================================= */

[class*="cs-"] p {
    font-size: 13px !important;
}

[class*="cs-"] small {
    font-size: 13px !important;
}

[class*="cs-"] label {
    font-size: 13px !important;
}

[class*="cs-"] input,
[class*="cs-"] select,
[class*="cs-"] textarea {
    font-size: 13px !important;
}

[class*="cs-"] button,
[class*="cs-"] .btn {
    font-size: 13px !important;
}

[class*="cs-"] table thead th {
    font-size: 13px !important;
}

[class*="cs-"] table tbody td {
    font-size: 13px !important;
}

/* DataTables modernos */
[class*="cs-"] .dt-search,
[class*="cs-"] .dt-length,
[class*="cs-"] .dt-info {
    font-size: 13px !important;
}

/* Hero e cabeçalhos */
[class*="cs-"] h2 {
    font-size: 26px !important;
}

[class*="cs-"] h3 {
    font-size: 20px !important;
}

[class*="cs-"] h4 {
    font-size: 16px !important;
}

[class*="cs-"] h5 {
    font-size: 14px !important;
}

/* MOBILE */
@media (max-width: 767.98px) {

    body {
        font-size: 13px !important;
    }

    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    table tbody td,
    .table tbody td,
    .dataTable tbody td {
        font-size: 13px !important;
    }

    .menu-link,
    .menu-item,
    .menu-sub .menu-link {
        font-size: 13px !important;
    }
}


/* ==========================================================
   CLICKSTAR - TIPOGRAFIA GLOBAL
   Legibilidade geral do painel
   ========================================================== */

/* Base geral */
body {
    font-size: 14px;
}

/* Menu lateral */
.menu-vertical .menu-link,
.menu-vertical .menu-item .menu-link {
    font-size: 14px;
}

/* Submenus */
.menu-vertical .menu-sub .menu-link {
    font-size: 13px;
}

/* Navbar e dropdowns */
.layout-navbar,
.layout-navbar .nav-link,
.dropdown-item {
    font-size: 14px;
}

/* Conteúdo normal */
.card,
.card-body,
.modal-content {
    font-size: 14px;
}

/* Tabelas */
.table {
    font-size: 14px;
}

.table > :not(caption) > * > * {
    font-size: 14px;
}

/* Campos */
.form-control,
.form-select,
.input-group-text {
    font-size: 14px;
}

/* Labels */
label,
.form-label {
    font-size: 13px;
}

/* Botões */
.btn {
    font-size: 13px;
}

/* Textos auxiliares */
small,
.form-text,
.text-muted {
    font-size: 13px;
}

/* SweetAlert usado em várias telas do ClickStar */
.swal2-popup {
    font-size: 14px;
}

.swal2-popup .swal2-title {
    font-size: 24px;
}

.swal2-popup .swal2-html-container {
    font-size: 14px;
}

.swal2-popup .swal2-actions .swal2-styled {
    font-size: 13px;
}

/* Mantém títulos com hierarquia própria */
h1, .h1 {
    font-size: 2rem;
}

h2, .h2 {
    font-size: 1.625rem;
}

h3, .h3 {
    font-size: 1.375rem;
}

h4, .h4 {
    font-size: 1.125rem;
}

/* Mobile */
@media (max-width: 767.98px) {

    body {
        font-size: 14px;
    }

    .menu-vertical .menu-link {
        font-size: 14px;
    }

    .table,
    .form-control,
    .form-select {
        font-size: 14px;
    }
}



/* ==========================================================
   CLICKSTAR - AJUSTE FINAL DE LEGIBILIDADE
   Login + Dashboard
   ========================================================== */


/* ----------------------------------------------------------
   LOGIN
   ---------------------------------------------------------- */

.cs-auth-brand small {
    font-size: 13px;
}

.cs-auth-kicker {
    font-size: 13px;
}

.cs-auth-pill {
    font-size: 13px;
}

.cs-auth-label {
    font-size: 13px;
}

.cs-auth-card .subtitle {
    font-size: 14px;
}

.cs-field label {
    font-size: 13px;
}

.cs-field .form-control {
    font-size: 14px;
}

.cs-auth-meta {
    font-size: 13px;
}

.cs-auth-switch {
    font-size: 13px;
}

.cs-auth-footerline {
    font-size: 13px;
}


/* ----------------------------------------------------------
   LOGIN - TEMA CLARO
   ---------------------------------------------------------- */

html[data-clickstar-theme="light"] .cs-auth-card .form-control {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #d8deea !important;
}

html[data-clickstar-theme="light"] .cs-auth-card .form-control::placeholder {
    color: #8a94a6 !important;
}

html[data-clickstar-theme="light"] .cs-auth-card .form-control:focus {
    background: #ffffff !important;
    color: #172033 !important;
    border-color: #6c63ff !important;
    box-shadow: 0 0 0 3px rgba(108,99,255,.10) !important;
}

html[data-clickstar-theme="light"] .cs-auth-card .input-group-text,
html[data-clickstar-theme="light"] .cs-auth-card .password-toggle {
    background: #ffffff !important;
    color: #697386 !important;
    border-color: #d8deea !important;
}


/* ----------------------------------------------------------
   DASHBOARD
   ---------------------------------------------------------- */

.cs-dashboard-kicker {
    font-size: 13px;
}

.cs-dashboard-greeting {
    font-size: 14px;
}

.cs-dashboard-status-item small {
    font-size: 13px;
}

.cs-dashboard-status-item strong {
    font-size: 14px;
}

.cs-dashboard-action small {
    font-size: 13px;
}

.cs-dashboard-action strong {
    font-size: 14px;
}

.cs-dashboard-test-info small {
    font-size: 13px;
}

.cs-dashboard-test-info a,
.cs-dashboard-test-info span {
    font-size: 13px;
}

.cs-dashboard-test-actions .btn {
    font-size: 13px !important;
}

.cs-dashboard-section-head span {
    font-size: 13px;
}

.cs-dashboard-section-head p {
    font-size: 13px;
}

.cs-dashboard-select {
    font-size: 13px !important;
}

.cs-metric-content > span {
    font-size: 13px;
}

.cs-metric-footer {
    font-size: 13px;
}


/* ----------------------------------------------------------
   RESPONSIVO
   ---------------------------------------------------------- */

@media (max-width: 767.98px) {

    .cs-auth-card .subtitle {
        font-size: 13px;
    }

    .cs-field label {
        font-size: 13px;
    }

    .cs-dashboard-action strong {
        font-size: 13px;
    }

    .cs-dashboard-section-head p {
        font-size: 13px;
    }

    .cs-metric-content > span {
        font-size: 13px;
    }
}



/* ==========================================================
   CLICKSTAR VISUAL SYSTEM
   ETAPA 9Q.7I.6D
   Legibilidade global + Login Light/Dark
   ========================================================== */


/* ==========================================================
   1. ESCALA GLOBAL
   ========================================================== */

html {
    font-size: 16px;
}

body {
    font-size: 14px !important;
    line-height: 1.5;
}


/* Navegação */

.menu-vertical .menu-link,
.menu-vertical .menu-sub .menu-link,
.menu .menu-link,
.nav-link {
    font-size: 14px !important;
}

.menu-header,
.menu-header-text {
    font-size: 13px !important;
}


/* Conteúdo comum */

p,
.card-text,
.card-body,
.dropdown-item,
.list-group-item {
    font-size: 14px;
}


/* Formulários */

.form-control,
.form-select,
.input-group-text {
    font-size: 14px !important;
}

.form-label,
label {
    font-size: 13px !important;
}

.form-text,
small,
.text-muted {
    font-size: 13px;
}


/* Botões */

.btn,
button {
    font-size: 13px;
}


/* Tabelas */

.table {
    font-size: 14px !important;
}

.table > :not(caption) > * > * {
    font-size: 14px;
}


/* Dropdowns */

.dropdown-menu {
    font-size: 14px;
}


/* Badges */

.badge {
    font-size: 13px;
}


/* Modal */

.modal-body {
    font-size: 14px;
}

.modal-title {
    font-size: 18px;
}


/* SweetAlert */

.swal2-popup {
    font-size: 14px !important;
}

.swal2-popup .swal2-title {
    font-size: 24px !important;
}

.swal2-popup .swal2-html-container {
    font-size: 14px !important;
}

.swal2-popup .swal2-styled {
    font-size: 13px !important;
}


/* ==========================================================
   2. LOGIN - TIPOGRAFIA
   ========================================================== */

.cs-auth-brand small {
    font-size: 13px !important;
}

.cs-auth-kicker {
    font-size: 13px !important;
}

.cs-auth-pill {
    font-size: 13px !important;
}

.cs-auth-label {
    font-size: 13px !important;
}

.cs-auth-card .subtitle {
    font-size: 14px !important;
    line-height: 1.55;
}

.cs-field label {
    font-size: 13px !important;
}

.cs-field .form-control {
    font-size: 14px !important;
}

.cs-auth-meta {
    font-size: 13px !important;
}

.cs-auth-switch {
    font-size: 13px !important;
}

.cs-auth-footerline {
    font-size: 13px !important;
}


/* ==========================================================
   3. LOGIN - TEMA CLARO
   ========================================================== */

html[data-clickstar-theme="light"] .cs-auth-card .form-control,
html[data-clickstar-theme="light"] .cs-auth-card input.form-control {
    background-color: #ffffff !important;
    color: #172033 !important;
    border-color: #d8deea !important;
    -webkit-text-fill-color: #172033 !important;
    caret-color: #172033 !important;
}

html[data-clickstar-theme="light"] .cs-auth-card .form-control::placeholder {
    color: #8a94a6 !important;
    -webkit-text-fill-color: #8a94a6 !important;
    opacity: 1;
}

html[data-clickstar-theme="light"] .cs-auth-card .form-control:focus {
    background-color: #ffffff !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    border-color: #696cff !important;
    box-shadow: 0 0 0 .2rem rgba(105,108,255,.12) !important;
}


/* Autofill Chrome / Edge / Safari */

html[data-clickstar-theme="light"] .cs-auth-card input:-webkit-autofill,
html[data-clickstar-theme="light"] .cs-auth-card input:-webkit-autofill:hover,
html[data-clickstar-theme="light"] .cs-auth-card input:-webkit-autofill:focus,
html[data-clickstar-theme="light"] .cs-auth-card input:-webkit-autofill:active {
    -webkit-text-fill-color: #172033 !important;
    caret-color: #172033 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-color: #ffffff !important;
    border-color: #d8deea !important;
    transition: background-color 999999s ease-in-out 0s;
}


/* Firefox autofill */

html[data-clickstar-theme="light"] .cs-auth-card input:-moz-autofill {
    background-color: #ffffff !important;
    color: #172033 !important;
}


/* Área do ícone/olho */

html[data-clickstar-theme="light"] .cs-auth-card .input-group-text,
html[data-clickstar-theme="light"] .cs-auth-card .password-toggle {
    background-color: #ffffff !important;
    color: #697386 !important;
    border-color: #d8deea !important;
}


/* ==========================================================
   4. LOGIN - TEMA ESCURO
   Garante que a correção light não contamine dark
   ========================================================== */

html[data-clickstar-theme="dark"] .cs-auth-card .form-control {
    background-color: var(--cs-panel-2) !important;
    color: var(--cs-text) !important;
    -webkit-text-fill-color: var(--cs-text) !important;
    border-color: var(--cs-border) !important;
    caret-color: var(--cs-text) !important;
}

html[data-clickstar-theme="dark"] .cs-auth-card .form-control::placeholder {
    color: var(--cs-muted) !important;
    -webkit-text-fill-color: var(--cs-muted) !important;
}

html[data-clickstar-theme="dark"] .cs-auth-card .input-group-text,
html[data-clickstar-theme="dark"] .cs-auth-card .password-toggle {
    background-color: var(--cs-panel-2) !important;
    color: var(--cs-text) !important;
    border-color: var(--cs-border) !important;
}


/* ==========================================================
   5. DASHBOARD / PAINEL
   ========================================================== */

.cs-dashboard-kicker {
    font-size: 13px !important;
}

.cs-dashboard-greeting {
    font-size: 14px !important;
}

.cs-dashboard-status-item small {
    font-size: 13px !important;
}

.cs-dashboard-status-item strong {
    font-size: 14px !important;
}

.cs-dashboard-action small {
    font-size: 13px !important;
}

.cs-dashboard-action strong {
    font-size: 14px !important;
}

.cs-dashboard-test-info small {
    font-size: 13px !important;
}

.cs-dashboard-test-info a,
.cs-dashboard-test-info span {
    font-size: 13px !important;
}

.cs-dashboard-test-actions .btn {
    font-size: 13px !important;
}

.cs-dashboard-section-head span {
    font-size: 13px !important;
}

.cs-dashboard-section-head p {
    font-size: 13px !important;
}

.cs-dashboard-select {
    font-size: 13px !important;
}

.cs-metric-content > span {
    font-size: 13px !important;
}

.cs-metric-footer {
    font-size: 13px !important;
}


/* ==========================================================
   6. MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    body {
        font-size: 14px !important;
    }

    .menu-vertical .menu-link,
    .menu-vertical .menu-sub .menu-link {
        font-size: 14px !important;
    }

    .form-control,
    .form-select,
    .table {
        font-size: 14px !important;
    }

    .cs-auth-card .subtitle {
        font-size: 13.5px !important;
    }

    .cs-field label {
        font-size: 13px !important;
    }

    .cs-dashboard-action strong {
        font-size: 13.5px !important;
    }

    .cs-dashboard-section-head p {
        font-size: 13px !important;
    }

    .cs-metric-content > span {
        font-size: 13px !important;
    }
}


/* ==========================================================
   FIM - ETAPA 9Q.7I.6D
   ========================================================== */


/* ==========================================================
   CLICKSTAR - PADRÃO TIPOGRÁFICO EM CAIXA ALTA
   Navegação + labels + cabeçalhos
   ========================================================== */

/* Labels de formulários */
.form-label,
.form-group > label,
.cs-field > label,
.cs-auth-label {
    text-transform: uppercase !important;
    letter-spacing: .025em;
    font-weight: 600;
}


/* Menu principal lateral */
.menu-vertical .menu-link,
.menu-vertical .menu-sub .menu-link {
    text-transform: uppercase !important;
    letter-spacing: .015em;
}


/* Cabeçalhos/separadores do menu */
.menu-header,
.menu-header-text {
    text-transform: uppercase !important;
    letter-spacing: .06em;
}


/* Navegação interna / abas
   Inclui menus como Textos, Lista, Mensagens,
   Boas-vindas e Conexão Bot */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    text-transform: uppercase !important;
    letter-spacing: .02em;
}


/* Cabeçalhos das tabelas */
.table thead th,
table.dataTable thead th {
    text-transform: uppercase !important;
    letter-spacing: .035em;
}


/* NÃO transformar conteúdo dos campos */
.form-control,
.form-select,
input,
textarea,
select {
    text-transform: none;
}


/* NÃO transformar títulos e textos normais */
h1,
h2,
h3,
h4,
h5,
h6,
p,
.card-title,
.card-text {
    text-transform: none;
}

/* ==========================================================
   FIM - PADRÃO CAIXA ALTA
   ========================================================== */


/* ==========================================================
   BOT WHATSAPP - MENU SUPERIOR EM CAIXA ALTA
   ========================================================== */

.cs-bot-nav > a,
.cs-bot-nav > a span,
.cs-zap-nav > a,
.cs-zap-nav > a span {
    text-transform: uppercase !important;
    letter-spacing: .02em;
}

/* ==========================================================
   FIM - BOT WHATSAPP MENU UPPERCASE
   ========================================================== */



/* ==========================================================
   META TEMPLATE MAPPER
   Correção de Z-INDEX + Tema escuro do SweetAlert
   ========================================================== */

/*
 * O cabeçalho fixo do ClickStar possui uma camada elevada.
 * SweetAlert deve sempre aparecer acima de navbar/menu.
 */
.swal2-container {
    z-index: 200000 !important;
}


/* Garante que o popup fique inteiro acima da navegação */
.swal2-popup {
    position: relative;
    z-index: 200001 !important;
}


/* ==========================================================
   TEMA ESCURO
   ========================================================== */

html[data-clickstar-theme="dark"] .swal2-popup,
html.dark-style .swal2-popup,
body.dark-style .swal2-popup {
    background: #161d2a !important;
    color: #e8edf5 !important;
    border: 1px solid #2b3545 !important;
}

html[data-clickstar-theme="dark"] .swal2-title,
html.dark-style .swal2-title,
body.dark-style .swal2-title {
    color: #f1f5f9 !important;
}

html[data-clickstar-theme="dark"] .swal2-html-container,
html.dark-style .swal2-html-container,
body.dark-style .swal2-html-container {
    color: #d7dee9 !important;
}


/*
 * O conteúdo personalizado do mapper deve acompanhar
 * o fundo do popup no modo escuro.
 */
html[data-clickstar-theme="dark"] .cs-meta-mapping,
html.dark-style .cs-meta-mapping,
body.dark-style .cs-meta-mapping {
    color: #e8edf5;
}


/* ==========================================================
   FIM - META TEMPLATE MAPPER
   ========================================================== */