/* ==========================================================================
   VIURE — TEMA PREMIUM
   public/css/theme/theme.css
   --------------------------------------------------------------------------
   Paleta institucional Viure (verde profundo + dourado).
   Sobrescreve as variáveis do Bootstrap 5.3 — todas as classes utilitárias
   (.btn-primary, .bg-success, .text-danger, etc.) herdam automaticamente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA — CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
    /* Marca */
    --viure-primary:        #1B4332;   /* Verde profundo — botões, cabeçalhos, ações */
    --viure-primary-hover:  #0F2E22;   /* Verde mais escuro — hover/ativo */
    --viure-primary-soft:   #D8E4DD;   /* Verde claríssimo — fundos sutis */

    --viure-gold:           #C9A227;   /* Dourado Viure — destaques, badges, valores */
    --viure-gold-hover:     #A88719;   /* Dourado escuro — hover/textos */
    --viure-gold-soft:      #F7EFD2;   /* Dourado claríssimo — fundos de destaque */

    /* Superfícies */
    --viure-bg:             #FAFAF7;   /* Fundo geral do app (off-white) */
    --viure-surface:        #FFFFFF;   /* Cards/painéis */
    --viure-dark:           #1A1A1A;   /* Sidebar, áreas escuras */
    --viure-dark-2:         #232323;   /* Sidebar — tom secundário */

    /* Texto */
    --viure-text:           #1F1F1F;   /* Texto principal */
    --viure-text-muted:     #6B6B6B;   /* Texto secundário */
    --viure-text-on-dark:   rgba(255,255,255,0.92);
    --viure-text-on-dark-muted: rgba(255,255,255,0.65);

    /* Bordas */
    --viure-border:         #E8E2D0;   /* Bege claro — separadores */
    --viure-border-strong:  #D9D2BD;   /* Variante mais marcada */

    /* Status */
    --viure-success:        #52B788;   /* Pago / sucesso */
    --viure-success-soft:   #E2F3EA;
    --viure-danger:         #9B2226;   /* Inadimplente / erro */
    --viure-danger-soft:    #F5D9DA;
    --viure-warning:        #D4A017;   /* Atenção / pendente */
    --viure-warning-soft:   #FBEFCC;
    --viure-info:           #3D5A6C;   /* Informativo / neutro */
    --viure-info-soft:      #DCE4EA;

    /* Sombras */
    --viure-shadow-sm: 0 1px 2px rgba(15, 46, 34, 0.06), 0 1px 3px rgba(15, 46, 34, 0.05);
    --viure-shadow:    0 4px 12px rgba(15, 46, 34, 0.08), 0 2px 4px rgba(15, 46, 34, 0.05);
    --viure-shadow-lg: 0 12px 32px rgba(15, 46, 34, 0.12), 0 4px 8px rgba(15, 46, 34, 0.06);

    /* Raios */
    --viure-radius-sm: .35rem;
    --viure-radius:    .55rem;
    --viure-radius-lg: .9rem;
    --viure-radius-pill: 999px;

    /* Transições — padronizadas para coerência de movimento */
    --viure-ease:        cubic-bezier(.2, .7, .2, 1);
    --viure-t-fast:      120ms var(--viure-ease);
    --viure-t:           180ms var(--viure-ease);
    --viure-t-slow:      280ms var(--viure-ease);

    /* Tipografia */
    --viure-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --viure-font-num:  'Inter', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. OVERRIDES DAS VARIÁVEIS DO BOOTSTRAP
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary:        var(--viure-primary);
    --bs-primary-rgb:    27, 67, 50;
    --bs-primary-text-emphasis:  var(--viure-primary-hover);
    --bs-primary-bg-subtle:      var(--viure-primary-soft);
    --bs-primary-border-subtle:  #B7CDC2;

    --bs-success:        var(--viure-success);
    --bs-success-rgb:    82, 183, 136;
    --bs-success-bg-subtle:      var(--viure-success-soft);
    --bs-success-border-subtle:  #BFE3CF;

    --bs-danger:         var(--viure-danger);
    --bs-danger-rgb:     155, 34, 38;
    --bs-danger-bg-subtle:       var(--viure-danger-soft);
    --bs-danger-border-subtle:   #E8B5B7;

    --bs-warning:        var(--viure-warning);
    --bs-warning-rgb:    212, 160, 23;
    --bs-warning-bg-subtle:      var(--viure-warning-soft);
    --bs-warning-border-subtle:  #F1DC95;

    --bs-info:           var(--viure-info);
    --bs-info-rgb:       61, 90, 108;
    --bs-info-bg-subtle:         var(--viure-info-soft);
    --bs-info-border-subtle:     #B9C6CE;

    --bs-dark:           var(--viure-dark);
    --bs-dark-rgb:       26, 26, 26;

    --bs-body-bg:        var(--viure-bg);
    --bs-body-color:     var(--viure-text);
    --bs-body-color-rgb: 31, 31, 31;

    --bs-border-color:           var(--viure-border);
    --bs-border-color-translucent: rgba(31, 31, 31, 0.10);

    --bs-link-color:           var(--viure-primary);
    --bs-link-color-rgb:       27, 67, 50;
    --bs-link-hover-color:     var(--viure-primary-hover);
    --bs-link-hover-color-rgb: 15, 46, 34;

    --bs-secondary-color:        var(--viure-text-muted);
    --bs-secondary-bg:           #F1EFE7;
    --bs-tertiary-bg:            #F6F4EC;
}

