/* ============================================================
   Convexion — Theme (Opção 2: Grafite + Aço)
   Troque os valores aqui para mudar o visual inteiro.
   ============================================================ */

/* ---------- Light ---------- */
:root,
[data-theme="light"] {
    --cvx-navbar-bg:      #252d38;
    --cvx-navbar-text:    #9aafc4;
    --cvx-navbar-hover:   rgba(74, 122, 181, 0.20);
    --cvx-navbar-active:  #ffffff;
    --cvx-brand-text:     #ffffff;

    --cvx-primary:           #3e5f8a;
    --cvx-primary-hover:     #4a7ab5;
    --cvx-secondary:         #3a7a6a;
    --cvx-secondary-hover:   #4a9a86;
    --cvx-tertiary:          #b5883e;
    --cvx-tertiary-hover:    #c99a4a;
    --cvx-quaternary:        #c4614a;
    --cvx-quaternary-hover:  #d4735e;
    --cvx-quinary:           #b56d3e;
    --cvx-quinary-hover:     #c97f50;

    /* Sobrescrita de variáveis do Bootstrap */
    --bs-primary:               #3e5f8a;
    --bs-primary-rgb:           62, 95, 138;
    --bs-secondary:             #6b7a8d;
    --bs-secondary-rgb:         107, 122, 141;
    --bs-link-color:            #3e5f8a;
    --bs-link-hover-color:      #4a7ab5;
    --bs-focus-ring-color:      rgba(62, 95, 138, .25);
    --bs-btn-active-bg:         #344e74;
    --bs-btn-active-border-color: #2f4568;
    --bs-form-check-input-checked-bg-color: #3e5f8a;
    --bs-form-check-input-checked-border-color: #3e5f8a;

    --cvx-bg:             #f2f4f7;
    --cvx-border:         #dce3eb;

    --cvx-text:           #1e2530;
    --cvx-text-muted:     #6b7a8d;
    --cvx-label:          #3a4555;

    --cvx-surface:        #ffffff;
    --cvx-surface-border: #e2e8f0;
    --cvx-bg-subtle:      #f2f4f7;

    --cvx-input-bg:       #ffffff;
    --cvx-input-border:   #ccd5df;
    --cvx-input-text:     #1e2530;

    --cvx-icon-brand:     #4a7ab5;

    --cvx-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --cvx-shadow-md:      0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
    --cvx-navbar-bg:      #1a2030;
    --cvx-navbar-text:    #8da5be;
    --cvx-navbar-hover:   rgba(74, 122, 181, 0.18);
    --cvx-navbar-active:  #ffffff;
    --cvx-brand-text:     #ffffff;

    --cvx-primary:           #4a7ab5;
    --cvx-primary-hover:     #6b9fd4;
    --cvx-secondary:         #4a9a86;
    --cvx-secondary-hover:   #5db8a0;
    --cvx-tertiary:          #c99a4a;
    --cvx-tertiary-hover:    #ddb05a;
    --cvx-quaternary:        #d4735e;
    --cvx-quaternary-hover:  #e08572;
    --cvx-quinary:           #c97f50;
    --cvx-quinary-hover:     #dc9464;

    /* Sobrescrita de variáveis do Bootstrap */
    --bs-primary:               #4a7ab5;
    --bs-primary-rgb:           74, 122, 181;
    --bs-secondary:             #8da5be;
    --bs-secondary-rgb:         141, 165, 190;
    --bs-link-color:            #6b9fd4;
    --bs-link-hover-color:      #8ab8e0;
    --bs-focus-ring-color:      rgba(74, 122, 181, .25);
    --bs-btn-active-bg:         #3d6899;
    --bs-btn-active-border-color: #375e8a;
    --bs-form-check-input-checked-bg-color: #4a7ab5;
    --bs-form-check-input-checked-border-color: #4a7ab5;

    /* Bootstrap body/surface tokens — essenciais para componentes que usam var(--bs-*) internamente */
    --bs-body-color:            #dce5f0;
    --bs-body-color-rgb:        220, 229, 240;
    --bs-body-bg:               #151e2d;
    --bs-body-bg-rgb:           21, 30, 45;
    --bs-secondary-color:       #8da5be;
    --bs-secondary-color-rgb:   141, 165, 190;
    --bs-secondary-bg:          #243044;
    --bs-secondary-bg-rgb:      36, 48, 68;
    --bs-tertiary-color:        #8da5be;
    --bs-tertiary-bg:           #1e2a3e;
    --bs-emphasis-color:        #dce5f0;
    --bs-emphasis-color-rgb:    220, 229, 240;
    --bs-border-color:          #2a3648;
    --bs-border-color-translucent: rgba(220, 229, 240, .175);
    --bs-heading-color:         #dce5f0;
    --bs-card-bg:               #1e2a3e;
    --bs-card-border-color:     #2a3648;
    --bs-card-color:            #dce5f0;
    --bs-list-group-bg:         #1e2a3e;
    --bs-list-group-color:      #dce5f0;
    --bs-list-group-border-color: #2a3648;

    --cvx-bg:             #151e2d;
    --cvx-border:         #2a3648;

    --cvx-text:           #dce5f0;
    --cvx-text-muted:     #8da5be;
    --cvx-label:          #c4d4e6;

    --cvx-surface:        #1e2a3e;
    --cvx-surface-border: #2a3648;
    --cvx-bg-subtle:      #243044;

    --cvx-input-bg:       #243044;
    --cvx-input-border:   #344d6a;
    --cvx-input-text:     #dce5f0;

    --cvx-icon-brand:     #6b9fd4;

    --cvx-shadow:         0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --cvx-shadow-md:      0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
}

/* ============================================================
   Painel Admin — Tema (Roxo Profissional)
   ============================================================ */

/* Painel Admin — Opção 2: Slate Azulado */

[data-context="panel"][data-theme="light"],
[data-context="panel"] {
    --cvx-navbar-bg:      #1e293b;
    --cvx-navbar-text:    #94a3b8;
    --cvx-navbar-hover:   rgba(71, 85, 105, 0.22);
    --cvx-navbar-active:  #ffffff;
    --cvx-brand-text:     #ffffff;

    --cvx-primary:        #4f46e5;
    --cvx-primary-hover:  #6366f1;
    --cvx-secondary:      #3a7a6a;
    --cvx-secondary-hover:#4a9a86;

    --cvx-bg:             #f1f5f9;
    --cvx-border:         #cbd5e1;

    --cvx-text:           #0f172a;
    --cvx-text-muted:     #64748b;
    --cvx-label:          #334155;

    --cvx-surface:        #ffffff;
    --cvx-surface-border: #e2e8f0;

    --cvx-input-bg:       #ffffff;
    --cvx-input-border:   #cbd5e1;
    --cvx-input-text:     #0f172a;

    --cvx-icon-brand:     #94a3b8;

    --cvx-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --cvx-shadow-md:      0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);

    --bs-primary:               #4f46e5;
    --bs-primary-rgb:           79, 70, 229;
    --bs-form-check-input-checked-bg-color: #4f46e5;
    --bs-form-check-input-checked-border-color: #4f46e5;
}

