/* ==========================================================================
   BR RADIOS - CSS Customizado para WHMCS (Template Lagom)
   Arquivo: templates/lagom/core/styles/default/assets/css/theme-custom.css
   
   Paleta de Cores BR Radios:
   - Verde Primario: #00A651
   - Verde Escuro:   #2E7D32
   - Verde Hover:    #1B8A3D
   - Amarelo Accent: #FDB913
   - Escuro:         #1a1a1a
   - Cinza Texto:    #2d3748
   ========================================================================== */

/* ---------- VARIAVEIS GLOBAIS ---------- */
:root {
    --br-green: #00A651;
    --br-green-dark: #2E7D32;
    --br-green-hover: #1B8A3D;
    --br-yellow: #FDB913;
    --br-dark: #1a1a1a;
    --br-gray: #2d3748;
    --br-light-bg: #f0faf4;
    --br-border: #c8e6c9;
}

/* ---------- HEADER / NAVEGACAO ---------- */
#header {
    background-color: var(--br-dark) !important;
}

#header .navbar-toggle .icon-bar {
    background-color: var(--br-green) !important;
}

#header .main-nav > ul > li > a {
    color: #e0e0e0 !important;
    transition: color 0.2s ease;
}

#header .main-nav > ul > li > a:hover,
#header .main-nav > ul > li > a:focus,
#header .main-nav > ul > li.active > a {
    color: var(--br-green) !important;
}

#header .main-nav > ul > li.open > a {
    color: var(--br-green) !important;
}

/* Botao "Abrir Ticket" no header */
#header .btn-primary,
.lagom .header-actions .btn-primary {
    background-color: var(--br-green) !important;
    border-color: var(--br-green) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

#header .btn-primary:hover,
.lagom .header-actions .btn-primary:hover {
    background-color: var(--br-green-hover) !important;
    border-color: var(--br-green-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.3) !important;
}

/* Dropdown do usuario */
#header .account-menu .dropdown-toggle {
    color: #e0e0e0 !important;
}

#header .account-menu .dropdown-toggle:hover {
    color: var(--br-green) !important;
}