/* --------------------------------------------------------------------------
   3. BASE — TIPOGRAFIA E BODY
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    background-color: var(--viure-bg);
    color: var(--viure-text);
    font-family: var(--viure-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Seleção de texto premium (verde claríssimo) */
::selection      { background: var(--viure-primary-soft); color: var(--viure-primary-hover); }
::-moz-selection { background: var(--viure-primary-soft); color: var(--viure-primary-hover); }

/* Anel de foco visível (acessibilidade + premium) */
:where(a, button, [role="button"], input, select, textarea, .form-control, .form-select, .page-link):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.45);
    border-radius: var(--viure-radius-sm);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--viure-text);
    font-weight: 700;
    letter-spacing: .01em;
}

a { color: var(--viure-primary); }
a:hover { color: var(--viure-primary-hover); }

.text-primary    { color: var(--viure-primary)   !important; }
.text-gold       { color: var(--viure-gold-hover)!important; }
.text-success    { color: var(--viure-success)   !important; }
.text-danger     { color: var(--viure-danger)    !important; }
.text-warning    { color: var(--viure-warning)   !important; }
.text-info       { color: var(--viure-info)      !important; }
.text-muted, .text-secondary { color: var(--viure-text-muted) !important; }

.bg-primary  { background-color: var(--viure-primary) !important; }
.bg-gold     { background-color: var(--viure-gold)    !important; color: #1A1A1A !important; }
.bg-success  { background-color: var(--viure-success) !important; }
.bg-danger   { background-color: var(--viure-danger)  !important; }
.bg-warning  { background-color: var(--viure-warning) !important; color: #1A1A1A !important; }
.bg-info     { background-color: var(--viure-info)    !important; }
.bg-dark     { background-color: var(--viure-dark)    !important; }
.bg-light    { background-color: var(--viure-bg)      !important; }

/* --------------------------------------------------------------------------
   4. SIDEBAR (substitui CSS antigo + estilos inline do header.php)
   -------------------------------------------------------------------------- */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

#sidebar {
    background: linear-gradient(180deg, var(--viure-dark) 0%, var(--viure-dark-2) 100%);
    color: var(--viure-text-on-dark);
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 0 14px rgba(0,0,0,0.18);
}

#sidebar, #sidebar a,
#sidebar .sidebar-header h5,
#sidebar .sidebar-header h6,
#sidebar .sidebar-header small,
.navbar-brand {
    text-transform: uppercase !important;
}

@media (min-width: 992px) {
    #sidebar {
        width: 260px;
        min-width: 260px;
        max-width: 260px;
        flex-shrink: 0 !important;
        z-index: 1040;
        min-height: 100vh;
    }
}

@media (max-width: 991.98px) {
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -260px !important;
        margin: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
    }
    #sidebar.show-menu { left: 0 !important; }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1040;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .sidebar-overlay.show-menu { display: block; opacity: 1; }
}

#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(201, 162, 39, 0.35);
    border-radius: 10px;
}

.sidebar-header {
    padding: 1.5rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(201, 162, 39, 0.20);
    text-align: center;
}

.sidebar-header h5 {
    color: var(--viure-gold) !important;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: .85rem;
}

.sidebar-header img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 3px solid var(--viure-gold);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.sidebar-header h6 {
    color: var(--viure-text-on-dark) !important;
    margin-top: .75rem;
    font-weight: 700;
}

.sidebar-header small {
    color: var(--viure-gold) !important;
    font-weight: 600;
    font-size: 0.8rem !important;
    letter-spacing: .05em;
}

#sidebar ul.components { padding: .5rem 0; }

#sidebar ul li a {
    padding: 11px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--viure-text-on-dark) !important;
    text-decoration: none !important;
    border-left: 3px solid transparent;
    transition: background-color .18s ease, border-color .18s ease, padding-left .18s ease;
    display: flex;
    align-items: center;
}

#sidebar ul li a i {
    width: 24px;
    text-align: center;
    font-size: 1rem;
    color: var(--viure-gold) !important;
    margin-right: .65rem;
    transition: color .18s ease;
}

#sidebar ul li a:hover,
#sidebar ul li a[aria-expanded="true"] {
    background: rgba(201, 162, 39, 0.10) !important;
    color: #fff !important;
    border-left-color: var(--viure-gold);
    padding-left: 25px;
}

#sidebar ul li a.dropdown-toggle::after {
    margin-left: auto;
    color: var(--viure-text-on-dark-muted) !important;
}