[data-context="panel"][data-theme="dark"] {
    --cvx-navbar-bg:      #1a2333;
    --cvx-navbar-text:    #94a3b8;
    --cvx-navbar-hover:   rgba(71, 85, 105, 0.20);
    --cvx-navbar-active:  #ffffff;
    --cvx-brand-text:     #ffffff;

    --cvx-primary:        #6366f1;
    --cvx-primary-hover:  #818cf8;
    --cvx-secondary:      #4a9a86;
    --cvx-secondary-hover:#5db8a0;

    --cvx-bg:             #151f2e;
    --cvx-border:         #2a3850;

    --cvx-text:           #e2e8f0;
    --cvx-text-muted:     #94a3b8;
    --cvx-label:          #cbd5e1;

    --cvx-surface:        #1e2d42;
    --cvx-surface-border: #2a3850;

    --cvx-input-bg:       #243348;
    --cvx-input-border:   #364d68;
    --cvx-input-text:     #e2e8f0;

    --cvx-icon-brand:     #94a3b8;

    --cvx-shadow:         0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
    --cvx-shadow-md:      0 4px 6px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.15);

    --bs-primary:               #6366f1;
    --bs-primary-rgb:           99, 102, 241;
    --bs-form-check-input-checked-bg-color: #6366f1;
    --bs-form-check-input-checked-border-color: #6366f1;
}

/* ============================================================
   Base
   ============================================================ */

body {
    background: var(--cvx-bg);
    color: var(--cvx-text);
    transition: background .2s, color .2s;
    font-size: .9375rem;
}

/* ============================================================
   Navbar
   ============================================================ */

