/* ============================================================
   Teleflix custom.css
   Overrides carregados APOS o style.css em includes/header.php
   ============================================================ */

:root {
  --tf-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--tf-font);
}

/* ------------------------------------------------
   CARDS DE INDICADORES (Dashboard / KPI)
   ------------------------------------------------ */
.tf-kpi-card {
  border: none;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 42, 67, 0.07);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

.tf-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(16, 42, 67, 0.14);
}

.tf-kpi-body {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.2rem 1.15rem !important;
}

.tf-kpi-icon {
  width: 2.95rem;
  height: 2.95rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.tf-kpi-icon.grad-green { background: linear-gradient(135deg, #00b09b, #96c93d); }
.tf-kpi-icon.grad-blue  { background: linear-gradient(135deg, #0067aa, #1976d2); }
.tf-kpi-icon.grad-purple{ background: linear-gradient(135deg, #7c00ff, #b388ff); }
.tf-kpi-icon.grad-orange{ background: linear-gradient(135deg, #ff512f, #dd2476); }
.tf-kpi-icon.grad-red   { background: linear-gradient(135deg, #f40018, #f26f7c); }
.tf-kpi-icon.grad-gray  { background: linear-gradient(135deg, #414345, #232526); }
.tf-kpi-icon.grad-teal  { background: linear-gradient(135deg, #11998e, #38ef7d); }
.tf-kpi-icon.grad-cyan  { background: linear-gradient(135deg, #0575e6, #021b79); }
.tf-kpi-icon.grad-maroon{ background: linear-gradient(135deg, #b31217, #e52d27); }
.tf-kpi-icon.grad-gold  { background: linear-gradient(135deg, #f7971e, #ffd200); }
.tf-kpi-icon.grad-navy  { background: linear-gradient(135deg, #2c3e50, #4ca1af); }
.tf-kpi-icon.grad-slate { background: linear-gradient(135deg, #485563, #29323c); }

.tf-kpi-value-sm {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.tf-kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #001737;
  margin: 0;
}

.tf-kpi-title {
  font-size: .77rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a94a6;
  margin-top: .2rem;
}

/* ------------------------------------------------
   PERFIL - dropdown do usuario
   ------------------------------------------------ */
.horizontal-menu .top-navbar .navbar-menu-wrapper .navbar-nav .nav-item .tf-profile-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #001737;
  text-decoration: none;
}

.horizontal-menu .top-navbar .navbar-menu-wrapper .navbar-nav .nav-item .tf-profile-name {
  font-weight: 700;
  font-size: .95rem;
  color: #001737;
}

@media (max-width: 767px) {
  .horizontal-menu .top-navbar .navbar-menu-wrapper .navbar-nav .nav-item .tf-profile-name {
    display: none;
  }
}

.tf-profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0067aa, #1976d2);
  color: #ffffff;
  font-size: .95rem;
  flex-shrink: 0;
}

.tf-profile-caret {
  color: #9aa5b5;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
}

.tf-profile-menu {
  border: none !important;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(16, 42, 67, 0.16) !important;
  padding: .55rem !important;
  min-width: 235px;
  margin-top: .45rem !important;
}

.tf-profile-menu .tf-profile-title-box {
  padding: .35rem .75rem .6rem;
  border-bottom: 1px solid #eef2f6;
  margin-bottom: .35rem;
}

.tf-profile-menu .tf-profile-username {
  font-size: .95rem;
  font-weight: 700;
  color: #001737;
}

.tf-profile-menu .tf-profile-email {
  font-size: .76rem;
  color: #8a94a6;
  word-break: break-all;
}

.tf-profile-menu .dropdown-item {
  border-radius: 10px;
  padding: .55rem .9rem;
  font-size: .88rem;
  font-weight: 500;
  color: #3a5277;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.tf-profile-menu .dropdown-item i {
  width: 1.05rem;
  text-align: center;
  font-size: .95rem;
  color: #0067aa;
}

.tf-profile-menu .dropdown-item:hover,
.tf-profile-menu .dropdown-item:focus {
  background: #eef6ff;
  color: #0067aa;
}

.tf-profile-menu .dropdown-item.tf-danger {
  color: #f40018;
}

.tf-profile-menu .dropdown-item.tf-danger i {
  color: #f40018;
}

.tf-profile-menu .dropdown-item.tf-danger:hover,
.tf-profile-menu .dropdown-item.tf-danger:focus {
  background: #fff0f1;
  color: #f40018;
}

.tf-profile-menu .dropdown-divider {
  margin: .45rem 0 !important;
}

/* ------------------------------------------------
   MENU SUPERIOR (bottom-navbar) - fonte e icones
   ------------------------------------------------ */
.horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link {
  font-family: var(--tf-font);
}

.horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .menu-icon {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: .55rem;
}

.horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link .menu-title {
  font-size: .92rem;
  letter-spacing: .01em;
}

/* ------------------------------------------------
   FOOTER - largura alinhada ao content-wrapper
   ------------------------------------------------ */
.footer {
  padding-left: var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
}

/* ------------------------------------------------
   BOTÃO VOLTAR AO TOPO (global - footer_copyright)
   ------------------------------------------------ */
.tf-btn-topo {
  position: fixed;
  right: 1.35rem;
  bottom: 1.35rem;
  z-index: 1050;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #0067aa, #1976d2);
  box-shadow: 0 6px 20px rgba(0, 103, 170, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.tf-btn-topo.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tf-btn-topo:hover,
.tf-btn-topo:focus {
  background: linear-gradient(135deg, #005288, #1565c0);
  box-shadow: 0 8px 24px rgba(0, 103, 170, 0.45);
  outline: none;
}

.tf-btn-topo i {
  font-size: 1.15rem;
  line-height: 1;
}