#sidebar ul li ul li a {
    padding-left: 50px !important;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.30) !important;
    color: var(--viure-text-on-dark-muted) !important;
    border-left-color: transparent;
}

#sidebar ul li ul li a i {
    color: var(--viure-text-on-dark-muted) !important;
    font-size: 0.85rem;
}

#sidebar ul li ul li a:hover {
    padding-left: 55px !important;
    color: #fff !important;
    background: rgba(201, 162, 39, 0.08) !important;
}

#sidebar ul li ul li a:hover i { color: var(--viure-gold) !important; }

/* Item destacado (Bater Ponto, etc.) */
#sidebar ul li a.menu-bater-ponto {
    background: rgba(201, 162, 39, 0.18) !important;
    border-left: 3px solid var(--viure-gold) !important;
    color: #fff !important;
}
#sidebar ul li a.menu-bater-ponto:hover {
    background: rgba(201, 162, 39, 0.28) !important;
}
#sidebar ul li a.menu-bater-ponto i { color: var(--viure-gold) !important; }

/* Cabeçalho de seção (PRINCIPAL, COMUNICAÇÃO, VENDAS, etc) */
#sidebar ul li.menu-section {
    list-style: none;
    padding: 1.1rem 1.25rem 0;
    margin-top: .25rem;
    pointer-events: none;
    user-select: none;
}
#sidebar ul li.menu-section span {
    display: block;
    color: var(--viure-gold);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    opacity: .65;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(201, 162, 39, 0.14);
}
/* Primeira seção não precisa do espaço extra acima */
#sidebar ul li.menu-section:first-child {
    padding-top: .35rem;
    margin-top: 0;
}

/* Badge nas mensagens — refinado (sombra dourada sutil) */
#sidebar ul li a .badge.bg-danger {
    background: var(--viure-danger) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: .7rem;
    padding: .25em .55em;
    box-shadow: 0 2px 6px rgba(155, 34, 38, 0.45);
}

/* Item ATIVO (página atual) — fita dourada à esquerda mais forte */
#sidebar ul li a.is-active,
#sidebar ul li a[aria-current="page"] {
    background: rgba(201, 162, 39, 0.12) !important;
    border-left-color: var(--viure-gold) !important;
    color: #fff !important;
}
#sidebar ul li a.is-active i,
#sidebar ul li a[aria-current="page"] i {
    color: var(--viure-gold) !important;
}

/* Botão SAIR */
.sidebar-footer { padding: 1rem; }
.sidebar-footer .btn-danger {
    background-color: var(--viure-danger) !important;
    border-color: var(--viure-danger) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .03em;
}
.sidebar-footer .btn-danger:hover {
    background-color: #7a1a1d !important;
    border-color: #7a1a1d !important;
}

/* --------------------------------------------------------------------------
   5. NAVBAR MOBILE
   -------------------------------------------------------------------------- */
.navbar-mobile-custom {
    background: linear-gradient(90deg, var(--viure-primary) 0%, var(--viure-primary-hover) 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.navbar-mobile-custom .navbar-brand {
    color: var(--viure-gold) !important;
    font-weight: 800;
    letter-spacing: .05em;
}
.navbar-mobile-custom #sidebarCollapse {
    background: var(--viure-gold) !important;
    border-color: var(--viure-gold) !important;
    color: var(--viure-dark) !important;
    font-weight: 700;
}
.navbar-mobile-custom #sidebarCollapse:hover {
    background: var(--viure-gold-hover) !important;
    border-color: var(--viure-gold-hover) !important;
}

/* --------------------------------------------------------------------------
   6. CONTEÚDO
   -------------------------------------------------------------------------- */
#content-wrapper {
    width: 100%;
    padding: 0;
    transition: all 0.3s;
    background: var(--viure-bg);
}

main.container-fluid { color: var(--viure-text); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--viure-surface);
    border: 1px solid var(--viure-border);
    border-radius: var(--viure-radius);
    box-shadow: var(--viure-shadow-sm);
    transition: box-shadow var(--viure-t), transform var(--viure-t), border-color var(--viure-t);
}
.card.is-interactive,
a.card,
.card-hoverable {
    cursor: pointer;
}
.card.is-interactive:hover,
a.card:hover,
.card-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: var(--viure-shadow);
    border-color: var(--viure-border-strong);
}
.card.shadow-sm { box-shadow: var(--viure-shadow-sm) !important; }
.card.shadow    { box-shadow: var(--viure-shadow)    !important; }
.card.shadow-lg { box-shadow: var(--viure-shadow-lg) !important; }

.card-header {
    background-color: var(--viure-surface);
    border-bottom: 1px solid var(--viure-border);
    font-weight: 700;
    color: var(--viure-text);
    padding: .9rem 1.1rem;
}
.card-header.bg-primary,
.card-header.bg-dark {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.10);
}
.card-header.bg-primary { background-color: var(--viure-primary) !important; }
.card-header.bg-dark    { background-color: var(--viure-dark) !important; }