.cvx-navbar {
    background: var(--cvx-navbar-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: var(--cvx-shadow-md);
    min-height: 58px;
    transition: background .2s;
}

.cvx-navbar .navbar-brand {
    color: var(--cvx-brand-text) !important;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.cvx-nav-link {
    color: var(--cvx-navbar-text) !important;
    border-radius: .375rem;
    padding: .4rem .75rem !important;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}

.cvx-nav-link:hover,
.cvx-nav-link.active {
    color: var(--cvx-navbar-active) !important;
    background: var(--cvx-navbar-hover);
}

.cvx-nav-toggler { color: var(--cvx-navbar-text); }

/* ============================================================
   Offcanvas (menu mobile)
   ============================================================ */

.cvx-offcanvas {
    background: var(--cvx-navbar-bg) !important;
    width: 260px !important;
}

.cvx-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 1rem 1.25rem;
}

.cvx-offcanvas-link {
    color: var(--cvx-navbar-text) !important;
    border-radius: .375rem;
    padding: .5rem .75rem !important;
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}

.cvx-offcanvas-link:hover {
    color: #fff !important;
    background: var(--cvx-navbar-hover);
}

/* ============================================================
   Main content
   ============================================================ */

.cvx-main {
    background: var(--cvx-bg);
    min-height: calc(100vh - 58px);
    transition: background .2s;
}

/* ============================================================
   Cards
   ============================================================ */

.card {
    background: var(--cvx-surface) !important;
    border: 1px solid var(--cvx-surface-border) !important;
    box-shadow: var(--cvx-shadow);
    border-radius: .75rem !important;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.card:hover { box-shadow: var(--cvx-shadow-md); }

.card .text-muted   { color: var(--cvx-text-muted) !important; }
.card .fw-bold      { color: var(--cvx-text); }
.card .fw-medium    { color: var(--cvx-text); }
.card .fw-semibold  { color: var(--cvx-text); }

.cvx-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ============================================================
   Tipografia e textos
   ============================================================ */

h1, h2, h3, h4, h5, h6 { color: var(--cvx-text); }
.form-label       { color: var(--cvx-label); font-weight: 500; font-size: .875rem; }
.form-check-label { color: var(--cvx-text); }
.text-muted       { color: var(--cvx-text-muted) !important; }
.cvx-brand-icon { color: var(--cvx-icon-brand); }

/* ============================================================
   Formulários
   ============================================================ */

.form-control {
    background: var(--cvx-input-bg);
    border-color: var(--cvx-input-border);
    color: var(--cvx-input-text);
    border-radius: .5rem;
    padding: .5rem .875rem;
    transition: background .2s, border-color .15s, color .2s;
}

.form-control:focus {
    background: var(--cvx-input-bg);
    border-color: var(--cvx-primary);
    color: var(--cvx-input-text);
    box-shadow: 0 0 0 .2rem rgba(74, 122, 181, .2);
}

.form-control::placeholder { color: var(--cvx-text-muted); opacity: .7; }

.form-control:disabled,
select:disabled {
    background-color: var(--cvx-bg) !important;
    border-color: var(--cvx-border) !important;
    color: var(--cvx-text-muted) !important;
    opacity: .6;
    cursor: not-allowed;
}

.form-control[readonly] {
    background-color: var(--cvx-bg) !important;
    border-color: var(--cvx-border) !important;
    color: var(--cvx-text-muted) !important;
    cursor: default;
}

.form-select {
    background-color: var(--cvx-input-bg);
    border-color: var(--cvx-input-border);
    color: var(--cvx-input-text);
    border-radius: .5rem;
    padding: .5rem .875rem;
    transition: background .2s, border-color .15s, color .2s;
}

.form-select:focus {
    background-color: var(--cvx-input-bg);
    border-color: var(--cvx-primary);
    color: var(--cvx-input-text);
    box-shadow: 0 0 0 .2rem rgba(74, 122, 181, .2);
}

.form-select:disabled {
    background-color: var(--cvx-bg) !important;
    border-color: var(--cvx-border) !important;
    color: var(--cvx-text-muted) !important;
    opacity: .6;
    cursor: not-allowed;
}

/* ============================================================
   Botões
   ============================================================ */

.btn-primary {
    --bs-btn-bg:                  var(--cvx-primary);
    --bs-btn-border-color:        var(--cvx-primary);
    --bs-btn-hover-bg:            var(--cvx-primary-hover);
    --bs-btn-hover-border-color:  var(--cvx-primary-hover);
    --bs-btn-active-bg:           var(--cvx-primary-hover);
    --bs-btn-active-border-color: var(--cvx-primary-hover);
    --bs-btn-disabled-bg:         var(--cvx-primary);
    --bs-btn-disabled-border-color: var(--cvx-primary);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-focus-shadow-rgb:    var(--bs-primary-rgb);
    background: var(--cvx-primary);
    border-color: var(--cvx-primary);
    border-radius: .5rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus {
    background: var(--cvx-primary-hover) !important;
    border-color: var(--cvx-primary-hover) !important;
    color: #fff !important;
}

/* Botão secundário — ações de menor prioridade */
.btn-cvx-secondary {
    --bs-btn-bg:                    var(--cvx-secondary);
    --bs-btn-border-color:          var(--cvx-secondary);
    --bs-btn-hover-bg:              var(--cvx-secondary-hover);
    --bs-btn-hover-border-color:    var(--cvx-secondary-hover);
    --bs-btn-active-bg:             var(--cvx-secondary-hover);
    --bs-btn-disabled-bg:           var(--cvx-secondary);
    --bs-btn-disabled-border-color: var(--cvx-secondary);
    --bs-btn-disabled-color:        #fff;
    background: var(--cvx-secondary);
    border-color: var(--cvx-secondary);
    border-radius: .5rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    color: #fff;
    transition: background .15s, border-color .15s;
}

.btn-cvx-secondary:hover,
.btn-cvx-secondary:focus,
.btn-cvx-secondary:active,
.btn-cvx-secondary.active,
.btn-cvx-secondary:active:focus {
    background: var(--cvx-secondary-hover) !important;
    border-color: var(--cvx-secondary-hover) !important;
    color: #fff !important;
}

/* Botão neutro — usado em Cancelar, Voltar e ações sem impacto */
.btn-cvx-neutral {
    --bs-btn-disabled-bg:           #6b7280;
    --bs-btn-disabled-border-color: #6b7280;
    --bs-btn-disabled-color:        #fff;
    background: #6b7280;
    border-color: #6b7280;
    border-radius: .5rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    color: #fff;
    transition: background .15s, border-color .15s;
}

.btn-cvx-neutral:hover,
.btn-cvx-neutral:focus,
.btn-cvx-neutral:active,
.btn-cvx-neutral.active,
.btn-cvx-neutral:active:focus {
    background: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #fff !important;
}

/* Botão terciário — âmbar */
.btn-cvx-tertiary {
    --bs-btn-bg:                    var(--cvx-tertiary);
    --bs-btn-border-color:          var(--cvx-tertiary);
    --bs-btn-hover-bg:              var(--cvx-tertiary-hover);
    --bs-btn-hover-border-color:    var(--cvx-tertiary-hover);
    --bs-btn-active-bg:             var(--cvx-tertiary-hover);
    --bs-btn-disabled-bg:           var(--cvx-tertiary);
    --bs-btn-disabled-border-color: var(--cvx-tertiary);
    --bs-btn-disabled-color:        #fff;
    background: var(--cvx-tertiary);
    border-color: var(--cvx-tertiary);
    border-radius: .5rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    color: #fff;
    transition: background .15s, border-color .15s;
}

.btn-cvx-tertiary:hover,
.btn-cvx-tertiary:focus,
.btn-cvx-tertiary:active,
.btn-cvx-tertiary.active,
.btn-cvx-tertiary:active:focus {
    background: var(--cvx-tertiary-hover) !important;
    border-color: var(--cvx-tertiary-hover) !important;
    color: #fff !important;
}

/* Botão quaternário — coral suave */
.btn-cvx-quaternary {
    --bs-btn-bg:                    var(--cvx-quaternary);
    --bs-btn-border-color:          var(--cvx-quaternary);
    --bs-btn-hover-bg:              var(--cvx-quaternary-hover);
    --bs-btn-hover-border-color:    var(--cvx-quaternary-hover);
    --bs-btn-active-bg:             var(--cvx-quaternary-hover);
    --bs-btn-disabled-bg:           var(--cvx-quaternary);
    --bs-btn-disabled-border-color: var(--cvx-quaternary);
    --bs-btn-disabled-color:        #fff;
    background: var(--cvx-quaternary);
    border-color: var(--cvx-quaternary);
    border-radius: .5rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    color: #fff;
    transition: background .15s, border-color .15s;
}

.btn-cvx-quaternary:hover,
.btn-cvx-quaternary:focus,
.btn-cvx-quaternary:active,
.btn-cvx-quaternary.active,
.btn-cvx-quaternary:active:focus {
    background: var(--cvx-quaternary-hover) !important;
    border-color: var(--cvx-quaternary-hover) !important;
    color: #fff !important;
}

/* Botão quinário — laranja acinzentado */
.btn-cvx-quinary {
    --bs-btn-bg:                    var(--cvx-quinary);
    --bs-btn-border-color:          var(--cvx-quinary);
    --bs-btn-hover-bg:              var(--cvx-quinary-hover);
    --bs-btn-hover-border-color:    var(--cvx-quinary-hover);
    --bs-btn-active-bg:             var(--cvx-quinary-hover);
    --bs-btn-disabled-bg:           var(--cvx-quinary);
    --bs-btn-disabled-border-color: var(--cvx-quinary);
    --bs-btn-disabled-color:        #fff;
    background: var(--cvx-quinary);
    border-color: var(--cvx-quinary);
    border-radius: .5rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    color: #fff;
    transition: background .15s, border-color .15s;
}

.btn-cvx-quinary:hover,
.btn-cvx-quinary:focus,
.btn-cvx-quinary:active,
.btn-cvx-quinary.active,
.btn-cvx-quinary:active:focus {
    background: var(--cvx-quinary-hover) !important;
    border-color: var(--cvx-quinary-hover) !important;
    color: #fff !important;
}

/* Theme toggle */
.btn-theme-toggle {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--cvx-navbar-text);
    border-radius: .375rem;
    padding: .3rem .55rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}

.btn-theme-toggle:hover {
    background: rgba(255,255,255,.14);
    color: #fff;
}

/* Remove seta padrão dos dropdowns */
.dropdown-toggle::after,
.dropdown-toggle::before { display: none !important; }

/* Botão redondo de opções */
.cvx-btn-options {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--cvx-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.cvx-btn-options:hover {
    background: var(--cvx-border);
    color: var(--cvx-text);
}

/* Dropdown */
.cvx-dropdown {
    background: var(--cvx-surface);
    border: 1px solid var(--cvx-surface-border);
    box-shadow: var(--cvx-shadow-md);
    border-radius: .5rem;
    padding: .35rem;
    min-width: 180px;
}

.cvx-dropdown-item {
    color: var(--cvx-text);
    border-radius: .375rem;
    padding: .45rem .75rem;
    font-size: .875rem;
    transition: background .15s, color .15s;
}

.cvx-dropdown-item:hover {
    background: var(--cvx-navbar-hover);
    color: var(--cvx-text);
}

/* Context switcher */
.cvx-context-switcher {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    color: var(--cvx-navbar-text);
    font-size: .8rem;
    padding: .3rem .65rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: background .15s, color .15s;
}
.cvx-context-switcher:hover,
.cvx-context-switcher.show { background: rgba(255,255,255,.18); color: #fff; }
.cvx-context-switcher::after { margin-left: .3rem; }

/* Context picker card */
.cvx-context-card {
    background: var(--cvx-card-bg);
    border: 1px solid var(--cvx-border) !important;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.cvx-context-card:hover { border-color: var(--cvx-primary) !important; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.cvx-context-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--cvx-input-bg);
    color: var(--cvx-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* User badge */
.cvx-user-badge {
    color: var(--cvx-navbar-text);
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Botão olho e ícones de input-group — toggle, busca CEP, etc. */
.cvx-eye-btn,
button.cvx-eye-btn,
.input-group button.cvx-eye-btn {
    background: var(--cvx-input-bg) !important;
    border-color: var(--cvx-input-border) !important;
    color: var(--cvx-text-muted) !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
    transition: color .15s, background .2s, border-color .2s;
    min-width: 45.33px;
}

.cvx-eye-btn:hover,
button.cvx-eye-btn:hover,
.input-group button.cvx-eye-btn:hover {
    background: var(--cvx-bg) !important;
    border-color: var(--cvx-input-border) !important;
    color: var(--cvx-text) !important;
}

.cvx-eye-btn:focus,
.cvx-eye-btn:active,
button.cvx-eye-btn:focus,
button.cvx-eye-btn:active {
    background: var(--cvx-input-bg) !important;
    border-color: var(--cvx-input-border) !important;
    color: var(--cvx-text-muted) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Botão "?" de dica */
.cvx-hint-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--cvx-text-muted);
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    transition: color .15s;
}

.cvx-hint-btn:hover { color: var(--cvx-primary); }

/* Medidor de força de senha */
.cvx-strength-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--cvx-border);
    transition: background .3s;
}

.cvx-strength-label {
    font-size: .75rem;
    font-weight: 500;
}

.cvx-password-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.cvx-password-rules li {
    font-size: .775rem;
    color: var(--cvx-text-muted);
    transition: color .2s;
}

.cvx-password-rules li.valid {
    color: #3a9a72;
}

.cvx-password-rules li.valid i {
    color: #3a9a72;
}

/* Link sutil — usado em ações secundárias como "esqueceu a senha" */
.cvx-link-muted {
    color: var(--cvx-text-muted);
    text-decoration: none;
    font-size: .8125rem;
    transition: color .15s;
}

.cvx-link-muted:hover { color: var(--cvx-primary); }

/* Link com destaque — usado em ações como "Entrar", "Cadastrar-se" */
.cvx-link {
    color: var(--cvx-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    font-size: .8125rem;
    font-weight: 500;
    transition: color .15s, text-decoration-color .15s;
}

.cvx-link:hover {
    color: var(--cvx-primary-hover);
    text-decoration-color: var(--cvx-primary-hover);
}

/* Botão outline secundário — segue o tema */
.btn-cvx-outline {
    background: transparent;
    border: 1px solid var(--cvx-primary);
    color: var(--cvx-primary);
    border-radius: .5rem;
    font-weight: 500;
    padding: .5rem 1.25rem;
    transition: background .15s, color .15s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-cvx-outline:hover {
    background: var(--cvx-primary);
    color: #fff;
}

/* Flatpickr — integração com o tema */
.flatpickr-calendar {
    background: var(--cvx-surface) !important;
    border: 1px solid var(--cvx-border) !important;
    box-shadow: var(--cvx-shadow-md) !important;
    border-radius: .5rem !important;
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-month               { background: var(--cvx-surface) !important; color: var(--cvx-text) !important; }
.flatpickr-current-month,
.flatpickr-monthDropdown-months{ color: var(--cvx-text) !important; }
.flatpickr-weekday             { color: var(--cvx-text-muted) !important; }
.flatpickr-day                 { color: var(--cvx-text) !important; border-radius: .375rem !important; }
.flatpickr-day:hover           { background: var(--cvx-bg) !important; border-color: var(--cvx-border) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover  { background: var(--cvx-primary) !important; border-color: var(--cvx-primary) !important; color: #fff !important; }
.flatpickr-day.today           { border-color: var(--cvx-primary) !important; }
.flatpickr-day.today:hover     { background: var(--cvx-primary) !important; color: #fff !important; }
.flatpickr-day.flatpickr-disabled { color: var(--cvx-text-muted) !important; opacity: .4; }
.numInputWrapper:hover,
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover  { background: var(--cvx-bg) !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg    { fill: var(--cvx-text-muted) !important; }
.flatpickr-monthDropdown-months                { background: var(--cvx-surface) !important; color: var(--cvx-text) !important; border: none !important; }
.flatpickr-monthDropdown-months option         { background: var(--cvx-surface) !important; color: var(--cvx-text) !important; }
.numInput                                      { background: transparent !important; color: var(--cvx-text) !important; border: none !important; }

/* Badges */
.cvx-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.cvx-badge-success {
    background: rgba(58, 154, 114, .15);
    color: #2d8a63;
    border: 1px solid rgba(58, 154, 114, .25);
}

.cvx-badge-danger {
    background: rgba(220, 53, 69, .12);
    color: #c0392b;
    border: 1px solid rgba(220, 53, 69, .22);
}

.cvx-badge-primary {
    background: rgba(62, 95, 138, .12);
    color: var(--cvx-primary);
    border: 1px solid rgba(62, 95, 138, .22);
}

.cvx-badge-teal {
    background: rgba(58, 122, 106, .12);
    color: #2e7d6a;
    border: 1px solid rgba(58, 122, 106, .22);
}

.cvx-badge-warning {
    background: rgba(234, 179, 8, .12);
    color: #92680a;
    border: 1px solid rgba(234, 179, 8, .28);
}

.cvx-badge-neutral {
    background: rgba(107, 122, 141, .12);
    color: #6b7a8d;
    border: 1px solid rgba(107, 122, 141, .22);
}

.cvx-badge-secondary {
    background: rgba(108, 117, 125, .10);
    color: #495057;
    border: 1px solid rgba(108, 117, 125, .20);
}

.cvx-badge-info {
    background: rgba(13, 202, 240, .12);
    color: #0a9bba;
    border: 1px solid rgba(13, 202, 240, .25);
}

[data-theme="dark"] .cvx-badge-success {
    background: rgba(58, 154, 114, .18);
    color: #5dba95;
    border-color: rgba(58, 154, 114, .3);
}

[data-theme="dark"] .cvx-badge-danger {
    background: rgba(220, 53, 69, .18);
    color: #e87070;
    border-color: rgba(220, 53, 69, .3);
}

[data-theme="dark"] .cvx-badge-primary {
    background: rgba(74, 122, 181, .18);
    color: #7aaddf;
    border-color: rgba(74, 122, 181, .3);
}

[data-theme="dark"] .cvx-badge-teal {
    background: rgba(74, 154, 134, .18);
    color: #5dbaa0;
    border-color: rgba(74, 154, 134, .3);
}

[data-theme="dark"] .cvx-badge-warning {
    background: rgba(234, 179, 8, .18);
    color: #f0c040;
    border-color: rgba(234, 179, 8, .3);
}

[data-theme="dark"] .cvx-badge-neutral {
    background: rgba(107, 122, 141, .18);
    color: #8da5be;
    border-color: rgba(107, 122, 141, .3);
}

[data-theme="dark"] .cvx-badge-secondary {
    background: rgba(108, 117, 125, .18);
    color: #adb5bd;
    border-color: rgba(108, 117, 125, .3);
}

[data-theme="dark"] .cvx-badge-info {
    background: rgba(13, 202, 240, .15);
    color: #22d3ee;
    border-color: rgba(13, 202, 240, .3);
}

/* Badge com largura mínima — status e etapa de tarefas */
.cvx-badge-fw {
    min-width: 125px;
    justify-content: center;
}

/* Radio switch — principal nas listagens */
.cvx-radio-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 2.5rem !important;
    height: 1.25rem !important;
    border-radius: 99px;
    border: none !important;
    background-color: #9ca3af !important;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    display: block;
    margin: 0;
    vertical-align: middle;
    transition: background-color .2s;
}

.cvx-radio-switch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: calc(1.25rem - 5px);
    height: calc(1.25rem - 5px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-50%);
    transition: transform .2s;
}

.cvx-radio-switch:checked {
    background-color: #3a9a72 !important;
}

.cvx-radio-switch:checked::after {
    transform: translateY(-50%) translateX(1.2rem);
}

[data-theme="dark"] .cvx-radio-switch:not(:checked) {
    background-color: #4b5563 !important;
}

.cvx-radio-switch:focus,
.cvx-radio-switch:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Toggle de status */
.cvx-status-toggle {
    width: 2.5rem !important;
    height: 1.25rem !important;
    cursor: pointer;
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    transition: background-color .2s, border-color .2s;
}

[data-theme="dark"] .cvx-status-toggle {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

.cvx-status-toggle:checked,
.cvx-status-toggle:checked:focus,
.cvx-status-toggle:checked:focus-visible {
    background-color: #3a9a72 !important;
    border-color: #3a9a72 !important;
}

.cvx-status-toggle:not(:checked),
.cvx-status-toggle:not(:checked):focus,
.cvx-status-toggle:not(:checked):focus-visible {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C0.85%29'/%3e%3c/svg%3e");
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
}

[data-theme="dark"] .cvx-status-toggle:not(:checked),
[data-theme="dark"] .cvx-status-toggle:not(:checked):focus,
[data-theme="dark"] .cvx-status-toggle:not(:checked):focus-visible {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C0.85%29'/%3e%3c/svg%3e");
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

.cvx-status-toggle:focus,
.cvx-status-toggle:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* Permite que dropdowns dentro de tabelas sobreponham o conteúdo */
.table-responsive { overflow: visible !important; }

/* Tabelas */
.cvx-table-header th {
    background: var(--cvx-surface);
    color: var(--cvx-text-muted);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--cvx-border);
}


.table td, .table th                    { border-color: var(--cvx-surface-border); color: var(--cvx-text); background: transparent; }
.table tbody tr:last-child td                        { border-bottom: none; }
.table-hover tbody tr:hover td                       { background: var(--cvx-navbar-hover) !important; }
.table-hover tbody tr.no-hover:hover td {
    --bs-table-bg-state:    transparent !important;
    --bs-table-color-state: var(--cvx-text-muted) !important;
    background:             var(--cvx-surface) !important;
    cursor:                 default;
}

/* List group */
.list-group-item {
    background: var(--cvx-surface);
    border-color: var(--cvx-surface-border);
    color: var(--cvx-text);
}

/* Sino de notificações */
.cvx-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--cvx-navbar-text);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.cvx-bell-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

.cvx-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #e53e3e;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--cvx-navbar-bg);
}

/* Notificações */
.cvx-notification-unread { background: var(--cvx-primary) !important; background: rgba(62, 95, 138, .06) !important; }

.cvx-notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cvx-primary);
    display: inline-block;
    flex-shrink: 0;
    margin-top: 4px;
}

.cvx-notification-dot--read { background: var(--cvx-border); }

.form-check-input[role="switch"] { cursor: pointer; }
.cvx-mark-read { cursor: pointer; }

/* Breadcrumb */
.cvx-breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .8125rem;
    margin-bottom: .25rem;
}

.cvx-breadcrumb a,
.cvx-breadcrumb a:link,
.cvx-breadcrumb a:visited {
    color: var(--cvx-text-muted) !important;
    text-decoration: none !important;
    transition: color .15s;
}

.cvx-breadcrumb a:hover { color: var(--cvx-primary) !important; }

.cvx-breadcrumb .separator {
    color: var(--cvx-text-muted);
    opacity: .5;
}

.cvx-breadcrumb .current { color: var(--cvx-text-muted); }

/* Login card */
.cvx-login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 1rem !important;
}

/* ============================================================
   EasyMDE — Dark mode
   ============================================================ */

[data-theme="dark"] .EasyMDEContainer .CodeMirror {
    background:   var(--cvx-input-bg);
    color:        var(--cvx-input-text);
    border-color: var(--cvx-input-border);
}

[data-theme="dark"] .EasyMDEContainer .CodeMirror-scroll {
    background: var(--cvx-input-bg);
}

[data-theme="dark"] .EasyMDEContainer .editor-toolbar {
    background:   var(--cvx-bg-subtle);
    border-color: var(--cvx-input-border);
}

[data-theme="dark"] .EasyMDEContainer .editor-toolbar button {
    color: var(--cvx-text-muted);
}

[data-theme="dark"] .EasyMDEContainer .editor-toolbar button:hover,
[data-theme="dark"] .EasyMDEContainer .editor-toolbar button.active {
    background:   var(--cvx-border);
    border-color: var(--cvx-input-border);
    color:        var(--cvx-text);
}

[data-theme="dark"] .EasyMDEContainer .editor-toolbar i.separator {
    border-color: var(--cvx-border);
}

[data-theme="dark"] .EasyMDEContainer .editor-preview,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side {
    background:   var(--cvx-surface);
    color:        var(--cvx-text);
    border-color: var(--cvx-border);
}

/* Blocos de código no preview */
[data-theme="dark"] .EasyMDEContainer .editor-preview pre,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side pre {
    background:   var(--cvx-bg-subtle) !important;
    border:       1px solid var(--cvx-border);
    border-radius: .4rem;
    color:        var(--cvx-text);
}

[data-theme="dark"] .EasyMDEContainer .editor-preview pre code,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side pre code {
    background:   transparent !important;
    color:        var(--cvx-text);
    border:       none;
}

/* Código inline no preview */
[data-theme="dark"] .EasyMDEContainer .editor-preview code,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side code {
    background:   var(--cvx-bg-subtle) !important;
    color:        var(--cvx-text);
    border:       1px solid var(--cvx-border);
    border-radius: .25rem;
    padding:      .1em .35em;
}

/* Blockquote no preview */
[data-theme="dark"] .EasyMDEContainer .editor-preview blockquote,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side blockquote {
    border-left-color: var(--cvx-border);
    color:             var(--cvx-text-muted);
}

/* Headings, parágrafos e links no preview */
[data-theme="dark"] .EasyMDEContainer .editor-preview p,
[data-theme="dark"] .EasyMDEContainer .editor-preview h1,
[data-theme="dark"] .EasyMDEContainer .editor-preview h2,
[data-theme="dark"] .EasyMDEContainer .editor-preview h3,
[data-theme="dark"] .EasyMDEContainer .editor-preview h4,
[data-theme="dark"] .EasyMDEContainer .editor-preview h5,
[data-theme="dark"] .EasyMDEContainer .editor-preview h6,
[data-theme="dark"] .EasyMDEContainer .editor-preview li,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side p,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side h1,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side h2,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side h3,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side h4,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side h5,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side h6,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side li {
    color: var(--cvx-text);
}

[data-theme="dark"] .EasyMDEContainer .editor-preview a,
[data-theme="dark"] .EasyMDEContainer .editor-preview-side a {
    color: var(--cvx-primary);
}

/* Modo fullscreen */
[data-theme="dark"] .EasyMDEContainer.fullscreen .CodeMirror,
[data-theme="dark"] .EasyMDEContainer.fullscreen .editor-preview,
[data-theme="dark"] .EasyMDEContainer.fullscreen .editor-preview-side {
    background: var(--cvx-surface);
    color:      var(--cvx-text);
}

[data-theme="dark"] .EasyMDEContainer.fullscreen .editor-toolbar {
    background:   var(--cvx-bg-subtle);
    border-color: var(--cvx-input-border);
}

[data-theme="dark"] .EasyMDEContainer .editor-statusbar {
    color: var(--cvx-text-muted);
}

[data-theme="dark"] .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--cvx-text);
}

[data-theme="dark"] .EasyMDEContainer .CodeMirror-selected,
[data-theme="dark"] .EasyMDEContainer .CodeMirror.CodeMirror-focused .CodeMirror-selected {
    background: rgba(74, 122, 181, 0.3);
}

[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-header {
    color: var(--cvx-text);
}

[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-link,
[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-url {
    color: var(--cvx-primary);
}

[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-quote {
    color: var(--cvx-text-muted);
}

[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-strong {
    color: var(--cvx-text);
}

[data-theme="dark"] .EasyMDEContainer .cm-s-easymde .cm-em {
    color: var(--cvx-text);
}

/* ============================================================
   Markdown body — conteúdo renderizado pelo league/commonmark
   ============================================================ */

.cvx-markdown-body {
    color:       var(--cvx-text);
    line-height: 1.7;
    word-break:  break-word;
}

.cvx-markdown-body p,
.cvx-markdown-body li,
.cvx-markdown-body td,
.cvx-markdown-body th {
    color: var(--cvx-text);
}

.cvx-markdown-body h1,
.cvx-markdown-body h2,
.cvx-markdown-body h3,
.cvx-markdown-body h4,
.cvx-markdown-body h5,
.cvx-markdown-body h6 {
    color:         var(--cvx-text);
    margin-top:    1rem;
    margin-bottom: .4rem;
    font-weight:   600;
}

.cvx-markdown-body a {
    color:           var(--cvx-primary);
    text-decoration: underline;
}

.cvx-markdown-body a:hover {
    color: var(--cvx-primary-hover);
}

.cvx-markdown-body code {
    background:    var(--cvx-bg-subtle);
    color:         var(--cvx-text);
    border:        1px solid var(--cvx-border);
    border-radius: .3rem;
    padding:       .1em .35em;
    font-size:     .875em;
}

.cvx-markdown-body pre {
    background:    var(--cvx-bg-subtle);
    border:        1px solid var(--cvx-border);
    border-radius: .5rem;
    padding:       1rem;
    overflow-x:    auto;
}

.cvx-markdown-body pre code {
    background: transparent;
    border:     none;
    padding:    0;
    color:      var(--cvx-text);
}

.cvx-markdown-body blockquote {
    border-left: 3px solid var(--cvx-border);
    padding-left: 1rem;
    margin-left:  0;
    color:        var(--cvx-text-muted);
}

.cvx-markdown-body hr {
    border-color: var(--cvx-border);
}

.cvx-markdown-body table {
    width:         100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.cvx-markdown-body table th,
.cvx-markdown-body table td {
    border:  1px solid var(--cvx-border);
    padding: .4rem .75rem;
    color:   var(--cvx-text);
}

.cvx-markdown-body table thead th {
    background: var(--cvx-bg-subtle);
    font-weight: 600;
}

.cvx-markdown-body ul,
.cvx-markdown-body ol {
    padding-left: 1.5rem;
}

.cvx-markdown-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Dark mode — ajustes de componentes Bootstrap na view de detalhe
   ============================================================ */

/* Modal — fundo e bordas do tema */
[data-theme="dark"] .modal-content  { background: var(--cvx-surface); border-color: var(--cvx-border); color: var(--cvx-text); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer   { border-color: var(--cvx-border); }
[data-theme="dark"] .btn-close      { filter: invert(1) grayscale(100%) brightness(200%); }

/* Progress bar — trilha com contraste visível no dark mode */
[data-theme="dark"] .progress {
    --bs-progress-bg: #304060;
    background-color: #304060;
}

/* Checkbox (form-check-input) — borda visível, fundo escuro */
[data-theme="dark"] .form-check-input {
    background-color: var(--cvx-input-bg);
    border-color:     var(--cvx-input-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--cvx-primary);
    border-color:     var(--cvx-primary);
}

/* hr e border-bottom — linhas divisórias visíveis */
[data-theme="dark"] hr {
    border-color: var(--cvx-border);
    opacity: 1;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--cvx-border) !important;
}

/* Stage buttons — outline visível */
[data-theme="dark"] .btn-cvx-outline {
    border-color: var(--cvx-primary);
    color:        var(--cvx-primary);
}

[data-theme="dark"] .btn-cvx-outline:hover {
    background: var(--cvx-primary);
    color:      #fff;
}

[data-theme="dark"] .btn-cvx-outline:disabled {
    border-color: var(--cvx-border);
    color:        var(--cvx-text-muted);
}

/* Checklist item texto padrão */
[data-theme="dark"] .cvx-checklist-item span {
    color: var(--cvx-text);
}

[data-theme="dark"] .cvx-checklist-item span.text-muted {
    color: var(--cvx-text-muted) !important;
}

/* Timer compacto no strip de informações */
.cvx-interval-timer-mini {
    font-family:    'Courier New', Courier, monospace;
    font-size:      .85rem;
    font-weight:    700;
    letter-spacing: .05em;
    color:          var(--cvx-primary);
    line-height:    1;
}

/* Checklist — cresce livremente */
.cvx-cl-scroll-area {
    padding-right: .25rem;
}

/* Comentários — scroll interno fixo */
.cvx-comments-scroll {
    max-height:      400px;
    overflow-y:      auto;
    padding-right:   .25rem;
    scroll-behavior: smooth;
}

.cvx-comments-scroll::-webkit-scrollbar { width: 4px; }

.cvx-comments-scroll::-webkit-scrollbar-track { background: transparent; }

.cvx-comments-scroll::-webkit-scrollbar-thumb { background: var(--cvx-border); border-radius: 2px; }

/* Mention badge nos comentários */
[data-theme="dark"] .cvx-mention {
    color: var(--cvx-primary);
}

/* Ícone de avatar nos comentários */
[data-theme="dark"] .cvx-comment-avatar .bi {
    color: var(--cvx-text-muted);
}

/* Notification dot */
[data-theme="dark"] .cvx-notification-dot--read {
    background: var(--cvx-border);
}

/* ============================================================
   Checklist — Task detail
   ============================================================ */

/* Grupo */
.cvx-cl-group-header {
    display:         flex;
    align-items:     center;
    gap:             .5rem;
    padding-bottom:  .5rem;
    margin-bottom:   .25rem;
    border-bottom:   1px solid var(--cvx-border);
}

.cvx-cl-group-label {
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--cvx-text-muted);
}

.cvx-cl-group-count {
    font-size:     .68rem;
    color:         var(--cvx-text-muted);
    background:    var(--cvx-bg-subtle);
    border:        1px solid var(--cvx-border);
    border-radius: 2rem;
    padding:       .05rem .45rem;
    white-space:   nowrap;
}

.cvx-cl-group-delete {
    transition:      color .15s;
    background:      none;
    border:          none;
    padding:         0;
    color:           var(--cvx-text-muted);
    font-size:       .75rem;
    line-height:     1;
    margin-left:     auto;
    flex-shrink:     0;
    cursor:          pointer;
}

.cvx-cl-group-delete:hover { color: #dc3545; }

/* Progress mini do grupo */
.cvx-cl-progress {
    height:        3px;
    border-radius: 2px;
    background:    var(--cvx-bg-subtle);
}

.cvx-cl-progress .progress-bar {
    background: var(--cvx-primary);
}

/* Item */
.cvx-cl-items { display: flex; flex-direction: column; gap: .1rem; }

.cvx-cl-item {
    display:         flex;
    align-items:     center;
    gap:             .6rem;
    padding:         .35rem .5rem;
    border-radius:   .4rem;
    transition:      background .12s;
    cursor:          default;
}

.cvx-cl-item:hover { background: var(--cvx-bg); }

.cvx-cl-item:hover .cvx-cl-item-delete { opacity: 1; }

.cvx-cl-item-text {
    flex-grow:   1;
    font-size:   .875rem;
    color:       var(--cvx-text);
    line-height: 1.4;
    min-width:   0;
}

.cvx-cl-item--done .cvx-cl-item-text {
    text-decoration: line-through;
    color:           var(--cvx-text-muted);
}

.cvx-cl-item-delete {
    opacity:     0;
    transition:  opacity .15s, color .15s;
    background:  none;
    border:      none;
    padding:     0;
    color:       var(--cvx-text-muted);
    font-size:   .7rem;
    line-height: 1;
    flex-shrink: 0;
    cursor:      pointer;
}

.cvx-cl-item-delete:hover { color: #dc3545; }

/* Drag handles */
.cvx-cl-drag-handle,
.cvx-cl-item-drag {
    cursor:      grab;
    color:       var(--cvx-text-muted);
    opacity:     .35;
    font-size:   .85rem;
    flex-shrink: 0;
    line-height: 1;
    transition:  opacity .12s;
    user-select: none;
}

.cvx-cl-drag-handle:hover,
.cvx-cl-item-drag:hover,
.cvx-cl-group-header:hover .cvx-cl-drag-handle,
.cvx-cl-item:hover .cvx-cl-item-drag { opacity: .85; }

.cvx-cl-drag-handle:active,
.cvx-cl-item-drag:active { cursor: grabbing; }

/* Ghost ao arrastar */
.cvx-cl-ghost {
    background:    var(--cvx-bg-subtle) !important;
    border-radius: .4rem;
    opacity:       .5;
}

/* Formulário de adicionar item */
.cvx-cl-add-item {
    display:     flex;
    align-items: flex-start;
    gap:         .4rem;
    margin-top:  .4rem;
    padding:     0 .5rem;
    opacity:     .55;
    transition:  opacity .15s;
}
.cvx-cl-add-item textarea {
    max-width:  100%;
    resize:     none;
    overflow:   hidden;
    min-height: calc(1.5em + .25rem + 2px);
    line-height: 1.5;
}

.cvx-cl-add-item:focus-within,
.cvx-cl-group:hover .cvx-cl-add-item { opacity: 1; }

/* Formulário de adicionar grupo */
.cvx-cl-add-group-wrap {
    padding-top:  .75rem;
    margin-top:   .25rem;
    border-top:   1px dashed var(--cvx-border);
}

.cvx-cl-add-group {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    color:       var(--cvx-text-muted);
    font-size:   .85rem;
}

/* ============================================================
   Strip de info — elementos compactos
   ============================================================ */

.cvx-strip-btn {
    font-size:   .75rem;
    height:      24px;
    line-height: 24px;
    padding:     0 .5rem;
}

.cvx-strip-select {
    font-size: .78rem;
    height:    28px;
    padding:   0 1.75rem 0 .5rem;
    width:     auto;
    max-width: 165px;
}

/* Stage pills horizontais e compactas */
.cvx-stage-pill {
    font-size:     .72rem;
    padding:       .2rem .55rem;
    line-height:   1.5;
    border-radius: 2rem;
    white-space:   nowrap;
}

/* ============================================================
   Stage buttons — etapas da tarefa
   ============================================================ */

/* Inativo: hover sutil sem virar todo azul */
.cvx-stage-btn.btn-cvx-outline {
    color:        var(--cvx-text);
    border-color: var(--cvx-border);
}

.cvx-stage-btn.btn-cvx-outline:hover:not(:disabled) {
    background:   var(--cvx-bg-subtle) !important;
    border-color: var(--cvx-primary)   !important;
    color:        var(--cvx-primary)   !important;
}

/* Ativo: hover com tom mais escuro do primário */
.cvx-stage-btn.btn-primary:hover:not(:disabled) {
    background:   var(--cvx-primary-hover) !important;
    border-color: var(--cvx-primary-hover) !important;
    color:        #fff                     !important;
}

/* Desabilitado: sem cursor e sem hover */
.cvx-stage-btn:disabled {
    opacity: .65;
    cursor:  default;
    pointer-events: none;
}

/* ============================================================
   Member chips — tarefa
   ============================================================ */

.cvx-member-chip {
    display:      inline-flex;
    align-items:  center;
    gap:          .3rem;
    background:   var(--cvx-bg-subtle);
    border:       1px solid var(--cvx-border);
    border-radius: 2rem;
    padding:      .25rem .45rem .25rem .65rem;
    font-size:    .78rem;
    line-height:  1;
}

.cvx-member-chip-name {
    font-weight: 600;
    color:       var(--cvx-text);
    white-space: nowrap;
}

.cvx-member-chip-role {
    font-size:   .65rem;
    color:       var(--cvx-text-muted);
    white-space: nowrap;
}

.cvx-member-chip-remove {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    width:        16px;
    height:       16px;
    background:   var(--cvx-border);
    border:       none;
    border-radius: 50%;
    padding:      0;
    font-size:    .65rem;
    color:        var(--cvx-text-muted);
    cursor:       pointer;
    flex-shrink:  0;
    transition:   background .15s, color .15s;
    line-height:  1;
}

.cvx-member-chip-remove:hover {
    background: #dc3545;
    color:      #fff;
}

/* Status pills — estado padrão neutro, igual etapas */
.cvx-status-pill.btn-cvx-outline {
    color:        var(--cvx-text);
    border-color: var(--cvx-border);
}

/* Status pills — hover e ativo na cor terciária (âmbar) */
.cvx-status-pill.btn-cvx-outline:hover:not(:disabled) {
    background:   var(--cvx-bg-subtle)     !important;
    border-color: var(--cvx-tertiary)      !important;
    color:        var(--cvx-tertiary)      !important;
}

.cvx-status-pill.btn-cvx-tertiary:hover:not(:disabled) {
    background:   var(--cvx-tertiary-hover) !important;
    border-color: var(--cvx-tertiary-hover) !important;
    color:        #fff                      !important;
}

/* ============================================================
   Paginação
   ============================================================ */

.pagination {
    gap: .15rem;
    margin-bottom: 0;
}

.page-link {
    background:    var(--cvx-surface);
    border:        1px solid var(--cvx-surface-border);
    color:         var(--cvx-text-muted);
    border-radius: .4rem !important;
    padding:       .3rem .6rem;
    font-size:     .8rem;
    line-height:   1.4;
    transition:    background .15s, color .15s, border-color .15s;
    min-width:     2rem;
    text-align:    center;
}

.page-link:hover {
    background:   var(--cvx-navbar-hover);
    border-color: var(--cvx-primary);
    color:        var(--cvx-primary);
}

.page-item.active .page-link {
    background:   var(--cvx-primary);
    border-color: var(--cvx-primary);
    color:        #fff;
}

.page-item.disabled .page-link {
    background:   var(--cvx-surface);
    border-color: var(--cvx-surface-border);
    color:        var(--cvx-surface-border);
    pointer-events: none;
}

/* ── Member popover picker ─────────────────────────────────── */
.cvx-mention-picker {
    position:      absolute;
    z-index:       1000;
    background:    var(--cvx-surface);
    border:        1px solid var(--cvx-surface-border);
    border-radius: .5rem;
    box-shadow:    0 4px 16px rgba(0,0,0,.15);
    min-width:     170px;
    max-height:    220px;
    overflow-y:    auto;
    padding:       .25rem 0;
}
.cvx-mention-item {
    padding:    .4rem .75rem;
    cursor:     pointer;
    font-size:  .875rem;
    color:      var(--cvx-text);
    transition: background .12s;
}
.cvx-mention-item:hover {
    background: color-mix(in srgb, var(--cvx-navbar-hover) 60%, transparent);
}

/* ── Edição inline ─────────────────────────────────────────── */
.cvx-inline-editable {
    cursor:        text;
    border-radius: 4px;
    padding:       1px 4px;
    margin:        -1px -4px;
    transition:    background .15s;
}
.cvx-inline-editable:hover {
    background: color-mix(in srgb, var(--cvx-primary) 8%, transparent);
}
.cvx-inline-input {
    background:    transparent;
    border:        none;
    border-bottom: 1px solid var(--cvx-primary);
    outline:       none;
    font:          inherit;
    color:         inherit;
    width:         100%;
    max-width:     100%;
    padding:       0;
    min-width:     80px;
    resize:        none;
    overflow:      hidden;
    line-height:   inherit;
    display:       block;
}

/* ── Dropzone / Upload ─────────────────────────────────────── */
.cvx-dropzone {
    border:        2px dashed var(--cvx-border);
    border-radius: 8px;
    padding:       1.5rem;
    text-align:    center;
    cursor:        pointer;
    transition:    border-color .2s, background .2s;
    user-select:   none;
}
.cvx-dropzone:hover,
.cvx-dropzone--active {
    border-color: var(--cvx-primary);
    background:   color-mix(in srgb, var(--cvx-primary) 6%, transparent);
}
.cvx-dropzone--loading {
    opacity: .6;
    cursor:  wait;
}

/* ── Anexos ────────────────────────────────────────────────── */
.cvx-attachment {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    background:    var(--cvx-surface-alt, var(--cvx-surface));
    border:        1px solid var(--cvx-border);
    border-radius: 8px;
    padding:       .4rem .6rem;
    max-width:     220px;
    position:      relative;
}
.cvx-attachment-thumb {
    width:         40px;
    height:        40px;
    flex-shrink:   0;
    border-radius: 4px;
    overflow:      hidden;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.cvx-attachment-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.cvx-attachment-icon {
    width:         40px;
    height:        40px;
    flex-shrink:   0;
    border-radius: 6px;
    background:    color-mix(in srgb, var(--cvx-primary) 10%, transparent);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.2rem;
    color:         var(--cvx-primary);
    text-decoration: none;
    transition:    background .15s;
}
a.cvx-attachment-icon:hover {
    background: color-mix(in srgb, var(--cvx-primary) 18%, transparent);
}
.cvx-attachment-info {
    flex:        1;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         .1rem;
}
.cvx-attachment-name {
    font-size:     .8rem;
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    color:         var(--cvx-text);
    text-decoration: none;
}
.cvx-attachment-name:hover { text-decoration: underline; }
.cvx-attachment-size {
    font-size: .7rem;
    color:     var(--cvx-text-muted);
}
.cvx-attachment-actions {
    display:     flex;
    align-items: center;
    gap:         .15rem;
    flex-shrink: 0;
    margin-left: auto;
}
.cvx-attachment-btn {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       26px;
    height:      26px;
    background:  none;
    border:      none;
    border-radius: 5px;
    color:       var(--cvx-text-muted);
    cursor:      pointer;
    font-size:   .85rem;
    line-height: 1;
    text-decoration: none;
    transition:  color .15s, background .15s;
}
.cvx-attachment-btn:hover {
    background: var(--cvx-surface-border);
    color:      var(--cvx-text);
}
.cvx-attachment-btn.cvx-attachment-delete:hover {
    background: color-mix(in srgb, #dc3545 12%, transparent);
    color:      #dc3545;
}

/* ── Fila de upload staged ─────────────────────────────────── */
.cvx-upload-queue {
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
}
.cvx-queue-item {
    display:       flex;
    align-items:   center;
    gap:           .65rem;
    font-size:     .82rem;
    background:    var(--cvx-surface);
    border:        1px solid var(--cvx-border);
    border-radius: 8px;
    padding:       .55rem .75rem;
    transition:    opacity .3s, transform .3s;
}
.cvx-queue-item.cvx-queue-done {
    opacity:   0;
    transform: translateX(8px);
}
.cvx-queue-icon {
    width:      32px;
    height:     32px;
    flex-shrink: 0;
    display:    flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cvx-primary) 10%, transparent);
    color:      var(--cvx-primary);
    font-size:  1rem;
}
.cvx-queue-meta {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            .1rem;
}
.cvx-queue-name {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-weight:   500;
    color:         var(--cvx-text);
}
.cvx-queue-size { color: var(--cvx-text-muted); font-size: .75rem; }

.cvx-queue-progress {
    display:    flex;
    align-items: center;
    gap:        .4rem;
    min-width:  120px;
}
.cvx-queue-bar {
    flex:         1;
    height:       5px;
    background:   var(--cvx-border);
    border-radius: 99px;
    overflow:     hidden;
}
.cvx-queue-fill {
    height:       100%;
    background:   var(--cvx-primary);
    border-radius: 99px;
    transition:   width .15s ease;
}
.cvx-queue-pct {
    font-size:   .72rem;
    color:       var(--cvx-text-muted);
    white-space: nowrap;
    min-width:   28px;
    text-align:  right;
}
.cvx-queue-remove {
    background:  none;
    border:      none;
    color:       var(--cvx-text-muted);
    cursor:      pointer;
    padding:     .2rem;
    line-height: 1;
    border-radius: 4px;
    transition:  color .15s, background .15s;
    flex-shrink: 0;
}
.cvx-queue-remove:hover {
    color:       #dc3545;
    background:  color-mix(in srgb, #dc3545 10%, transparent);
}

/* ============================================================
   Mobile — ajustes System (max-width: 767.98px)
   Não alterar regras fora deste bloco para não impactar desktop.
   ============================================================ */

@media (max-width: 767.98px) {

    .cvx-main {
        min-height: calc(100dvh - 58px);
    }

    /* Cabeçalho da listagem — mantém como linha, botão fica à direita */
    .cvx-system-page-header {
        gap:           .5rem;
        margin-bottom: 1rem;
        align-items:   center;
    }

    .cvx-system-page-header .cvx-breadcrumb {
        display: none;
    }

    /* Botão de ação — touch-friendly, centralizado dentro da altura mínima */
    .cvx-system-page-actions .btn {
        min-height:      44px;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
    }

    /* Card externo da listagem — transparente no mobile para os cards internos respirarem */
    .cvx-system-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

    /* Botão Editar no card — garante texto branco ao preencher no hover */
    .cvx-system-card-item .btn-cvx-outline:hover {
        background: var(--cvx-primary);
        color:      #fff;
    }

    /* Rodapé de paginação */
    .cvx-system-pagination-footer {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .5rem;
        flex-wrap:      wrap;
    }

    /* Cabeçalho do formulário */
    .cvx-system-form-header .cvx-breadcrumb {
        display: none;
    }

    /* Label invisível de alinhamento — desnecessário no mobile */
    .cvx-system-form-actions-label {
        display: none;
    }

    /* Ações do formulário */
    .cvx-system-form-actions .btn {
        width:      100%;
        min-height: 44px;
    }

}

@media (max-width: 767.98px) {

    /* ── Task ── */

    .cvx-task-page-header {
        flex-wrap:     wrap;
        gap:           .75rem .5rem;
        margin-bottom: 1rem;
        align-items:   flex-start;
    }

    .cvx-task-page-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-task-page-actions {
        width:     100%;
        flex-wrap: wrap;
        gap:       .5rem;
    }

    .cvx-task-page-actions #search-form {
        width: 100%;
    }

    .cvx-task-page-actions #search-form .input-group {
        min-width: 0;
    }

    .cvx-task-page-actions .btn {
        min-height:      44px;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
    }

    .cvx-task-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

    .cvx-task-card-item .btn-cvx-outline:hover {
        background: var(--cvx-primary);
        color:      #fff;
    }

    .cvx-task-pagination-footer {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .5rem;
        flex-wrap:      wrap;
    }

    /* show.php — cabeçalho da tarefa */

    .cvx-task-show-header {
        flex-wrap:     wrap;
        gap:           .75rem .5rem;
        margin-bottom: 1rem;
        align-items:   flex-start;
    }

    .cvx-task-show-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-task-show-title {
        flex: 1 1 100%;
    }

    .cvx-task-show-title > .cvx-btn-options {
        flex-shrink: 0;
    }

    .cvx-task-show-actions {
        width:           100%;
        justify-content: flex-end;
    }

}

@media (max-width: 767.98px) {

    /* ── Interval ── */

    .cvx-interval-page-header {
        gap:           .5rem;
        margin-bottom: 1rem;
        align-items:   center;
    }

    .cvx-interval-page-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-interval-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

    .cvx-interval-card-item .btn-cvx-outline:hover {
        background: var(--cvx-primary);
        color:      #fff;
    }

    .cvx-interval-pagination-footer {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .5rem;
        flex-wrap:      wrap;
    }

}

@media (max-width: 767.98px) {

    /* ── Team ── */

    .cvx-team-page-header {
        flex-wrap:     wrap;
        gap:           .75rem .5rem;
        margin-bottom: 1rem;
        align-items:   flex-start;
    }

    .cvx-team-page-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-team-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

    .cvx-team-pagination-footer {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .5rem;
        flex-wrap:      wrap;
    }

}

@media (max-width: 767.98px) {

    /* ── PermissionGroup ── */

    .cvx-pgroup-page-header {
        flex-wrap:     wrap;
        gap:           .75rem .5rem;
        margin-bottom: 1rem;
        align-items:   flex-start;
    }

    .cvx-pgroup-page-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-pgroup-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

}

@media (max-width: 767.98px) {

    /* ── TaskStatus ── */

    .cvx-tstatus-page-header {
        flex-wrap:     wrap;
        gap:           .75rem .5rem;
        margin-bottom: 1rem;
        align-items:   flex-start;
    }

    .cvx-tstatus-page-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-tstatus-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

}

@media (max-width: 767.98px) {

    /* ── TaskStage ── */

    .cvx-tstage-page-header {
        flex-wrap:     wrap;
        gap:           .75rem .5rem;
        margin-bottom: 1rem;
        align-items:   flex-start;
    }

    .cvx-tstage-page-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-tstage-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

}

@media (max-width: 767.98px) {

    /* ── Module ── */

    .cvx-module-page-header {
        gap:           .5rem;
        margin-bottom: 1rem;
        align-items:   flex-start;
    }

    .cvx-module-page-header .cvx-breadcrumb {
        display: none;
    }

    .cvx-module-list-card {
        background:    transparent !important;
        box-shadow:    none !important;
        border:        none !important;
        border-radius: 0 !important;
    }

}