/*
 * TrendingPunjabi Modern Theme v4.0
 * Clean, professional, easy on the eyes
 */

/* ==========================================
   DARK THEME (Default) - Deep blue-gray
   ========================================== */
:root {
  --bg-body: #0d1117;
  --bg-card: #161b22;
  --bg-elevated: #1c2128;
  --bg-input: #0d1117;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --accent: #e8b84a;
  --accent-hover: #d4a53f;
  --accent-soft: rgba(232,184,74,0.15);
  --link-color: #58a6ff;
  --border-color: #30363d;
  --border-light: #21262d;
  --table-header-bg: #161b22;
  --table-row-odd: #0d1117;
  --table-row-even: #161b22;
  --table-hover: #1c2128;
  --success: #3fb950;
  --shadow: rgba(0,0,0,0.3);
}

/* ==========================================
   LIGHT THEME - Clean white/gray
   ========================================== */
[data-theme="light"] {
  --bg-body: #ffffff;
  --bg-card: #f6f8fa;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --text-primary: #1f2328;
  --text-secondary: #656d76;
  --text-muted: #8b949e;
  --accent: #b8860b;
  --accent-hover: #a07608;
  --accent-soft: rgba(184,134,11,0.1);
  --link-color: #0969da;
  --border-color: #d1d9e0;
  --border-light: #e6eaef;
  --table-header-bg: #f6f8fa;
  --table-row-odd: #ffffff;
  --table-row-even: #f6f8fa;
  --table-hover: #eef1f4;
  --success: #1a7f37;
  --shadow: rgba(0,0,0,0.08);
}

/* ==========================================
   BASE STYLES
   ========================================== */
html { 
  scroll-behavior: smooth; 
  max-width: 100%;
  overflow-x: hidden;
}

body {
  color: var(--text-primary) !important;
  background: var(--bg-body) !important;
  -webkit-font-smoothing: antialiased !important;
  transition: background 0.2s, color 0.2s !important;
  max-width: 100%;
  overflow-x: hidden;
}

/* Box sizing fix - prevents padding/border from causing overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent common overflow issues */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ==========================================
   HEADINGS - Clean modern styling, no text-shadows
   ========================================== */
h1, .h1 {
  color: var(--accent) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}

h2, .h2 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

h3, .h3 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

h4, .h4 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

h5, .h5 {
  color: var(--text-primary) !important;
  text-shadow: none !important;
  font-family: inherit !important;
}

h6, .h6 {
  color: var(--text-secondary) !important;
  text-shadow: none !important;
}

/* Footer headings - gold accent */
#footer h2, #footer h3, #footer h4, #footer h5,
.footer-heading {
  color: var(--accent) !important;
  text-shadow: none !important;
  text-transform: none !important;
}

p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  text-shadow: none !important;
}

/* ==========================================
   DATA TABLES - Enhanced styling
   NOTE: Font sizes, margins, padding, and responsive
   column hiding are handled by miniAll.css - DO NOT OVERRIDE
   ========================================== */

/* Table container - subtle glass effect */
#mytable {
  background: var(--bg-card) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  margin: 2px !important;
  max-width: 100%;
}

/* Header styling - cleaner look */
#mytable thead th {
  background: #1a1a1a !important;
  color: var(--accent) !important;
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}

#mytable thead th:hover {
  background: #222 !important;
  box-shadow: none !important;
  transform: none !important;
  text-shadow: none !important;
}

/* Row styling - better contrast for readability */
#mytable tbody tr:nth-child(odd):not(.iframerow) {
  background: rgba(30, 30, 30, 0.5) !important;
}

#mytable tbody tr:nth-child(even):not(.iframerow) {
  background: rgba(15, 15, 15, 0.5) !important;
}

#mytable tbody tr:hover:not(.iframerow) {
  background: rgba(232, 184, 74, 0.1) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Cell styling - centered text, clean look */
#mytable td {
  color: var(--text-secondary) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-shadow: none !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
  font-weight: 500 !important;
}

#mytable td:hover {
  box-shadow: none !important;
  transform: none !important;
  font-size: inherit !important;
  background: transparent !important;
}

/* Rank column - bold */
#mytable td:first-child {
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* Song Name - gold accent, NOT bold */
#mytable td:nth-child(2) {
  color: var(--accent) !important;
  text-align: center !important;
  font-weight: 400 !important;
}

/* Singer Name - bold */
#mytable td:nth-child(3) {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Views - cyan color, bold */
#mytable td:nth-child(4) {
  color: #4ecdc4 !important;
  font-weight: 600 !important;
}

/* Rating - yellow/gold */
#mytable td:nth-child(5) {
  color: #ffc107 !important;
  font-weight: 600 !important;
}

/* Likes column - green */
#mytable td:nth-child(6) {
  color: #7ee787 !important;
  font-weight: 600 !important;
}

/* Link styling in table - no zoom */
#mytable td a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  font-size: inherit !important;
}