.card.border-primary  { border-color: var(--viure-primary) !important; }
.card.border-dark     { border-color: var(--viure-dark) !important; }
.card.border-success  { border-color: var(--viure-success) !important; }
.card.border-danger   { border-color: var(--viure-danger) !important; }
.card.border-warning  { border-color: var(--viure-warning) !important; }
.card.border-gold     { border-color: var(--viure-gold) !important; }

.card-body.bg-light { background-color: #F6F4EC !important; }

/* --------------------------------------------------------------------------
   8. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: var(--viure-radius-sm);
    padding: .5rem 1rem;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--viure-primary);
    border-color: var(--viure-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary {
    background-color: var(--viure-primary-hover) !important;
    border-color: var(--viure-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 0 0 .2rem rgba(27, 67, 50, 0.25);
}

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

.btn-success {
    background-color: var(--viure-success);
    border-color: var(--viure-success);
    color: #0E3A24;
}
.btn-success:hover {
    background-color: #3FA374 !important;
    border-color: #3FA374 !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--viure-danger);
    border-color: var(--viure-danger);
    color: #fff;
}
.btn-danger:hover {
    background-color: #7a1a1d !important;
    border-color: #7a1a1d !important;
}

.btn-warning {
    background-color: var(--viure-warning);
    border-color: var(--viure-warning);
    color: #1A1A1A;
}
.btn-warning:hover {
    background-color: #B58712 !important;
    border-color: #B58712 !important;
    color: #1A1A1A !important;
}

.btn-info {
    background-color: var(--viure-info);
    border-color: var(--viure-info);
    color: #fff;
}
.btn-info:hover {
    background-color: #2F4858 !important;
    border-color: #2F4858 !important;
    color: #fff !important;
}

.btn-dark {
    background-color: var(--viure-dark);
    border-color: var(--viure-dark);
    color: var(--viure-gold);
}
.btn-dark:hover {
    background-color: #000 !important;
    border-color: #000 !important;
    color: var(--viure-gold) !important;
}

.btn-light {
    background-color: #fff;
    border-color: var(--viure-border);
    color: var(--viure-text);
}
.btn-light:hover {
    background-color: #F1EFE7 !important;
    border-color: var(--viure-border-strong) !important;
}

.btn-outline-secondary {
    color: var(--viure-text-muted);
    border-color: var(--viure-border-strong);
}
.btn-outline-secondary:hover {
    background-color: var(--viure-text-muted);
    border-color: var(--viure-text-muted);
    color: #fff;
}

/* Botão dourado (exclusivo Viure) — para CTAs premium */
.btn-gold {
    background-color: var(--viure-gold);
    border: 1px solid var(--viure-gold);
    color: var(--viure-dark);
    font-weight: 700;
}
.btn-gold:hover,
.btn-gold:focus {
    background-color: var(--viure-gold-hover);
    border-color: var(--viure-gold-hover);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(201, 162, 39, 0.30);
}

.btn-outline-gold {
    color: var(--viure-gold-hover);
    border: 1px solid var(--viure-gold);
    background: transparent;
}
.btn-outline-gold:hover {
    background-color: var(--viure-gold);
    color: var(--viure-dark);
}

/* --------------------------------------------------------------------------
   9. FORMULÁRIOS
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border: 1px solid var(--viure-border-strong);
    border-radius: var(--viure-radius-sm);
    color: var(--viure-text);
    background-color: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--viure-primary);
    box-shadow: 0 0 0 .2rem rgba(27, 67, 50, 0.18);
}

.form-control.border-primary,
.form-select.border-primary {
    border-color: var(--viure-primary) !important;
}

.form-label {
    color: var(--viure-text);
    font-weight: 600;
    margin-bottom: .35rem;
}

.form-control::placeholder { color: #A0A0A0; opacity: 1; }

.input-group-text {
    background-color: #F1EFE7;
    border-color: var(--viure-border-strong);
    color: var(--viure-text-muted);
    font-weight: 600;
}

.form-check-input:checked {
    background-color: var(--viure-primary);
    border-color: var(--viure-primary);
}
.form-check-input:focus {
    border-color: var(--viure-primary);
    box-shadow: 0 0 0 .2rem rgba(27, 67, 50, 0.18);
}

/* --------------------------------------------------------------------------
   10. TABELAS
   -------------------------------------------------------------------------- */
.table {
    --bs-table-color: var(--viure-text);
    --bs-table-bg: var(--viure-surface);
    --bs-table-border-color: var(--viure-border);
    --bs-table-striped-bg: #FAF7EC;
    --bs-table-hover-bg: var(--viure-primary-soft);
    color: var(--viure-text);
}

.table > thead {
    background-color: var(--viure-primary);
    color: #fff;
}
.table > thead th {
    background-color: var(--viure-primary) !important;
    color: #fff !important;
    border-color: var(--viure-primary-hover) !important;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .82rem;
    padding: .8rem .75rem;
}

.table > tbody > tr > td {
    vertical-align: middle;
    padding: .7rem .75rem;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--viure-primary-soft);
    color: var(--viure-text);
}

