/*!
 * GPSRS — Painel do Cliente (WHMCS)
 * Instalar em: <raiz do WHMCS>/assets/css/gpsrs-painel.css
 * Carregado pelo hook includes/hooks/gpsrs_brand.php, DEPOIS do CSS do tema,
 * e depois de https://www.gpsrs.com.br/brand/gpsrs-brand.css (tokens --gp-*).
 *
 * Cada var() tem fallback: se o site estiver fora do ar, o painel continua na marca.
 * Seletores cobrem Bootstrap 4 / Twenty-One (base do tema gpsrsnew) e Lagom 2.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--gp-font-body, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  background: var(--gp-bg, #EEF3FA) !important;
  color: var(--gp-text, #0E1E3A);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gp-accent, #FF6A1F); color: #fff; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.card-title, .panel-title, .header-lined h1, .main-content h1 {
  font-family: var(--gp-font-display, 'Sora', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--gp-navy, #0E1E3A);
}
h5, h6, .h5, .h6 { font-weight: 700; color: var(--gp-navy, #0E1E3A); }

a { color: var(--gp-primary, #1E5BD6); }
a:hover, a:focus { color: var(--gp-primary-hover, #174BB8); }

.text-muted, small.text-muted, .help-block, .form-text { color: var(--gp-muted, #5A6B86) !important; }

/* ── Cabeçalho: mesmo vidro claro do site ─────────────────────────────── */
#header, header.header, .main-header, .app-header {
  background: rgba(238,243,250,.85) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gp-border, rgba(14,30,58,.08)) !important;
  box-shadow: none !important;
}
#header .topbar, .header .topbar, .main-header .top { background: transparent !important; border-bottom: 1px solid var(--gp-border, rgba(14,30,58,.08)); }
#header .topbar, #header .topbar a, #header .topbar .btn { color: var(--gp-muted, #5A6B86) !important; font-size: 13px; }

#header .navbar, .header .navbar, .main-header .navbar { background: transparent !important; }
.navbar-brand img, .logo-img, .main-header .logo img { max-height: 28px !important; width: auto; }

