/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE THEME OVERRIDE  (profile-theme-override.css)
   Loads AFTER css/styles.css and css/profile-theme.css.
   Its only job is to beat the legacy dark-green ".profile-page" /
   "body.profile-theme-active .profile-page" rules baked into styles.css,
   which otherwise win on specificity and paint the card green/navy.
   Every value here just re-points to the clean --pt-* variables so the
   editor still controls everything.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Page: keep the site's striped background, no dark/green flood ── */
html body.profile-theme-active .main-content.profile-page,
html body .main-content.profile-page,
html body.profile-theme-active .profile-page,
html body .profile-page {
  background: transparent !important;
  background-image: none !important;
  color: var(--pt-widget-text, #1a1a1a) !important;
}

/* ── The blue card shell ── */
html body .profile-page .w2-profile-card,
html body.profile-theme-active .profile-page .w2-profile-card {
  background: var(--pt-card-bg, #1565c0) !important;
  border: none !important;
  border-radius: var(--pt-card-radius, 8px) !important;
  max-width: var(--pt-card-max-width, 987px) !important;
  margin: 0 auto !important;
}

/* ── Channel header: blue gradient ── */
html body .profile-page .w2-channel-header,
html body.profile-theme-active .profile-page .w2-channel-header {
  background: linear-gradient(to bottom,
    var(--pt-header-top, #1e88e5) 0%,
    var(--pt-header-bottom, #1565c0) 100%) !important;
  border: none !important;
  border-bottom: 2px solid var(--pt-header-border, rgba(0,0,0,0.35)) !important;
  border-radius: 0 !important;
}

html body .profile-page .w2-head-copy h2,
html body.profile-theme-active .profile-page .w2-head-copy h2 {
  color: var(--pt-username-color, #fff) !important;
}
html body .profile-page .w2-head-copy .channel-meta,
html body.profile-theme-active .profile-page .w2-head-copy .channel-meta {
  color: var(--pt-meta-color, rgba(255,255,255,0.75)) !important;
}

/* ── Tabs: blue gradient ── */
html body .profile-page .w2-channel-tabs,
html body.profile-theme-active .profile-page .w2-channel-tabs {
  background: linear-gradient(to bottom,
    var(--pt-tabs-top, #1565c0) 0%,
    var(--pt-tabs-bottom, #0d47a1) 100%) !important;
  border: none !important;
  border-bottom: 2px solid var(--pt-tabs-border, rgba(0,0,0,0.4)) !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}
html body .profile-page .w2-channel-tabs a,
html body.profile-theme-active .profile-page .w2-channel-tabs a {
  color: var(--pt-tab-color, rgba(255,255,255,0.8)) !important;
}
html body .profile-page .w2-channel-tabs a.active,
html body.profile-theme-active .profile-page .w2-channel-tabs a.active {
  color: var(--pt-tab-active-color, #fff) !important;
  border-bottom: none !important;
}

/* ── Layout grid: 240px left + flexible right, padded so widgets float ── */
html body .profile-page .channel-layout.w2-home-grid,
html body.profile-theme-active .profile-page .channel-layout.w2-home-grid {
  display: grid !important;
  grid-template-columns: 252px 1fr !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding: 12px !important;
  background: transparent !important;
  align-items: start !important;
}
html body .profile-page .channel-col,
html body.profile-theme-active .profile-page .channel-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
html body .profile-page .w2-left-col,
html body.profile-theme-active .profile-page .w2-left-col {
  background: transparent !important;
  border-right: none !important;
}
html body .profile-page .w2-right-col,
html body.profile-theme-active .profile-page .w2-right-col {
  background: transparent !important;
}

/* ── Widgets (yt-box): SEPARATED cards — always have a gap, square body,
      drop shadow so each one floats on the blue card. ── */
html body .profile-page .yt-box.w2-widget,
html body.profile-theme-active .profile-page .yt-box.w2-widget {
  background: var(--pt-widget-body-bg, #fff) !important;
  border: 1px solid rgba(0,0,0,0.35) !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
  margin: 0 !important;
  overflow: hidden !important;
  /* Chamfer the whole widget's top-right corner so the notch shows the
     blue card behind it instead of a white triangle. */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) !important;
}

/* Widget header bar: blue gradient with the TOP-RIGHT corner CUT OFF
   (chamfered) — the classic Web 2.0 notched ribbon. */
html body .profile-page .yt-box.w2-widget h3.w2-widget-header,
html body.profile-theme-active .profile-page .yt-box.w2-widget h3.w2-widget-header,
html body .profile-page .w2-widget-header,
html body.profile-theme-active .profile-page .w2-widget-header {
  position: relative !important;
  background: linear-gradient(to bottom,
    var(--pt-widget-hdr-top, #29b6f6) 0%,
    var(--pt-widget-hdr-bottom, #0277bd) 100%) !important;
  color: var(--pt-widget-hdr-color, #fff) !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.4) !important;
  border-radius: 0 !important;
  font-size: var(--pt-widget-hdr-size, 13px) !important;
  font-weight: bold !important;
  padding: 8px 14px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
  /* Cut off the top-right corner by 16px */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) !important;
}

/* Widget body: white panel, dark text */
html body .profile-page .w2-widget .w2-widget-body,
html body.profile-theme-active .profile-page .w2-widget .w2-widget-body {
  background: var(--pt-widget-body-bg, #fff) !important;
  border: none !important;
  color: var(--pt-widget-text, #1a1a1a) !important;
}
html body .profile-page .yt-box.w2-widget p,
html body .profile-page .yt-box.w2-widget li,
html body.profile-theme-active .profile-page .yt-box.w2-widget p,
html body.profile-theme-active .profile-page .yt-box.w2-widget li {
  color: var(--pt-widget-text, #1a1a1a) !important;
  border-top: none !important;
}

/* Info rows + console list dark text on white */
html body .profile-page .w2-info-row,
html body.profile-theme-active .profile-page .w2-info-row {
  color: var(--pt-info-label-color, #1a1a1a) !important;
  border-bottom: 1px solid var(--pt-widget-divider, rgba(0,0,0,0.10)) !important;
}
html body .profile-page .w2-info-value,
html body.profile-theme-active .profile-page .w2-info-value {
  color: var(--pt-info-value-color, #444) !important;
}
html body .profile-page .w2-console-item,
html body.profile-theme-active .profile-page .w2-console-item {
  color: var(--pt-console-text, #1a1a1a) !important;
  border-top: 1px solid var(--pt-console-divider, rgba(0,0,0,0.10)) !important;
}
html body .profile-page .w2-console-name,
html body.profile-theme-active .profile-page .w2-console-name {
  color: var(--pt-console-text, #1a1a1a) !important;
}

/* Post textarea: light field, not dark */
html body .profile-page #profile-post-input,
html body.profile-theme-active .profile-page #profile-post-input {
  background: #f4f6f8 !important;
  border: 1px solid #c2ccd6 !important;
  color: #111 !important;
}
html body .profile-page .w2-post-btn,
html body.profile-theme-active .profile-page .w2-post-btn {
  background: linear-gradient(to bottom,
    var(--pt-post-btn-top, #29b6f6) 0%,
    var(--pt-post-btn-bottom, #0277bd) 100%) !important;
  color: #fff !important;
}

/* Video meta: white panel, dark title */
html body .profile-page .w2-video-meta,
html body.profile-theme-active .profile-page .w2-video-meta {
  background: #fff !important;
  color: #111 !important;
}
html body .profile-page .w2-video-title,
html body.profile-theme-active .profile-page .w2-video-title {
  color: #111 !important;
}
html body .profile-page .w2-react-like,
html body .profile-page .w2-react-dislike,
html body .profile-page .w2-react-views,
html body.profile-theme-active .profile-page .w2-react-like,
html body.profile-theme-active .profile-page .w2-react-dislike,
html body.profile-theme-active .profile-page .w2-react-views {
  color: #444 !important;
}

/* Action buttons keep their gradient skins (not the red site subscribe-btn) */
html body .profile-page .w2-action-btn,
html body.profile-theme-active .profile-page .w2-action-btn {
  background: linear-gradient(to bottom,
    var(--pt-btn-bg-top, #3a3a3a) 0%,
    var(--pt-btn-bg-bottom, #1a1a1a) 100%) !important;
  color: var(--pt-btn-color, #fff) !important;
  border: 1px solid var(--pt-btn-border, rgba(0,0,0,0.5)) !important;
}
html body .profile-page .w2-action-btn.w2-msg-btn,
html body.profile-theme-active .profile-page .w2-action-btn.w2-msg-btn {
  background: linear-gradient(to bottom,
    var(--pt-msg-btn-top, #2e7d32) 0%,
    var(--pt-msg-btn-bottom, #1b5e20) 100%) !important;
}