/* Reescreve o card de tabela responsiva (mobile) */
@media (max-width: 768px) {
    .table-responsive-cards thead { display: none; }
    .table-responsive-cards tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--viure-border);
        border-radius: var(--viure-radius);
        background: var(--viure-surface);
        box-shadow: var(--viure-shadow-sm);
    }
    .table-responsive-cards td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid var(--viure-border);
    }
    .table-responsive-cards td:last-child { border-bottom: 0; }
    .table-responsive-cards td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 45%;
        padding-right: 1rem;
        text-align: left;
        font-weight: 700;
        color: var(--viure-primary);
    }
    .table-responsive-cards td[data-label="Ações"] {
        padding-left: 0;
        text-align: center;
    }
    .table-responsive-cards td[data-label="Ações"]:before { content: ''; }
}

/* --------------------------------------------------------------------------
   11. BADGES & STATUS
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 700;
    letter-spacing: .03em;
    padding: .4em .65em;
    border-radius: .35rem;
}
.badge.bg-primary   { background-color: var(--viure-primary) !important; color: #fff; }
.badge.bg-success   { background-color: var(--viure-success) !important; color: #0E3A24; }
.badge.bg-danger    { background-color: var(--viure-danger)  !important; color: #fff; }
.badge.bg-warning   { background-color: var(--viure-warning) !important; color: #1A1A1A; }
.badge.bg-info      { background-color: var(--viure-info)    !important; color: #fff; }
.badge.bg-secondary { background-color: var(--viure-text-muted) !important; color: #fff; }
.badge.bg-gold      { background-color: var(--viure-gold) !important; color: var(--viure-dark); }
.badge.bg-dark      { background-color: var(--viure-dark) !important; color: var(--viure-gold); }

/* Status pílulas (uso semântico — Pago, Inadimplente, Pendente) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.status-pill.is-pago        { background: var(--viure-success-soft); color: #1F6E47; border-color: #BFE3CF; }
.status-pill.is-inadimplente{ background: var(--viure-danger-soft);  color: #6B1518; border-color: #E8B5B7; }
.status-pill.is-pendente    { background: var(--viure-warning-soft); color: #7A5C00; border-color: #F1DC95; }
.status-pill.is-info        { background: var(--viure-info-soft);    color: #2F4858; border-color: #B9C6CE; }

/* --------------------------------------------------------------------------
   12. ALERTS
   -------------------------------------------------------------------------- */
