/*
 * Premium Override Styles
 *
 * This stylesheet defines an extended color palette and component styles for
 * UltraVision Pro. It overrides the default theme variables with deeper
 * shades and warm gold accents to create a premium look and feel. The
 * variables declared here are referenced throughout the application via
 * CSS custom properties, ensuring that updates cascade consistently.
 */

:root {
  /* Dark base for the application background */
  --uvp-bg: #0f1320;
  /* Primary panel background used for cards and containers */
  --uvp-panel: #131a2b;
  /* Secondary panel background for alternating rows and inputs */
  --uvp-panel-2: #0c1424;
  /* Primary text color */
  --uvp-text: #e8edf6;
  /* Secondary/muted text color */
  --uvp-muted: #a9b5c6;
  /* Primary gold highlight */
  --uvp-gold: #f2c94c;
  /* Darker gold for gradients and focus */
  --uvp-gold-600: #d4a017;

  /* Silver accent colour used for dual‑tone logo text.  This value
     complements the gold highlight and provides a contrasting metallic
     sheen when rendering the brand name. */
  --uvp-silver: #c0c0c0;

  /* Map common variables used by existing templates to the premium palette */
  /* These aliases ensure that legacy pages (e.g., login) automatically pick up the
     premium colours without requiring manual updates. */
  --body-bg: var(--uvp-bg);
  --card-bg: var(--uvp-panel);
  --primary-color: var(--uvp-gold);
  --text-color: var(--uvp-text);
}

/*
 * Reduce the overall font size to better fit more information on screen.
 * This scales down all rem-based typographic elements, resulting in a
 * slightly zoomed-out appearance without adjusting individual components.
 */
html {
  /* Further reduce the base font size to make the entire interface more compact.
     Dropped from 12px to 10px to make the UI feel even more "micro" while still
     preserving readability on mobile devices. */
  font-size: 10px;
}

/* Global background and text colors */
body {
  background: var(--uvp-bg) !important;
  color: var(--uvp-text) !important;
}