#mytable td a:hover {
  color: var(--accent) !important;
  text-decoration: none !important;
  font-size: inherit !important;
}

#mytable td:hover a,
#mytable td:hover a:hover {
  font-size: inherit !important;
  transform: none !important;
}

/* iframe rows for video */
.iframerow { display: none !important; }
.iframerow.show-video { display: table-row !important; }
.iframerow td { 
  background: var(--bg-body) !important;
  border: none !important;
}

/* ==========================================
   DataTables Controls - Search, Pagination
   ========================================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary) !important;
  text-shadow: none !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(232, 184, 74, 0.15) !important;
  outline: none !important;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all 0.2s !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(232, 184, 74, 0.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000 !important;
  font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ==========================================
   BUTTONS
   ========================================== */
#myButtons, .btn-primary, button[id="myButtons"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

#myButtons:hover, .btn-primary:hover {
  background: var(--accent-hover) !important;
}

/* ==========================================
   CARDS
   ========================================== */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px var(--shadow) !important;
}

.card-img-top {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
}

.card-body {
  padding: 16px !important;
}

.card-title {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.card-text, .text-muted {
  color: var(--text-muted) !important;
  font-size: 14px !important;
}

/* ==========================================
   FORMS - Colors only
   ========================================== */
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}

input::placeholder { color: var(--text-muted) !important; }

/* ==========================================
   FOOTER - Colors only
   ========================================== */
#footer, .footer-02 {
  background: var(--bg-card) !important;
  border-top-color: var(--border-color) !important;
}

#footer h5, #footer .footer-heading {
  color: var(--accent) !important;
}

#footer a {
  color: var(--text-secondary) !important;
}

#footer a:hover {
  color: var(--text-primary) !important;
}

.copyright {
  color: var(--text-muted) !important;
}

/* ==========================================
   NAVBAR THEME SUPPORT
   ========================================== */
[data-theme="light"] #tp-navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #d1d9e0 !important;
}

[data-theme="light"] #tp-navbar .tp-menu-link,
[data-theme="light"] #tp-navbar .tp-dropdown-link {
  color: #656d76 !important;
}

[data-theme="light"] #tp-navbar .tp-menu-link:hover,
[data-theme="light"] #tp-navbar .tp-dropdown-link:hover {
  color: #1f2328 !important;
  background: #f6f8fa !important;
}

[data-theme="light"] #tp-navbar .tp-dropdown {
  background: #ffffff !important;
  border: 1px solid #d1d9e0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

[data-theme="light"] #tp-navbar .tp-search {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] #tp-navbar .tp-search input {
  color: #1f2328 !important;
}

[data-theme="light"] #tp-navbar .tp-theme-btn,
[data-theme="light"] #tp-navbar .tp-hamburger {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] #tp-navbar .tp-hamburger span {
  background: #1f2328 !important;
}

[data-theme="light"] #tp-mobile-menu {
  background: #ffffff !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-link {
  color: #656d76 !important;
  border-bottom-color: #e6eaef !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-link:hover {
  color: #1f2328 !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-dropdown {
  background: #f6f8fa !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-sub-link {
  color: #656d76 !important;
  border-bottom-color: #e6eaef !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-search form {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] #tp-mobile-menu .tp-mobile-search input {
  color: #1f2328 !important;
}

/* ==========================================
   HOMEPAGE SPECIFIC
   ========================================== */
[data-theme="light"] .hp-hero,
[data-theme="light"] .hp-section {
  background: #ffffff !important;
}

[data-theme="light"] .hp-stats,
[data-theme="light"] .hp-badge,
[data-theme="light"] .hp-trend-card,
[data-theme="light"] .hp-artist-card,
[data-theme="light"] .hp-cat-card,
[data-theme="light"] .hp-year {
  background: #f6f8fa !important;
  border-color: #d1d9e0 !important;
}

[data-theme="light"] .hp-stat-num {
  color: #cf6a1c !important;
}

[data-theme="light"] .hp-subtitle,
[data-theme="light"] .hp-stat-label {
  color: #656d76 !important;
}

[data-theme="light"] .hp-section-header h2 {
  color: #1f2328 !important;
}

[data-theme="light"] .hp-section-header p {
  color: #656d76 !important;
}

/* ==========================================
   LIGHT THEME - TABLE OVERRIDES
   ========================================== */
[data-theme="light"] #mytable {
  background: #ffffff !important;
  border-color: #d1d9e0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #mytable thead th {
  background: #f5f0e6 !important;
  color: #8b6914 !important;
  border-bottom-color: #b8860b !important;
}

[data-theme="light"] #mytable thead th:hover {
  background: #ebe4d4 !important;
}

[data-theme="light"] #mytable tbody tr:nth-child(odd):not(.iframerow) {
  background: #ffffff !important;
}

[data-theme="light"] #mytable tbody tr:nth-child(even):not(.iframerow) {
  background: #f8f8f8 !important;
}

[data-theme="light"] #mytable tbody tr:hover:not(.iframerow) {
  background: #fffbeb !important;
  box-shadow: none !important;
}