.alert { border-radius: var(--viure-radius); border-width: 1px; }
.alert-primary { background: var(--viure-primary-soft); color: #0F2E22; border-color: #B7CDC2; }
.alert-success { background: var(--viure-success-soft); color: #1F6E47; border-color: #BFE3CF; }
.alert-danger  { background: var(--viure-danger-soft);  color: #6B1518; border-color: #E8B5B7; }
.alert-warning { background: var(--viure-warning-soft); color: #7A5C00; border-color: #F1DC95; }
.alert-info    { background: var(--viure-info-soft);    color: #2F4858; border-color: #B9C6CE; }

/* --------------------------------------------------------------------------
   13. MODAIS, DROPDOWNS, OFFCANVAS
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--viure-radius);
    box-shadow: var(--viure-shadow-lg);
}
.modal-header {
    background-color: var(--viure-primary);
    color: #fff;
    border-bottom: none;
    border-radius: var(--viure-radius) var(--viure-radius) 0 0;
}
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(2); }
.modal-footer { border-top: 1px solid var(--viure-border); }

.dropdown-menu {
    border: 1px solid var(--viure-border);
    border-radius: var(--viure-radius-sm);
    box-shadow: var(--viure-shadow);
    padding: .35rem;
}
.dropdown-item {
    border-radius: var(--viure-radius-sm);
    font-weight: 500;
    padding: .5rem .75rem;
    color: var(--viure-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--viure-primary-soft);
    color: var(--viure-primary-hover);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--viure-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   14. PAGINAÇÃO
   -------------------------------------------------------------------------- */
.page-link {
    color: var(--viure-primary);
    border-color: var(--viure-border);
    font-weight: 600;
}
.page-link:hover {
    background-color: var(--viure-primary-soft);
    color: var(--viure-primary-hover);
    border-color: var(--viure-border);
}
.page-item.active .page-link {
    background-color: var(--viure-primary);
    border-color: var(--viure-primary);
    color: #fff;
}
.page-item.disabled .page-link { color: #B8B8B8; }

/* --------------------------------------------------------------------------
   15. LIST GROUPS
   -------------------------------------------------------------------------- */
.list-group-item {
    border-color: var(--viure-border);
    color: var(--viure-text);
}
.list-group-item.active {
    background-color: var(--viure-primary);
    border-color: var(--viure-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   16. UTILITÁRIOS EXCLUSIVOS VIURE
   -------------------------------------------------------------------------- */
.text-on-dark      { color: var(--viure-text-on-dark) !important; }
.bg-viure-soft     { background-color: var(--viure-bg) !important; }
.border-viure      { border-color: var(--viure-border) !important; }
.border-gold       { border-color: var(--viure-gold) !important; }
.shadow-viure-sm   { box-shadow: var(--viure-shadow-sm) !important; }
.shadow-viure      { box-shadow: var(--viure-shadow)    !important; }
.shadow-viure-lg   { box-shadow: var(--viure-shadow-lg) !important; }

/* Valor em destaque (ex: total de venda, comissão, premiação) */
.valor-destaque {
    font-weight: 800;
    color: var(--viure-gold-hover);
    letter-spacing: .02em;
}

/* Selo / etiqueta dourada (ex: premium, premiado) */
.selo-gold {
    display: inline-block;
    background: linear-gradient(135deg, var(--viure-gold) 0%, var(--viure-gold-hover) 100%);
    color: var(--viure-dark);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(168, 135, 25, 0.35);
}

/* Divisor com toque dourado */
hr.divisor-gold {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--viure-gold) 50%, transparent 100%);
    opacity: .6;
}

/* --------------------------------------------------------------------------
   17. REDUÇÕES PARA MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .card-header { padding: .75rem .85rem; }
    .btn { padding: .5rem .85rem; }
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   18. SCROLLBAR GLOBAL (refinada — verde sutil)
   -------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(27, 67, 50, 0.30) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: rgba(27, 67, 50, 0.25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color var(--viure-t);
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(27, 67, 50, 0.50); }

/* --------------------------------------------------------------------------
   19. NÚMEROS TABULARES (essencial para R$ alinhar coluna)
   -------------------------------------------------------------------------- */
.num,
.valor-destaque,
td.num,
.table .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-family: var(--viure-font-num);
    letter-spacing: 0;
}

/* Helper para alinhar colunas de valores em R$ */
.text-money     { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-money-pos { color: var(--viure-success); font-weight: 700; }
.text-money-neg { color: var(--viure-danger);  font-weight: 700; }

/* Cifrão discreto */
.cifrao {
    font-size: .75em;
    color: var(--viure-text-muted);
    margin-right: .15em;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   20. KPI / MÉTRICAS (dashboards)
   -------------------------------------------------------------------------- */
.card-kpi {
    position: relative;
    padding: 1.1rem 1.25rem;
    background: var(--viure-surface);
    border: 1px solid var(--viure-border);
    border-radius: var(--viure-radius);
    box-shadow: var(--viure-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--viure-t), transform var(--viure-t);
}
.card-kpi:hover { transform: translateY(-2px); box-shadow: var(--viure-shadow); }

.card-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--viure-primary);
}
.card-kpi.is-gold::before    { background: var(--viure-gold); }
.card-kpi.is-success::before { background: var(--viure-success); }
.card-kpi.is-danger::before  { background: var(--viure-danger); }
.card-kpi.is-warning::before { background: var(--viure-warning); }
.card-kpi.is-info::before    { background: var(--viure-info); }

.card-kpi .kpi-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--viure-text-muted);
    margin: 0 0 .35rem;
}
.card-kpi .kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--viure-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.card-kpi.is-gold .kpi-value { color: var(--viure-gold-hover); }
.card-kpi .kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 700;
    margin-top: .35rem;
}
.card-kpi .kpi-trend.up   { color: var(--viure-success); }
.card-kpi .kpi-trend.down { color: var(--viure-danger); }
.card-kpi .kpi-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: var(--viure-primary);
    opacity: .12;
}
.card-kpi.is-gold .kpi-icon { color: var(--viure-gold); opacity: .18; }

/* --------------------------------------------------------------------------
   21. CARD PREMIUM (acento dourado superior — premiações, destaques)
   -------------------------------------------------------------------------- */
.card-premium {
    position: relative;
    border: 1px solid var(--viure-border);
    border-top: none;
    border-radius: var(--viure-radius);
    background: var(--viure-surface);
    box-shadow: var(--viure-shadow);
    overflow: hidden;
}
.card-premium::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--viure-gold) 0%, var(--viure-gold-hover) 100%);
}

/* --------------------------------------------------------------------------
   22. INDICADOR DE STATUS COM PULSO (live, online, em rota)
   -------------------------------------------------------------------------- */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--viure-text-muted);
    margin-right: .35rem;
    vertical-align: middle;
    position: relative;
}
.status-dot.is-on    { background: var(--viure-success); }
.status-dot.is-off   { background: var(--viure-danger); }
.status-dot.is-warn  { background: var(--viure-warning); }
.status-dot.is-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: viure-pulse 1.6s ease-out infinite;
}
@keyframes viure-pulse {
    0%   { transform: scale(1);   opacity: .65; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* --------------------------------------------------------------------------
   23. VALIDAÇÃO DE FORMULÁRIOS (.is-valid / .is-invalid)
   -------------------------------------------------------------------------- */
.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--viure-success);
    background-image: none;
    padding-right: .75rem;
}
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    box-shadow: 0 0 0 .2rem rgba(82, 183, 136, 0.25);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--viure-danger);
    background-image: none;
    padding-right: .75rem;
}
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 .2rem rgba(155, 34, 38, 0.25);
}