/* Universal card/panel styling */
.card,
.panel,
.box,
.tile,
.quick-action,
.stats,
.widget,
.card-stats {
  background: var(--uvp-panel) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Headings and section titles */
.card h1,
.card h2,
.card h3,
.section-title,
.card-title,
.quick-action .card-label,
.stats .label,
.widget .title {
  color: var(--uvp-gold) !important;
}

/* Badges and labels with gold accent */
.badge,
.label,
.label-pill,
.status-pill {
  background: rgba(242, 201, 76, 0.15) !important;
  color: var(--uvp-gold) !important;
  border: 1px solid rgba(242, 201, 76, 0.35) !important;
}

/* Primary, warning and custom gold buttons */
.btn-primary,
.btn-warning,
.btn-gold {
  background: linear-gradient(180deg, var(--uvp-gold), var(--uvp-gold-600)) !important;
  color: #111 !important;
  border: none !important;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-gold:hover {
  filter: brightness(1.05);
}

/* Alternating table rows */
.table tbody tr:nth-of-type(odd),
table tbody tr:nth-of-type(odd) {
  background: var(--uvp-panel-2) !important;
}

.table tbody tr:nth-of-type(even),
table tbody tr:nth-of-type(even) {
  background: #0b1422 !important;
}

/*
 * Reduce the font size and padding for DataTables cells.  This ensures that
 * tables display more rows on screen, matching the "micro" design request.
 */
table.dataTable th,
table.dataTable td {
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
}

/*
 * Ensure that icons and headings within quick action cards and KPI cards adopt
 * the primary gold colour.  Without this override, many cards still use
 * Bootstrap or Tabler default colours (e.g. blue, green).  We restrict
 * selectors to the card-link and card-sm components to avoid overriding
 * status badges or other decorative icons in tables.
 */
.card.card-link i, .card.card-sm i {
  color: var(--uvp-gold) !important;
}
.card.card-link .h3, .card.card-sm .h5 {
  color: var(--uvp-gold) !important;
}

/*
 * Brand and logo styling
 *
 * The .logo-text component renders the UltraVision Pro name as a single
 * element with a gold-to-silver gradient.  The gradient splits at 60%
 * across the text, colouring the “UltraVision” portion gold and the
 * “PRO” portion silver.  When combined with the .shimmer modifier,
 * a moving highlight passes across the letters to create a metallic
 * reflection effect.  Use nested spans with the class .logo-pro to
 * isolate the silver portion if needed.  Additional modifiers like
 * .nav-logo or .login-logo can adjust the font size for specific
 * contexts (e.g. navbar or login screen).
 */
.logo-text {
  font-weight: 800;
  /* Gradient splits: first 60% gold, remainder silver */
  background: linear-gradient(90deg, var(--uvp-gold) 0%, var(--uvp-gold) 60%, var(--uvp-silver) 60%, var(--uvp-silver) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  position: relative;
}

/* Shimmer effect overlays a moving gradient across the text.  Use
   alongside .logo-text to simulate a light sweep on metallic lettering. */
.logo-text.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-15deg);
  animation: shimmer 6s infinite;
}

/*
 * Logo image animations
 *
 * To support the new dual-tone UltraVision Pro logo, we define classes
 * for nav, profile and login contexts. Each image will animate its
 * brightness subtly to simulate a metallic reflection. The images are
 * responsive: widths are set relative to their containers while the
 * height auto-adjusts to preserve aspect ratio. The shared keyframe
 * creates a gentle pulsing effect.
 */
.nav-logo-img {
  height: 42px;
  width: auto;
  animation: logoGlow 6s infinite ease-in-out;
}
.profile-logo-img {
  width: 70%;
  max-width: 180px;
  height: auto;
  animation: logoGlow 6s infinite ease-in-out;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.login-logo-img {
  width: 60%;
  max-width: 200px;
  height: auto;
  animation: logoGlow 6s infinite ease-in-out;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@keyframes logoGlow {
  0% { filter: brightness(0.85); }
  50% { filter: brightness(1.15); }
  100% { filter: brightness(0.85); }
}

@keyframes shimmer {
  from { left: -100%; }
  to   { left: 100%; }
}

/* Size modifiers for the logo text in different contexts */
.nav-logo { font-size: 1.6rem; line-height: 1; }
.profile-logo { font-size: 2.0rem; line-height: 1.1; }
.login-logo { font-size: 2.6rem; line-height: 1.1; }
.logo-text .logo-pro { /* ensure nested PRO inherits silver portion */ color: inherit; }

/* For the login page social icons and other anchor icons, adopt the gold colour */
.social a {
  color: var(--uvp-gold) !important;
}

/*
 * Colour coding for primary navigation items.  Each section under the main
 * navigation can be assigned its own background tint to visually separate
 * functions (Clientes, Testes, Revendedores, etc.).  These tints are
 * semi-transparent to preserve the premium dark theme.  Hover states
 * slightly lighten the background to indicate interactivity.
 */
.nav-link.nav-clientes {
  background-color: rgba(34, 52, 82, 0.6) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-testes {
  background-color: rgba(58, 46, 106, 0.6) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-revendedores {
  background-color: rgba(44, 75, 62, 0.6) !important;
  color: var(--uvp-gold) !important;
}

.nav-link.nav-clientes:hover,
.nav-link.nav-testes:hover,
.nav-link.nav-revendedores:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/*
 * Universal gradient logo styling and shimmer effect.
 * This class applies a gold-to-silver gradient across the text and
 * provides an optional shimmer animation. The gradient stops are
 * defined so that approximately the first two thirds of the text
 * appear gold (based on the length of "UltraVision") and the
 * remaining part ("PRO") appears silver. The shimmer animation
 * sweeps the gradient across the text to add a subtle glowing effect.
 */
.logo-text {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  background: linear-gradient(90deg, var(--uvp-gold) 0%, var(--uvp-gold) 60%, #b3b3b3 60%, #b3b3b3 100%);
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
  line-height: 1;
}
.logo-text.shimmer {
  animation: shimmer 4s infinite linear;
  background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Additional nav colour assignments for other subsections */
.nav-link.nav-canais {
  background-color: rgba(20, 50, 80, 0.6) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-filmes {
  background-color: rgba(60, 30, 30, 0.6) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-series {
  background-color: rgba(30, 30, 60, 0.6) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-categorias {
  background-color: rgba(50, 30, 50, 0.6) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-upload {
  background-color: rgba(50, 50, 30, 0.6) !important;
  color: var(--uvp-gold) !important;
}

/* Hover effect for these nav links: a lighter translucent highlight */
.nav-link.nav-canais:hover,
.nav-link.nav-filmes:hover,
.nav-link.nav-series:hover,
.nav-link.nav-categorias:hover,
.nav-link.nav-upload:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Additional nav colours for other main menu sections.  These backgrounds are
   subtle semi-transparent tints that hint at the underlying category. */
.nav-link.nav-canais {
  background-color: rgba(37, 99, 235, 0.35) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-filmes {
  background-color: rgba(91, 33, 182, 0.35) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-series {
  background-color: rgba(236, 72, 153, 0.35) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-categorias {
  background-color: rgba(59, 130, 246, 0.35) !important;
  color: var(--uvp-gold) !important;
}
.nav-link.nav-upload {
  background-color: rgba(6, 182, 212, 0.35) !important;
  color: var(--uvp-gold) !important;
}

.nav-link.nav-canais:hover,
.nav-link.nav-filmes:hover,
.nav-link.nav-series:hover,
.nav-link.nav-categorias:hover,
.nav-link.nav-upload:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/*
 * Optional alternate theme.  When the body has the class theme-teal, the
 * application switches to a teal/azure accent instead of gold.  This
 * demonstrates how additional colour schemes can be defined without
 * modifying the base markup.  To activate, add class="theme-teal" to the
 * <body> element.  Developers can create further themes by defining
 * additional classes and overriding the same CSS variables.
 */
body.theme-teal {
  --uvp-bg: #0d1c2f;
  --uvp-panel: #132a40;
  --uvp-panel-2: #0c2233;
  --uvp-text: #e8edf6;
  --uvp-muted: #a9b5c6;
  --uvp-gold: #00bcd4;
  --uvp-gold-600: #0097a7;
}

/* Inputs, selects and textareas */
input,
select,
textarea {
  background: var(--uvp-panel-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--uvp-text) !important;
  border-radius: 12px !important;
}

/* Quick action cards with subtle gradient and lift effect on hover */
.quick-action {
  background: linear-gradient(135deg, #201a30 0%, #131a2b 100%) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45) !important;
}

/* Section headings */
h1,
h2,
h3,
.section-title {
  letter-spacing: 0.2px;
  font-weight: 800;
}

/* Muted text */
.small,
.muted,
.text-muted {
  color: var(--uvp-muted) !important;
}

/* Compact DataTable rows and cells
   This reduces padding and font size within data tables to accommodate
   more rows on screen without scrolling. */
table.dataTable td,
table.dataTable th {
  padding: 0.45rem 0.6rem !important;
  font-size: 0.75rem !important;
}

/*
 * Navigation and sidebar styling
 *
 * Redefine the appearance of the side navigation bar and offcanvas menu to
 * better reflect the premium theme. Links adopt muted colours by default
 * and highlight in gold on hover or when active. Icons are spaced
 * consistently and sized for clarity.
 */
.navigation,
.menu,
.offcanvas-body {
  background: var(--uvp-panel) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.navigation .list a,
.nav-link,
.offcanvas-body .nav-item a {
  color: var(--uvp-muted) !important;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
  font-weight: 500;
}

.navigation .list a.active,
.navigation .list a:hover,
.nav-link:hover,
.offcanvas-body .nav-item a:hover {
  background: rgba(242, 201, 76, 0.15) !important;
  color: var(--uvp-gold) !important;
}

.navigation .list a i,
.nav-link i,
.offcanvas-body .nav-item a i {
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

/*
 * Typography: apply Inter throughout the application for consistency.
 */
body,
h1, h2, h3,
.card,
.panel,
.table,
input,
select,
textarea {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}