/* Light theme cell hover - NO dark background */
[data-theme="light"] #mytable td:hover {
  background: transparent !important;
}

[data-theme="light"] #mytable td {
  color: #444 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  font-weight: 500 !important;
}

/* Rank - bold */
[data-theme="light"] #mytable td:first-child {
  color: #666 !important;
  font-weight: 600 !important;
}

/* Song name - NOT bold */
[data-theme="light"] #mytable td:nth-child(2) {
  color: #996b00 !important;
  font-weight: 400 !important;
}

/* Singer - bold */
[data-theme="light"] #mytable td:nth-child(3) {
  color: #1f2328 !important;
  font-weight: 600 !important;
}

/* Views - teal color, bold */
[data-theme="light"] #mytable td:nth-child(4) {
  color: #0d9488 !important;
  font-weight: 600 !important;
}

/* Rating - orange */
[data-theme="light"] #mytable td:nth-child(5) {
  color: #d97706 !important;
  font-weight: 600 !important;
}

/* Likes - green */
[data-theme="light"] #mytable td:nth-child(6) {
  color: #16a34a !important;
  font-weight: 600 !important;
}

/* Light theme DataTables controls - FIXED visibility */
[data-theme="light"] .dataTables_wrapper .dataTables_filter input,
[data-theme="light"] .dataTables_wrapper .dataTables_length select {
  background: #ffffff !important;
  border: 2px solid #d1d9e0 !important;
  color: #333 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #999 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_filter input:focus,
[data-theme="light"] .dataTables_wrapper .dataTables_length select:focus {
  border-color: #b8860b !important;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.1) !important;
  outline: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #ffffff !important;
  border: 1px solid #d1d9e0 !important;
  color: #333 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #fff9eb !important;
  border-color: #b8860b !important;
  color: #8b6914 !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #b8860b !important;
  border-color: #b8860b !important;
  color: #ffffff !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_length,
[data-theme="light"] .dataTables_wrapper .dataTables_filter,
[data-theme="light"] .dataTables_wrapper .dataTables_info,
[data-theme="light"] .dataTables_wrapper .dataTables_paginate {
  color: #333 !important;
  text-shadow: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_filter label,
[data-theme="light"] .dataTables_wrapper .dataTables_length label {
  color: #333 !important;
  text-shadow: none !important;
}

/* ==========================================
   MOBILE - COLUMN HIDING
   Default: Hide Likes, Show Views & Rating
   ========================================== */
@media (max-width: 768px) {
  /* Hide Likes (column 6) */
  #mytable td:nth-child(6),
  #mytable th:nth-child(6) {
    display: none !important;
  }
  
  /* Keep Views (column 4) and Rating (column 5) visible */
  #mytable td:nth-child(4),
  #mytable th:nth-child(4),
  #mytable td:nth-child(5),
  #mytable th:nth-child(5) {
    display: table-cell !important;
  }
}

/* ==========================================
   UTILITIES
   ========================================== */
.text-center { text-align: center !important; }

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile, .d-none-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop, .d-none-desktop { display: none !important; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 6px; border: 3px solid var(--bg-body); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text-primary); }

/* ==========================================
   SHARE BUTTONS FIX
   Remove ugly boxes around icons
   ========================================== */
.tp-share-btn,
.share-btn,
button.tp-share-btn,
button.share-btn {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.tp-share-btn svg,
.share-btn svg,
.tp-share-btn img,
.share-btn img {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Share button colors - force background */
.tp-share-whatsapp { background-color: #25D366 !important; }
.tp-share-twitter { background-color: #000 !important; }
.tp-share-facebook { background-color: #1877F2 !important; }
.tp-share-telegram { background-color: #0088cc !important; }
.tp-share-copy { 
  background: linear-gradient(135deg, #e8b84a, #d4a53f) !important; 
  color: #000 !important; 
}

/* ==========================================
   GLOBAL TEXT-SHADOW REMOVAL
   Override all text-shadows from miniAll.css
   ========================================== */
*, *::before, *::after {
  text-shadow: none !important;
}

/* DataTables specific - kill all shadows */
.dataTables_wrapper,
.dataTables_wrapper *,
.dataTables_wrapper label,
.dataTables_wrapper input,
.dataTables_wrapper select,
.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Light theme labels */
[data-theme="light"] label,
[data-theme="light"] .dataTables_wrapper label {
  color: #333 !important;
  text-shadow: none !important;
}

/* Links in table */
td a, td:hover a, td:hover a:hover {
  text-shadow: none !important;
}

/* Nav links */
.nav-link {
  text-shadow: none !important;
}

/* Dropdown items */
.dropdown-item {
  text-shadow: none !important;
}

/* Jumbotron */
.jumbotron h1, .jumbotron p {
  text-shadow: none !important;
}

/* Buttons */
#myButtons, #myButtons:hover, #subscribebutton, #subscribebutton:hover {
  text-shadow: none !important;
}