.invalid-feedback { color: var(--viure-danger); font-weight: 600; font-size: .82rem; }
.valid-feedback   { color: var(--viure-success); font-weight: 600; font-size: .82rem; }

.form-text { color: var(--viure-text-muted); font-size: .8rem; }

/* Required asterisk */
label.required::after,
.form-label.required::after {
    content: " *";
    color: var(--viure-danger);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   24. ABAS (.nav-tabs / .nav-pills)
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 2px solid var(--viure-border);
    gap: .25rem;
}
.nav-tabs .nav-link {
    color: var(--viure-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-weight: 600;
    padding: .65rem 1rem;
    transition: color var(--viure-t), border-color var(--viure-t);
}
.nav-tabs .nav-link:hover {
    color: var(--viure-primary);
    border-bottom-color: var(--viure-border-strong);
    background: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--viure-primary);
    background: transparent;
    border-bottom-color: var(--viure-primary);
}

.nav-pills .nav-link {
    color: var(--viure-text);
    font-weight: 600;
    border-radius: var(--viure-radius-sm);
    padding: .5rem 1rem;
}
.nav-pills .nav-link:hover { background: var(--viure-primary-soft); color: var(--viure-primary-hover); }
.nav-pills .nav-link.active {
    background: var(--viure-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   25. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumb {
    background: transparent;
    padding: .5rem 0;
    margin-bottom: 1rem;
    font-size: .85rem;
}
.breadcrumb-item {
    color: var(--viure-text-muted);
    font-weight: 600;
}
.breadcrumb-item a {
    color: var(--viure-text-muted);
    text-decoration: none;
    transition: color var(--viure-t);
}
.breadcrumb-item a:hover { color: var(--viure-primary); }
.breadcrumb-item.active { color: var(--viure-primary); }
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--viure-border-strong);
    content: "›";
    font-weight: 700;
    padding: 0 .35rem;
}

/* --------------------------------------------------------------------------
   26. TOOLTIPS & POPOVERS
   -------------------------------------------------------------------------- */
.tooltip-inner {
    background: var(--viure-dark);
    color: var(--viure-text-on-dark);
    font-weight: 600;
    font-size: .78rem;
    padding: .4rem .65rem;
    border-radius: var(--viure-radius-sm);
    box-shadow: var(--viure-shadow);
}
.bs-tooltip-top  .tooltip-arrow::before { border-top-color:    var(--viure-dark); }
.bs-tooltip-end  .tooltip-arrow::before { border-right-color:  var(--viure-dark); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--viure-dark); }
.bs-tooltip-start .tooltip-arrow::before { border-left-color:  var(--viure-dark); }

.popover {
    border: 1px solid var(--viure-border);
    border-radius: var(--viure-radius);
    box-shadow: var(--viure-shadow);
}
.popover-header {
    background: var(--viure-primary);
    color: #fff;
    border-bottom: none;
    font-weight: 700;
}
.popover-body { color: var(--viure-text); }

/* --------------------------------------------------------------------------
   27. TOASTS (notificações)
   -------------------------------------------------------------------------- */
