/* ============================================
   IP CAST - WHMCS Custom CSS (Twenty-One)
   Identico ao site ipcast.com.br
   ============================================ */

/* Importa as fontes Sora e Inter (originais do ipcast.com.br) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://ipcast.com.br/assets/css/style.min.css');

/* === Typografia e Fontes Globais === */
html, body, .primary-bg-color, section, #main-body {
    background-color: #0F172A !important;
    color: #cbd5e1 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Titulos usam a fonte Sora (mesma do ipcast.com.br) */
h1, h2, h3, h4, h5, h6, 
.card-title, .title, .section-title, 
.header-lined h1, .header-lined h2, .header-lined h3 {
    font-family: 'Sora', sans-serif !important;
    color: #f8fafc !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* === Logo Oficial IP Cast === */
.navbar-brand .logo-img {
    max-height: 42px !important;
    width: auto !important;
    filter: none !important;
}

/* === Navbars do WHMCS === */
.header { 
    background-color: #0d1527 !important; 
    border-bottom: 1px solid #1e293b !important; 
}
.topbar { 
    background-color: #070d19 !important; 
    border-bottom: 1px solid #1e293b !important; 
    color: #cbd5e1 !important; 
}
.topbar .btn, .topbar .input-group-text { color: #cbd5e1 !important; }
.topbar .input-group-text { background: transparent !important; border: none !important; }

.main-navbar-wrapper { 
    background-color: #0d1527 !important; 
    border-top: 1px solid #1e293b !important; 
    border-bottom: 1px solid #1e293b !important; 
}

.navbar-light .navbar-nav .nav-link,
.main-navbar-wrapper .nav-link { 
    color: #cbd5e1 !important; 
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0.6rem 1rem !important;
    transition: all 0.2s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .nav-link:focus { 
    color: #38bdf8 !important; 
    background-color: rgba(56, 189, 248, 0.08) !important;
    border-radius: 6px;
}
.navbar-light .navbar-nav .active > .nav-link,
.main-navbar-wrapper .active > .nav-link {
    color: #38bdf8 !important;
    background-color: rgba(56, 189, 248, 0.12) !important;
    border-radius: 6px;
}
.navbar-light { background-color: transparent !important; }

.header .form-control {
    background-color: #070d19 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

/* === Breadcrumb (Tira a faixa branca) === */
.master-breadcrumb, .breadcrumb { 
    background-color: #0F172A !important; 
    background: #0F172A !important;
    border: none !important;
}
.breadcrumb-item, .breadcrumb-item a { color: #94a3b8 !important; }
.breadcrumb-item.active { color: #cbd5e1 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #475569 !important; }

/* === REMOÇÃO DEFINITIVA DE BLOCOS BRANCOS (ATALHOS DA HOMEPAGE LOGGED OUT) === */
.action-icon-btns a {
    background-color: #0d1627 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    border-radius: 14px !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.action-icon-btns a:hover {
    background-color: #162035 !important;
    border-color: #38bdf8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.2) !important;
}
.action-icon-btns a .ico-container {
    background-color: rgba(56, 189, 248, 0.1) !important; /* Fundo suave para o ícone */
}
.action-icon-btns a i {
    color: #38bdf8 !important;
}

/* === REMOÇÃO DEFINITIVA DE BLOCOS BRANCOS (ATALHOS DA HOMEPAGE LOGGED IN) === */
.home-shortcuts, 
.home-shortcuts .row,
.tiles-container,
.tiles {
    background-color: transparent !important;
}

.home-shortcuts a,
.home-shortcuts div[class*="col-"] > a,
.home-shortcuts .btn,
.home-shortcuts .btn-default,
.home-shortcuts .shortcut-btn,
.tiles .tile,
a.tile,
div.tile,
.tiles-container a,
.icon-holder {
    background-color: #0d1627 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    border-radius: 14px !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.home-shortcuts a:hover,
.home-shortcuts div[class*="col-"] > a:hover,
.home-shortcuts .btn:hover,
.home-shortcuts .btn-default:hover,
.home-shortcuts .shortcut-btn:hover,
.tiles .tile:hover,
a.tile:hover,
.tiles-container a:hover {
    background-color: #162035 !important;
    border-color: #38bdf8 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.2) !important;
}

/* Ícones dos atalhos em azul IP Cast */
.home-shortcuts i,
.home-shortcuts svg,
.home-shortcuts .icon,
.tiles .tile i,
a.tile i,
.shortcut-btn i,
.icon-holder i {
    color: #38bdf8 !important;
}

/* Textos dos atalhos */
.home-shortcuts span,
.home-shortcuts h4,
.home-shortcuts div,
.tiles .tile .title,
.tiles .tile .stat,
a.tile span,
a.tile div {
    color: #f8fafc !important;
    font-weight: 600 !important;
}

/* === Cards & Painéis (Estilo IP Cast) === */
.card, .panel { 
    background-color: #0d1627 !important; 
    border: 1px solid #1e293b !important; 
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
.card-header, .panel-heading { 
    background-color: #070d19 !important; 
    border-bottom: 1px solid #1e293b !important; 
    color: #f8fafc !important; 
    font-family: 'Sora', sans-serif !important;
    font-weight: 700 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}
.card-body, .panel-body { 
    background-color: #0d1627 !important; 
    color: #cbd5e1 !important; 
}
.card-footer, .panel-footer { 
    background-color: #070d19 !important; 
    border-top: 1px solid #1e293b !important; 
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* List group inside cards */
.card .list-group-item,
.panel .list-group-item {
    background-color: #0d1627 !important;
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}
.card .list-group-item:hover,
.panel .list-group-item:hover {
    background-color: #162035 !important;
    color: #ffffff !important;
}

/* === Domain Search Box === */
.domain-checker-container, section.domain-checker-container { 
    background-color: #070d19 !important; 
    border: 1px solid #1e293b !important;
    border-radius: 16px !important;
}
.spotlight-tlds { 
    background-color: #070d19 !important; 
}
.spotlight-tld-container { 
    background-color: #0d1627 !important; 
    border: 1px solid #1e293b !important; 
    color: #cbd5e1 !important; 
    border-radius: 12px !important;
}

/* === Tabelas === */
.table { color: #cbd5e1 !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #070d19 !important; }
.table-striped tbody tr:nth-of-type(even) { background-color: #0d1627 !important; }
.table td, .table th { border-color: #1e293b !important; }
.table thead th { color: #f8fafc !important; background-color: #070d19 !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; }

/* === Inputs e Formulários === */
.form-control { 
    background-color: #070d19 !important; 
    border-color: #1e293b !important; 
    color: #e2e8f0 !important; 
    border-radius: 8px !important;
}
.form-control:focus { 
    border-color: #38bdf8 !important; 
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important; 
}
.input-group-text { 
    background-color: #0d1627 !important; 
    border-color: #1e293b !important; 
    color: #cbd5e1 !important; 
}
label { color: #cbd5e1 !important; font-weight: 500 !important; }

/* === Botões (IP Cast Cyan/Purple Gradient) === */
.btn-primary { 
    background: linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%) !important; 
    border: none !important; 
    color: #ffffff !important; 
    font-weight: 700 !important; 
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2) !important;
}
.btn-primary:hover { 
    background: linear-gradient(135deg, #7dd3fc 0%, #8b5cf6 100%) !important; 
    color: #ffffff !important;
    transform: translateY(-1px);
}
.btn-default, .btn-light { 
    background-color: #070d19 !important; 
    border-color: #1e293b !important; 
    color: #cbd5e1 !important; 
    border-radius: 8px !important;
}
.btn-default:hover, .btn-light:hover { 
    background-color: #162035 !important; 
    color: #ffffff !important; 
}

/* === Modal & Dropdowns === */
.dropdown-menu { 
    background-color: #0d1627 !important; 
    border-color: #1e293b !important; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    border-radius: 10px !important;
}
.dropdown-item { color: #cbd5e1 !important; }
.dropdown-item:hover { 
    background-color: #162035 !important; 
    color: #ffffff !important; 
}

.modal-content { 
    background-color: #0d1627 !important; 
    border-color: #1e293b !important; 
    color: #cbd5e1 !important; 
    border-radius: 16px !important;
}
.modal-header { border-bottom-color: #1e293b !important; }
.modal-footer { border-top-color: #1e293b !important; }

/* === Custom Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #070d19; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* === Alerts & Notifications (Dark Mode) === */
.alert {
    border-radius: 12px !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    background-color: #0d1627 !important;
}
.alert-warning {
    border-color: #f59e0b !important;
    background-color: rgba(245, 158, 11, 0.1) !important;
}
.alert-danger, .alert-error {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
}
.alert-info {
    border-color: #38bdf8 !important;
    background-color: rgba(56, 189, 248, 0.1) !important;
}
.alert-success {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.1) !important;
}

/* Fix any stray white background containers */
.main-content, .bg-white, .white-bg {
    background-color: transparent !important;
}

/* Ensure breadcrumb area has no background */
nav.master-breadcrumb, nav.breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
}

/* Make sure the main body and all parents are dark */
body, html, .primary-bg-color, #main-body, .app-main {
    background-color: #0F172A !important;
}

/* Fix specific green buttons to match brand */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
}

/* Typography fix for dashboard tiles */
.tiles .tile .title, .tiles .tile .stat {
    font-family: 'Sora', sans-serif !important;
}

/* Force dark mode for un-styled sections */
section.client-home-cards {
    background-color: transparent !important;
}

/* === Verification Banner Fix === */
.verification-banner {
    background-color: #0d1627 !important;
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
.verification-banner .btn-default {
    background-color: #0F172A !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
}
.verification-banner .btn-default:hover {
    background-color: #1e293b !important;
    color: #fff !important;
}

/* === Breadcrumb Fix Force === */
.master-breadcrumb {
    background-color: #070d19 !important;
    border-bottom: 1px solid #1e293b !important;
}

/* === Typography Force === */
body, p, a, div, span, td, th, li, label, input, select, button {
    font-family: 'Inter', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, 
.card-title, .title, .section-title, 
.header-lined h1, .header-lined h2, .header-lined h3,
.tiles .tile .title, .tiles .tile .stat {
    font-family: 'Sora', sans-serif !important;
}

/* === Nav & Header Typography / Colors === */
.navbar-light .navbar-nav .nav-link,
.main-navbar-wrapper .nav-link,
#mainNavbar .nav-link { 
    color: #cbd5e1 !important; 
}
.navbar-light .navbar-nav .nav-link:hover,
.main-navbar-wrapper .nav-link:hover,
#mainNavbar .nav-link:hover { 
    color: #38bdf8 !important; 
}
.topbar, .topbar a, .topbar span, .topbar button {
    color: #cbd5e1 !important;
}

/* === DataTables (Tabelas de Faturas/Serviços) === */
table.dataTable,
table.dataTable tbody tr,
table.dataTable tbody td,
table.dataTable thead th,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    background-color: #0d1627 !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
}

table.dataTable tbody tr.odd {
    background-color: #070d19 !important;
}
table.dataTable tbody tr.even {
    background-color: #0d1627 !important;
}
table.dataTable tbody tr:hover,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.even:hover {
    background-color: #162035 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #070d19 !important;
    color: #cbd5e1 !important;
    border: 1px solid #1e293b !important;
    border-radius: 6px !important;
    margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #38bdf8 !important;
    color: #000 !important;
    border-color: #38bdf8 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background: #0d1627 !important;
    color: #64748b !important;
}

/* DataTables Inputs */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: #070d19 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    border-radius: 6px !important;
    padding: 4px 8px;
}

/* === FORCE TEXT COLORS - NAV & ALERTS === */

/* Main Navigation Links */
#nav li a, 
#mainNavbar li a, 
.navbar-nav li a,
.navbar-nav .dropdown-toggle,
.main-navbar-wrapper a {
    color: #f8fafc !important;
    font-weight: 500 !important;
}
#nav li a:hover, 
#mainNavbar li a:hover,
.navbar-nav li a:hover {
    color: #38bdf8 !important;
}

/* Topbar text (Olá, Fernando, etc) */
.topbar, 
.topbar a, 
.topbar span, 
.topbar button,
.btn-active-client span,
.topbar .btn {
    color: #f8fafc !important;
}

/* Verification Banner Text */
.verification-banner, 
.verification-banner span, 
.verification-banner i,
.verification-banner .text {
    color: #f8fafc !important;
}

/* Search Box and Placeholders */
.form-control::placeholder,
.appended-form-control::placeholder,
.prepended-form-control::placeholder,
input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
.input-group.search .btn,
.input-group.search i {
    color: #f8fafc !important;
}
.form-control, .appended-form-control, .prepended-form-control {
    color: #f8fafc !important;
    background-color: #0d1627 !important;
    border: 1px solid #1e293b !important;
}

/* DataTables Pagination (Bootstrap 4) */
.pagination .page-item .page-link,
.dataTables_wrapper .pagination .page-link {
    background-color: #070d19 !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
}
.pagination .page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: #38bdf8 !important;
    color: #0F172A !important;
    border-color: #38bdf8 !important;
}
.pagination .page-item.disabled .page-link,
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: #0d1627 !important;
    color: #475569 !important;
    border-color: #1e293b !important;
}

/* DataTables Global Search Box Fix */
.dataTables_wrapper .dataTables_filter label {
    color: #f8fafc !important;
}
.dataTables_wrapper .dataTables_filter input {
    background-color: #070d19 !important;
    color: #f8fafc !important;
    border: 1px solid #1e293b !important;
}