/* Menu principal */
#header .main-navbar-wrapper, .header .main-navbar-wrapper, .main-navbar-wrapper {
  background: transparent !important; border: 0 !important;
}
#header .navbar-nav > li > a, #header .navbar-nav .nav-link,
.main-navbar-wrapper .navbar-nav .nav-link, .app-nav .nav-link, .main-menu > li > a {
  color: var(--gp-muted, #5A6B86) !important;
  font-weight: 600 !important; font-size: 14px !important;
  border-radius: var(--gp-radius-sm, 10px);
}
#header .navbar-nav > li > a:hover, #header .navbar-nav .nav-link:hover,
#header .navbar-nav .active > .nav-link, .main-navbar-wrapper .navbar-nav .active > .nav-link,
.app-nav .nav-link:hover, .app-nav .active > .nav-link {
  color: var(--gp-navy, #0E1E3A) !important; background: rgba(14,30,58,.04) !important;
}
.dropdown-menu {
  border: 1px solid var(--gp-border, rgba(14,30,58,.08)) !important;
  border-radius: 14px !important; padding: 6px !important;
  box-shadow: 0 24px 48px -20px rgba(14,30,58,.35) !important;
}
.dropdown-item { border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--gp-text-2, #3A4A66); padding: 9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gp-bg, #EEF3FA); color: var(--gp-navy, #0E1E3A); }
.dropdown-item.active, .dropdown-item:active { background: var(--gp-primary-soft, #EAF1FB); color: var(--gp-primary, #1E5BD6); }

/* Link externo "Rastreamento" adicionado pelo hook */
#header .navbar-nav [menuItemName="gpsrs-rastreamento"] > a,
.navbar-nav li[menuitemname="gpsrs-rastreamento"] > a { color: var(--gp-primary, #1E5BD6) !important; font-weight: 700 !important; }

/* Breadcrumb */
.master-breadcrumb, .breadcrumb-wrapper { background: transparent !important; border: 0 !important; }
.breadcrumb { background: transparent !important; font-size: 13px; padding-left: 0; }
.breadcrumb-item a { color: var(--gp-muted, #5A6B86); }
.breadcrumb-item.active { color: var(--gp-navy, #0E1E3A); font-weight: 600; }

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn { font-weight: 700 !important; border-radius: var(--gp-radius-sm, 10px) !important; transition: background .2s, transform .2s, box-shadow .2s; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(30,91,214,.25) !important; }
.btn-lg { border-radius: var(--gp-radius, 12px) !important; padding: 13px 22px; }

.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--gp-primary, #1E5BD6) !important; border-color: var(--gp-primary, #1E5BD6) !important; color: #fff !important;
}
.btn-primary:hover { background: var(--gp-primary-hover, #174BB8) !important; border-color: var(--gp-primary-hover, #174BB8) !important; }

/* Ações que convertem (pagar, finalizar pedido, entrar) = laranja, como os CTAs do site */
.btn-success, #btnCompleteOrder, .btn-checkout, #checkout, .invoice-container .btn-success,
.payment-btn-container .btn, input[type="submit"].btn-success, .btn-accent,
#login, .login-form .btn-primary, form[action*="login"] button[type="submit"] {
  background: var(--gp-accent, #FF6A1F) !important; border-color: var(--gp-accent, #FF6A1F) !important; color: #fff !important;
  box-shadow: 0 16px 30px -14px rgba(255,106,31,.7) !important;
}
.btn-success:hover, #btnCompleteOrder:hover, .btn-checkout:hover, #login:hover,
.login-form .btn-primary:hover, form[action*="login"] button[type="submit"]:hover {
  background: var(--gp-accent-hover, #E8480A) !important; border-color: var(--gp-accent-hover, #E8480A) !important; transform: translateY(-1px);
}

.btn-default, .btn-secondary, .btn-light, .btn-outline-primary {
  background: var(--gp-primary-soft, #EAF1FB) !important; border-color: transparent !important; color: var(--gp-primary, #1E5BD6) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover { background: #DCE6F6 !important; }
.btn-info    { background: var(--gp-primary, #1E5BD6) !important; border-color: var(--gp-primary, #1E5BD6) !important; }
.btn-danger  { background: var(--gp-danger, #DC2626) !important;  border-color: var(--gp-danger, #DC2626) !important; }
.btn-link    { color: var(--gp-primary, #1E5BD6) !important; font-weight: 600 !important; }

/* ── Cards / painéis ──────────────────────────────────────────────────── */
.card, .panel, .card-sidebar, .client-home-cards .card, .tile, .well, .panel-default {
  background: var(--gp-surface, #fff) !important;
  border: 1px solid var(--gp-border, rgba(14,30,58,.08)) !important;
  border-radius: var(--gp-radius-lg, 18px) !important;
  box-shadow: none !important;
}
.card-header, .panel-heading, .card-footer, .panel-footer {
  background: transparent !important; border-color: var(--gp-border, rgba(14,30,58,.08)) !important;
}
.card-header .card-title, .panel-heading .panel-title { font-size: 16px !important; }
.card-header:first-child { border-radius: var(--gp-radius-lg, 18px) var(--gp-radius-lg, 18px) 0 0 !important; }

/* Tiles da home (Serviços / Faturas / Tickets / Domínios) */
.tiles .tile, .client-home-panels .tile {
  border-radius: var(--gp-radius-md, 16px) !important; transition: transform .2s, box-shadow .2s;
}
.tiles .tile:hover { transform: translateY(-3px); box-shadow: var(--gp-shadow-card, 0 18px 36px -16px rgba(14,30,58,.18)) !important; }
.tiles .tile .stat { font-family: var(--gp-font-display, 'Sora', sans-serif); font-weight: 800; color: var(--gp-navy, #0E1E3A); }
.tiles .tile i, .tiles .tile .fas, .tiles .tile .far { color: var(--gp-primary, #1E5BD6) !important; opacity: 1 !important; }
.tiles .tile .highlight, .tile .highlight { background: var(--gp-primary, #1E5BD6) !important; }
.tiles .tile .highlight.bg-color-red, .tile .bg-color-red { background: var(--gp-accent, #FF6A1F) !important; }

/* Cores utilitárias do tema → paleta GPSRS */
.primary-bg-color, .bg-color-blue, .bg-primary { background-color: var(--gp-primary, #1E5BD6) !important; }
.bg-color-gold, .bg-color-orange, .bg-warning   { background-color: var(--gp-accent, #FF6A1F) !important; }
.bg-color-green, .bg-success                    { background-color: var(--gp-success, #16A34A) !important; }
.bg-color-red, .bg-danger                       { background-color: var(--gp-danger, #DC2626) !important; }
.text-primary { color: var(--gp-primary, #1E5BD6) !important; }
.text-success { color: var(--gp-success, #16A34A) !important; }
.text-danger  { color: var(--gp-danger, #DC2626) !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.card-sidebar .list-group-item, .panel-sidebar .list-group-item {
  border: 0 !important; border-radius: 9px !important; margin: 2px 6px;
  font-weight: 600; font-size: 14px; color: var(--gp-text-2, #3A4A66);
}
.card-sidebar .list-group-item:hover, .panel-sidebar .list-group-item:hover { background: var(--gp-bg, #EEF3FA) !important; color: var(--gp-navy, #0E1E3A); }
.card-sidebar .list-group-item.active, .panel-sidebar .list-group-item.active,
.list-group-item.active {
  background: var(--gp-primary-soft, #EAF1FB) !important; color: var(--gp-primary, #1E5BD6) !important; border-color: transparent !important;
}
.list-group-item .badge, .card-sidebar .badge { background: var(--gp-primary, #1E5BD6); color: #fff; border-radius: 100px; }

/* ── Formulários ──────────────────────────────────────────────────────── */
.form-control, .custom-select, select.form-control, .input-group-text {
  border: 1.5px solid var(--gp-border-strong, rgba(14,30,58,.14)) !important;
  border-radius: 11px !important; min-height: 46px;
  font-family: inherit; font-size: 15px; color: var(--gp-text, #0E1E3A);
  box-shadow: none !important;
}
.input-group > .form-control:not(:last-child), .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child), .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group-text { background: #F6F9FD !important; color: var(--gp-subtle, #8A99B0); }
.form-control:focus, .custom-select:focus { border-color: var(--gp-primary, #1E5BD6) !important; box-shadow: 0 0 0 3px rgba(30,91,214,.15) !important; }
.form-control::placeholder { color: var(--gp-subtle, #8A99B0); }
label, .col-form-label, .control-label { font-weight: 600; font-size: 13.5px; color: var(--gp-text-2, #3A4A66); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--gp-primary, #1E5BD6) !important; border-color: var(--gp-primary, #1E5BD6) !important; }
.is-invalid, .has-error .form-control { border-color: var(--gp-danger, #DC2626) !important; }

/* ── Tabelas (faturas, serviços, tickets) ─────────────────────────────── */
.table, .table-list { color: var(--gp-text, #0E1E3A); }
.table thead th, .table-list thead th {
  background: #F6F9FD !important; border-bottom: 1px solid var(--gp-border, rgba(14,30,58,.08)) !important; border-top: 0 !important;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gp-muted, #5A6B86);
}
.table td, .table-list td { border-color: var(--gp-border, rgba(14,30,58,.08)) !important; vertical-align: middle !important; }
.table-hover tbody tr:hover, .table-list tbody tr:hover { background: #F6F9FD !important; }
.dataTables_wrapper .dataTables_filter input { border-radius: 10px; }
.page-item.active .page-link { background: var(--gp-primary, #1E5BD6) !important; border-color: var(--gp-primary, #1E5BD6) !important; }
.page-link { color: var(--gp-primary, #1E5BD6); border-radius: 8px !important; margin: 0 2px; }

/* ── Status (pílulas iguais aos badges do site) ───────────────────────── */
.label, .badge, span.status, .status {
  border-radius: 100px !important; font-weight: 700 !important; font-size: 11.5px !important; padding: 5px 11px !important;
  text-transform: none; letter-spacing: 0;
}
.status-paid, .status-active, .status-completed, .status-answered, .label-success, .badge-success, .status-open {
  background: var(--gp-success-soft, #E7F8EE) !important; color: var(--gp-success, #16A34A) !important;
}
.status-unpaid, .status-overdue, .status-cancelled, .status-terminated, .status-fraud, .label-danger, .badge-danger {
  background: var(--gp-danger-soft, #FDECEC) !important; color: var(--gp-danger, #DC2626) !important;
}
.status-pending, .status-suspended, .status-customer-reply, .status-in-progress, .status-on-hold, .label-warning, .badge-warning {
  background: var(--gp-warning-soft, #FFF4E0) !important; color: var(--gp-warning, #D97706) !important;
}
.status-closed, .status-refunded, .status-collections, .label-default, .badge-secondary {
  background: #EEF1F6 !important; color: var(--gp-muted, #5A6B86) !important;
}
.label-info, .badge-info, .badge-primary { background: var(--gp-primary-soft, #EAF1FB) !important; color: var(--gp-primary, #1E5BD6) !important; }

/* ── Alertas ──────────────────────────────────────────────────────────── */
.alert { border: 0 !important; border-radius: 14px !important; font-weight: 500; }
.alert-info    { background: var(--gp-primary-soft, #EAF1FB) !important; color: #173F8F !important; }
.alert-success { background: var(--gp-success-soft, #E7F8EE) !important; color: #11743A !important; }
.alert-warning { background: var(--gp-warning-soft, #FFF4E0) !important; color: #8A4B06 !important; }
.alert-danger  { background: var(--gp-danger-soft, #FDECEC)  !important; color: #9B1C1C !important; }

/* ── Fatura (viewinvoice) ─────────────────────────────────────────────── */
.invoice-container { border-radius: var(--gp-radius-lg, 18px); border: 1px solid var(--gp-border, rgba(14,30,58,.08)); }
.invoice-status .paid   { color: var(--gp-success, #16A34A) !important; }
.invoice-status .unpaid { color: var(--gp-accent, #FF6A1F) !important; }

/* ── Login / cadastro ─────────────────────────────────────────────────── */
.login-form .card, .logincontainer, .login-wrapper .card { border-radius: var(--gp-radius-xl, 24px) !important; }

/* Painel escuro lateral do login do tema gpsrsnew → mesmo gradiente do bloco "Cotação" do site */
.login-aside, .login-side, .auth-aside, .login-hero {
  background: var(--gp-grad-dark, linear-gradient(155deg,#0E3A9E,#13294B)) !important; color: #fff;
}

/* ── Rodapé: o rodapé oficial GPSRS é injetado pelo hook (.gp-footer).
      O rodapé antigo do tema é escondido para não duplicar. ─────────── */
body.gp-has-brand-footer #footer:not(.gp-footer),
body.gp-has-brand-footer footer.footer:not(.gp-footer),
body.gp-has-brand-footer .main-footer:not(.gp-footer),
body.gp-has-brand-footer footer:not(.gp-footer) { display: none !important; }
.gp-footer a:hover { text-decoration: none; }

/* Voltar ao topo / banner de cookies */
.back-to-top, #btnBackToTop { background: var(--gp-navy, #0E1E3A) !important; border-radius: 12px !important; }
.cookie-bar, .cookie-notice, #cookieConsent, .cookie-consent {
  background: var(--gp-navy, #0E1E3A) !important; color: #fff !important; border-radius: 14px !important;
}
.cookie-bar .btn, .cookie-notice .btn, #cookieConsent .btn { background: var(--gp-accent, #FF6A1F) !important; border-color: var(--gp-accent, #FF6A1F) !important; color: #fff !important; }