.toast {
    border: 1px solid var(--viure-border);
    border-radius: var(--viure-radius);
    box-shadow: var(--viure-shadow);
    background: var(--viure-surface);
}
.toast-header {
    background: var(--viure-surface);
    border-bottom: 1px solid var(--viure-border);
    color: var(--viure-text);
    font-weight: 700;
}
.toast.toast-success .toast-header { background: var(--viure-success-soft); color: #1F6E47; }
.toast.toast-danger  .toast-header { background: var(--viure-danger-soft);  color: #6B1518; }
.toast.toast-warning .toast-header { background: var(--viure-warning-soft); color: #7A5C00; }

/* --------------------------------------------------------------------------
   28. PROGRESS BARS (com variante DOURADA para metas/premiações)
   -------------------------------------------------------------------------- */
.progress {
    background-color: var(--viure-border);
    border-radius: var(--viure-radius-pill);
    overflow: hidden;
    height: .85rem;
}
.progress-bar {
    background-color: var(--viure-primary);
    color: #fff;
    font-weight: 700;
    font-size: .7rem;
    transition: width .6s var(--viure-ease);
}
.progress-bar.bg-success { background-color: var(--viure-success) !important; color: #0E3A24; }
.progress-bar.bg-danger  { background-color: var(--viure-danger)  !important; }
.progress-bar.bg-warning { background-color: var(--viure-warning) !important; color: #1A1A1A; }
.progress-bar.bg-info    { background-color: var(--viure-info)    !important; }

/* Variante exclusiva — meta de premiação atingida */
.progress-bar.bg-gold,
.progress-gold .progress-bar {
    background: linear-gradient(90deg, var(--viure-gold) 0%, var(--viure-gold-hover) 100%) !important;
    color: var(--viure-dark);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.10);
}

/* --------------------------------------------------------------------------
   29. SPINNERS
   -------------------------------------------------------------------------- */
.spinner-border,
.spinner-grow { color: var(--viure-primary); }
.spinner-border.text-gold,
.spinner-grow.text-gold { color: var(--viure-gold) !important; }

/* --------------------------------------------------------------------------
   30. SKELETON LOADER (placeholder enquanto carrega)
   -------------------------------------------------------------------------- */
.skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        #ECE7D4 0%,
        #F6F2E2 50%,
        #ECE7D4 100%
    );
    background-size: 200% 100%;
    animation: viure-skeleton 1.4s ease-in-out infinite;
    border-radius: var(--viure-radius-sm);
    min-height: 1em;
}
.skeleton.line     { height: .9em; margin: .35rem 0; }
.skeleton.line-sm  { height: .7em; width: 60%; margin: .35rem 0; }
.skeleton.line-lg  { height: 1.4em; width: 80%; margin: .5rem 0; }
.skeleton.circle   { width: 48px; height: 48px; border-radius: 50%; }
.skeleton.thumb    { width: 100%; height: 120px; }

@keyframes viure-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   31. FAB (Floating Action Button) — mobile / ações rápidas
   -------------------------------------------------------------------------- */
.btn-fab {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--viure-primary);
    color: #fff;
    border: none;
    box-shadow: var(--viure-shadow-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 1030;
    transition: transform var(--viure-t), background-color var(--viure-t), box-shadow var(--viure-t);
}
.btn-fab:hover {
    background: var(--viure-primary-hover);
    transform: translateY(-2px);
    color: #fff;
}
.btn-fab.is-gold { background: var(--viure-gold); color: var(--viure-dark); }
.btn-fab.is-gold:hover { background: var(--viure-gold-hover); color: #fff; }

/* --------------------------------------------------------------------------
   32. TABELA — RECURSOS PREMIUM (sticky head, compact, action col)
   -------------------------------------------------------------------------- */
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 0 var(--viure-primary-hover);
}

.table-compact > :not(caption) > * > * { padding: .45rem .55rem; font-size: .85rem; }

.table .col-acoes,
.table td.col-acoes,
.table th.col-acoes {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Linha "destacada" — ex: pedido importante, cliente VIP */
.table tr.row-gold > td {
    background: linear-gradient(90deg, var(--viure-gold-soft) 0%, transparent 80%) !important;
    border-left: 3px solid var(--viure-gold);
}

/* --------------------------------------------------------------------------
   33. ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   34. PRINT — RELATÓRIOS LIMPOS (sem sidebar/navbar, B&W friendly)
   -------------------------------------------------------------------------- */
@media print {
    /* Esconde elementos de navegação */
    #sidebar,
    .sidebar-overlay,
    .navbar-mobile-custom,
    .sidebar-footer,
    .btn-fab,
    .no-print,
    .d-print-none {
        display: none !important;
    }

    /* Reseta layout para fluxo de página */
    body,
    .wrapper,
    #content-wrapper,
    main {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
    }

    main.container-fluid { padding: 0 !important; }

    /* Cards e tabelas com bordas sólidas para impressão */
    .card,
    .table,
    .table th,
    .table td {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    .card-header {
        background: #f0f0f0 !important;
        color: #000 !important;
        border-bottom: 1px solid #000 !important;
    }
    .table > thead {
        background: #e5e5e5 !important;
    }
    .table > thead th {
        background: #e5e5e5 !important;
        color: #000 !important;
        border-color: #000 !important;
    }

    /* Status legíveis em P&B */
    .badge,
    .status-pill {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        padding: .15rem .4rem !important;
    }

    /* Links — exibe URL ao lado em impressão */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .8em;
        color: #555;
    }
    a[href^="#"]::after,
    a[href^="javascript"]::after { content: ""; }

    /* Quebra de página */
    .page-break,
    .page-break-before { page-break-before: always; }
    .page-break-after  { page-break-after: always; }
    .avoid-break       { page-break-inside: avoid; }

    /* Cabeçalhos não ficam sozinhos no fim da página */
    h1, h2, h3, h4 { page-break-after: avoid; }

    /* Tipografia para papel */
    body { font-size: 11pt; line-height: 1.4; }
    h1 { font-size: 18pt; }
    h2 { font-size: 15pt; }
    h3 { font-size: 13pt; }
}

/* --------------------------------------------------------------------------
   35. UTILITÁRIOS DE TEXTO (UPPERCASE, truncate, line-clamp)
   -------------------------------------------------------------------------- */
.text-uppercase-tight { text-transform: uppercase; letter-spacing: .04em; }
.text-truncate-1,
.text-truncate-2,
.text-truncate-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-truncate-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.text-truncate-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.text-truncate-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Dica visual para textos clicáveis dentro de células de tabela */
.table .link-hint {
    color: var(--viure-primary);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--viure-t);
}
.table .link-hint:hover {
    color: var(--viure-primary-hover);
    border-bottom-color: var(--viure-primary);
}