/* ---------- MAIN HEADER / BREADCRUMB ---------- */
.main-header {
    background: linear-gradient(135deg, var(--br-dark) 0%, #2d3748 100%) !important;
    border-bottom: 3px solid var(--br-green) !important;
}

.main-header .header-lined {
    border-color: transparent !important;
}

.main-header h1,
.main-header .page-title {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.main-header .breadcrumb {
    background: transparent !important;
}

.main-header .breadcrumb > li,
.main-header .breadcrumb > li > a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.main-header .breadcrumb > li > a:hover {
    color: var(--br-yellow) !important;
}

.main-header .breadcrumb > .active {
    color: var(--br-yellow) !important;
}

/* ---------- INVOICE - CONTEUDO PRINCIPAL ---------- */
.invoice {
    background: #ffffff;
    border-radius: 12px !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    border: 1px solid #e8f5e9 !important;
}

.invoice .section {
    border-bottom: 1px solid #e8f5e9 !important;
    padding: 24px 32px !important;
}

.invoice .section:last-child {
    border-bottom: none !important;
}

/* Titulo da Fatura */
.invoice-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--br-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ---------- STATUS BADGES ---------- */
.invoice-status.label {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.invoice-status.label-danger {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.invoice-status.label-success {
    background-color: #dcfce7 !important;
    color: var(--br-green-dark) !important;
    border: 1px solid var(--br-border) !important;
}

.invoice-status.label-info {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.invoice-status.label-warning {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

/* ---------- LIST INFO (Datas) ---------- */
.list-info li {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 8px 0 !important;
}

.list-info li:last-child {
    border-bottom: none !important;
}

.list-info-text {
    color: #7c8088 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.list-info-title {
    color: var(--br-dark) !important;
    font-weight: 600 !important;
}

/* ---------- TABELA DE ITENS ---------- */
.invoice .table-condensed > thead > tr > th {
    background: var(--br-light-bg) !important;
    color: var(--br-green-dark) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid var(--br-border) !important;
    padding: 12px 16px !important;
}

.invoice .table-condensed > tbody > tr > td {
    border-top: 1px solid #f0f4f0 !important;
    color: var(--br-gray) !important;
    padding: 12px 16px !important;
}

.invoice .table-condensed > tbody > tr:hover > td {
    background-color: var(--br-light-bg) !important;
}

/* Sub-total rows */
.sub-total-row td {
    background-color: #fafafa !important;
    font-weight: 500 !important;
    color: #555 !important;
}

.sub-total-row.first td {
    border-top: 2px solid #e8f5e9 !important;
}

/* Total row */
.total-row td {
    background: linear-gradient(135deg, var(--br-green) 0%, var(--br-green-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.total-row td.h3 {
    color: #ffffff !important;
    margin: 0 !important;
}

/* ---------- SIDEBAR DE PAGAMENTO ---------- */
.panel-payment {
    background: linear-gradient(180deg, var(--br-green) 0%, var(--br-green-dark) 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 166, 81, 0.25) !important;
    overflow: hidden !important;
}

.panel-payment .panel-body {
    padding: 28px 24px !important;
}

.panel-payment .total {
    text-align: center !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.panel-payment .total-text {
    display: block !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}

.panel-payment .total-price {
    display: block !important;
    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

.panel-payment .total-price i {
    display: none !important;
}

.panel-payment label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.panel-payment .form-control,
.panel-payment select.form-control {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    color: var(--br-dark) !important;
    font-weight: 500 !important;
    height: 44px !important;
}

.panel-payment .form-control:focus {
    border-color: var(--br-yellow) !important;
    box-shadow: 0 0 0 3px rgba(253, 185, 19, 0.3) !important;
}

/* Botao de pagamento na sidebar */
.panel-payment .btn,
.panel-payment .btn-block,
.panel-payment .payment-btn-container .btn,
.panel-payment input[type="submit"].btn {
    background-color: var(--br-yellow) !important;
    border: none !important;
    color: var(--br-dark) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(253, 185, 19, 0.3) !important;
    width: 100% !important;
    margin-top: 12px !important;
}

.panel-payment .btn:hover,
.panel-payment .btn-block:hover,
.panel-payment .payment-btn-container .btn:hover,
.panel-payment input[type="submit"].btn:hover {
    background-color: #e5a711 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(253, 185, 19, 0.4) !important;
}

.panel-payment .btn:active {
    transform: translateY(0) !important;
}

/* QR Code PIX na sidebar */
.panel-payment img[alt="QR Code Pix"] {
    border-radius: 12px !important;
    border: 4px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    margin: 16px 0 !important;
}

/* Alerta de info PIX */
.panel-payment .alert-info {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 14px !important;
    font-size: 13px !important;
}

.panel-payment .alert-info p strong {
    color: var(--br-yellow) !important;
}

.panel-payment .alert-info textarea,
.panel-payment textarea.form-control {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    color: var(--br-dark) !important;
    font-size: 12px !important;
    font-family: monospace !important;
}

/* Sucesso ao copiar PIX */
.panel-payment #copySuccess {
    color: var(--br-yellow) !important;
    text-align: center !important;
    font-size: 14px !important;
}

/* ---------- SIDEBAR - PAINEIS EXTRAS ---------- */
.panel-sidebar {
    border: 1px solid #e8f5e9 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

.panel-sidebar .panel-heading {
    background: var(--br-light-bg) !important;
    border-bottom: 2px solid var(--br-border) !important;
    padding: 16px 20px !important;
}

.panel-sidebar .panel-heading .panel-title {
    color: var(--br-green-dark) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.panel-sidebar .panel-heading .panel-title i {
    color: var(--br-green) !important;
}

/* Links de acao */
.panel-sidebar .list-group-item {
    border-color: #f0f4f0 !important;
    color: var(--br-gray) !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
}

.panel-sidebar .list-group-item:hover {
    background-color: var(--br-light-bg) !important;
    color: var(--br-green) !important;
    padding-left: 24px !important;
}

.panel-sidebar .list-group-item i {
    color: var(--br-green) !important;
    margin-right: 8px !important;
}

/* Painel Creditos */
.panel-add-funds {
    border-color: #e8f5e9 !important;
}

.panel-add-funds .btn-success {
    background-color: var(--br-green) !important;
    border-color: var(--br-green) !important;
    border-radius: 0 6px 6px 0 !important;
}

.panel-add-funds .btn-success:hover {
    background-color: var(--br-green-hover) !important;
}

/* ---------- NOTAS DA FATURA ---------- */
.notes {
    margin-top: 0 !important;
}

.notes .notes-heading .notes-title {
    color: var(--br-green-dark) !important;
}

.notes .well.notes-body {
    background-color: var(--br-light-bg) !important;
    border: 1px solid var(--br-border) !important;
    border-radius: 8px !important;
    color: var(--br-gray) !important;
}

/* ---------- BOTOES GLOBAIS ---------- */
.lagom .btn-primary {
    background-color: var(--br-green) !important;
    border-color: var(--br-green) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.lagom .btn-primary:hover,
.lagom .btn-primary:focus {
    background-color: var(--br-green-hover) !important;
    border-color: var(--br-green-hover) !important;
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.25) !important;
}

.lagom .btn-success {
    background-color: var(--br-green) !important;
    border-color: var(--br-green) !important;
    border-radius: 6px !important;
}

.lagom .btn-success:hover {
    background-color: var(--br-green-dark) !important;
    border-color: var(--br-green-dark) !important;
}

/* ---------- ALERTAS ---------- */
.lagom .alert-success {
    background-color: #dcfce7 !important;
    border-color: var(--br-border) !important;
    color: var(--br-green-dark) !important;
    border-radius: 8px !important;
}

.lagom .alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
    border-radius: 8px !important;
}

.lagom .alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
    border-radius: 8px !important;
}

.lagom .alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    border-radius: 8px !important;
}

/* ---------- LINKS ---------- */
.lagom a {
    color: var(--br-green) !important;
}

.lagom a:hover,
.lagom a:focus {
    color: var(--br-green-dark) !important;
}

/* Nao afetar links dentro do header (ja tratados) e payment sidebar */
#header a,
.panel-payment a,
.panel-payment .alert-info a {
    color: inherit !important;
}

.panel-payment a:hover {
    color: var(--br-yellow) !important;
}

/* ---------- PORTAL NAV (Menu lateral) ---------- */
.lagom .portal-nav .nav-item.active > .nav-link,
.lagom .portal-nav .nav-item > .nav-link:hover {
    color: var(--br-green) !important;
}

.lagom .portal-nav .nav-item.active > .nav-link::before,
.lagom .portal-nav .nav-item > .nav-link:hover::before {
    background-color: var(--br-green) !important;
}

/* ---------- TABS ---------- */
.lagom .nav-tabs > li.active > a,
.lagom .nav-tabs > li > a:hover {
    color: var(--br-green) !important;
    border-bottom-color: var(--br-green) !important;
}

/* ---------- LABELS ---------- */
.lagom .label-primary {
    background-color: var(--br-green) !important;
}

/* ---------- FOOTER ---------- */
.lagom .page-footer {
    border-top: 3px solid var(--br-green) !important;
}

/* ---------- TEXTO SELECIONADO ---------- */
::selection {
    background-color: var(--br-green) !important;
    color: #ffffff !important;
}

/* ---------- SCROLL BAR (Navegadores Webkit) ---------- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f1;
}

::-webkit-scrollbar-thumb {
    background: var(--br-green);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--br-green-dark);
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 767px) {
    .invoice .section {
        padding: 16px 20px !important;
    }

    .invoice-title {
        font-size: 18px !important;
        flex-wrap: wrap !important;
    }

    .panel-payment .total-price {
        font-size: 28px !important;
    }

    .panel-payment .panel-body {
        padding: 20px 16px !important;
    }
}

@media (max-width: 480px) {
    .invoice-title {
        font-size: 16px !important;
    }

    .panel-payment .total-price {
        font-size: 24px !important;
    }
}