/* ==========================================
   SHADCN DARK MODE STYLES
   ========================================== */

.dark-mode {
  /* Dark Mode CSS Variables */
  --background: 0 0% 7%;
  --foreground: 0 0% 95%;
  --card: 0 0% 10%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 10%;
  --popover-foreground: 0 0% 95%;
  --primary: 24 10% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 95%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 95%;
  --destructive: 0 63% 50%;
  --destructive-foreground: 0 0% 95%;
  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --ring: 24 10% 55%;

  /* Legacy variables override */
  --ttPrimary: hsl(24, 10%, 55%);
  --ttRed: hsl(24, 10%, 55%);
  --ttBlue: hsl(24, 10%, 55%);
  --ttPurple: hsl(24, 10%, 55%);
  --ttButton: hsl(0, 0%, 18%);
  --ttLightRed: hsl(0, 0%, 15%);
  --ttGray: hsl(0, 0%, 45%);
  --ttGray2: hsl(0, 0%, 60%);
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);
  --ttBorder: hsl(0, 0%, 18%);
  --ttHover: hsl(24, 10%, 45%);

  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Sidebar */
.dark-mode .tt-sidebar {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}

.dark-mode .tt-sidebar__heading button {
  color: hsl(var(--foreground));
}

.dark-mode .tt-sidebar__heading button:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.dark-mode .tt-sidebar__nav-title {
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}

.dark-mode .tt-sidebar__nav a {
  color: hsl(var(--foreground));
  border: none;
}

/* Sidebar nav hover/active styles owned by style.css + platform-extras.css */

.dark-mode .tt-sidebar__subscription {
  color: hsl(var(--foreground));
}

.dark-mode .tt-sidebar__subscription:hover {
  color: hsl(var(--primary));
}

/* Sidebar Dropdown Menu */
.dark-mode .tt-sidebar-nav-dropdown-menu {
  background-color: hsl(var(--muted));
}

.dark-mode .tt-sidebar-nav-dropdown-menu a {
  color: hsl(var(--foreground));
}

.dark-mode .tt-sidebar-nav-dropdown-menu a:hover {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Header */
.dark-mode .tt-header {
  border-color: hsl(var(--border));
}

.dark-mode .tt-header__search {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}

.dark-mode .tt-header__search input {
  color: hsl(var(--foreground));
}

.dark-mode .tt-header__search input::placeholder {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-header__search button {
  background-color: hsl(var(--secondary));
  border-color: hsl(var(--border));
}

.dark-mode .tt-header__search button:hover {
  background-color: hsl(var(--accent));
}

.dark-mode .tt-header button,
.dark-mode .tt-header a {
  color: hsl(var(--foreground));
}

.dark-mode .tt-header button i,
.dark-mode .tt-header a i {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-header button:hover,
.dark-mode .tt-header a:hover {
  color: hsl(var(--primary));
}

.dark-mode .tt-header button:hover i,
.dark-mode .tt-header a:hover i {
  color: hsl(var(--primary));
}

.dark-mode .tt-header__right > * {
  border-color: hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.dark-mode .tt-header__right > *:hover {
  background-color: hsl(var(--accent));
}

/* Dropdowns & Menus */
.dark-mode .tt-header-pages-dropdown-menu {
  background-color: hsl(var(--popover));
  border-color: hsl(var(--border));
}

.dark-mode .tt-header-pages-dropdown-menu a {
  color: hsl(var(--popover-foreground));
}

.dark-mode .tt-header-pages-dropdown-menu a:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.dark-mode .tt-user-dropdown {
  background-color: hsl(var(--popover));
  border-color: hsl(var(--border));
  --border-b: 1px solid hsl(var(--border));
}

.dark-mode .tt-user-dropdown a {
  color: hsl(var(--popover-foreground));
}

.dark-mode .tt-user-dropdown a:hover {
  background-color: hsl(var(--accent));
}

.dark-mode .tt-user-dropdown .user-account .name {
  color: hsl(var(--foreground));
}

.dark-mode .tt-user-dropdown .user-account .username {
  color: hsl(var(--muted-foreground));
}

/* Section Titles */
.dark-mode .tt-section-title {
  color: hsl(var(--foreground));
}

/* .tt-section-heading__btn: definizione unica in ui-components.css
   (link quieto del sistema bottoni). */

/* Shorts */
.dark-mode .tt-short {
  background-color: hsl(var(--card));
}

.dark-mode .tt-short__title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-short__title:hover {
  color: hsl(var(--primary));
}

/* Categories */
.dark-mode .tt-categories {
  border-color: hsl(var(--border));
  background-color: hsl(var(--card));
}

.dark-mode .tt-categories button,
.dark-mode .tt-categories a {
  color: hsl(var(--foreground));
}

.dark-mode .tt-categories button:hover,
.dark-mode .tt-categories a:hover,
.dark-mode .tt-categories button.active,
.dark-mode .tt-categories a.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Videos */
.dark-mode .tt-video__author {
  color: hsl(var(--primary));
}

.dark-mode .tt-video__author:hover {
  color: hsl(var(--foreground));
}

.dark-mode .tt-video__title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-video__title:hover {
  color: hsl(var(--primary));
}

.dark-mode .tt-video__infos {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-video__infos > *:not(:last-child) {
  border-color: hsl(var(--border));
}

/* Lives */
.dark-mode .tt-lives {
  background-color: hsl(var(--card));
}

.dark-mode .tt-lives__title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-live__txt .tt-video__author,
.dark-mode .tt-live__txt .tt-video__infos {
  color: hsl(var(--foreground));
}

/* Sub Banner */
.dark-mode .tt-sub-banner__btn {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.dark-mode .tt-sub-banner__btn:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Inner Pages */
.dark-mode .tt-inner-page-banner::before {
  background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .tt-inner-page-inner-title {
  color: hsl(var(--foreground));
}

/* 404 */
.dark-mode .tt-404-content .title {
  color: hsl(var(--foreground));
}

/* About */
.dark-mode .tt-about-page__txt {
  color: hsl(var(--foreground));
}

/* Testimony */
.dark-mode .tt-testimony {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

/* Category Title */
.dark-mode .tt-category-title {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

/* Channel */
.dark-mode .tt-channel-nav {
  border-color: hsl(var(--border));
}

.dark-mode .tt-channel-nav a {
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

.dark-mode .tt-channel-nav a:hover,
.dark-mode .tt-channel-nav a.active {
  color: hsl(var(--primary));
}

.dark-mode .tt-channel-more-channels {
  border-color: hsl(var(--border));
}

.dark-mode .tt-channel-more-channel-single__title a {
  color: hsl(var(--foreground));
}

.dark-mode .tt-channel-more-channel-single__title a:hover {
  color: hsl(var(--primary));
}

.dark-mode .tt-channel-more-channels__title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-channel-more-channels__title + p {
  color: hsl(var(--muted-foreground));
}

/* Contact */
.dark-mode .tt-contact-info {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-contact-info .descr a {
  color: hsl(var(--foreground));
}

.dark-mode .tt-contact-info .descr a:hover {
  color: hsl(var(--primary));
}

.dark-mode .tt-contact-form-container {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-contact-form input,
.dark-mode .tt-contact-form textarea {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/* Channel Content */
.dark-mode .tt-channel-content-title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-channel-content-table thead {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.dark-mode .tt-author-video__txt {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-author-video__title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-author-video__title:hover {
  color: hsl(var(--primary));
}

.dark-mode .tt-author-video-action-toggler {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.dark-mode .tt-author-video-action-toggler:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark-mode .tt-channel-content-table tbody td {
  color: hsl(var(--foreground));
}

.dark-mode .tt-channel-content-table tbody tr {
  border-color: hsl(var(--border));
}

.dark-mode .tt-channel-content-pagination .pages a {
  color: hsl(var(--foreground));
  background-color: hsl(var(--secondary));
}

.dark-mode .tt-channel-content-pagination .pages a:hover,
.dark-mode .tt-channel-content-pagination .pages a.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Accordion */
.dark-mode .tt-accordion .sa-single-accordion-item {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-accordion .sa-single-accordion-item.open {
  background-color: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary) / 0.3);
}

.dark-mode .tt-accordion .sa-single-accordion-item__header .left h5 {
  color: hsl(var(--foreground));
}

.dark-mode .tt-accordion .sa-single-accordion-item__header .left .order-num {
  color: hsl(var(--primary));
}

.dark-mode .tt-accordion .sa-single-accordion-item.open .sa-single-accordion-item__header .order-num {
  color: hsl(var(--primary));
}

.dark-mode .tt-accordion .sa-single-accordion-item .sa-single-accordion-item__header i {
  color: hsl(var(--foreground));
}

/* Video Details */
.dark-mode .tt-video-details__title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details__heading .author-channel a {
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details__heading .author-channel a:hover {
  color: hsl(var(--primary));
}

.dark-mode .tt-video-details__heading .right > *,
.dark-mode .tt-video-details__heading .right button,
.dark-mode .tt-video-details__heading .right a {
  background-color: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details__heading .right > *:hover,
.dark-mode .tt-video-details__heading .right button:hover,
.dark-mode .tt-video-details__heading .right a:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark-mode .tt-video-details__right {
  border-color: hsl(var(--border));
  background-color: hsl(var(--card));
}

/* Live Stream Chat */
.dark-mode .tt-live-stream-chat .heading {
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

.dark-mode .tt-live-stream-chat .heading .close {
  color: hsl(var(--foreground));
}

.dark-mode .tt-live-stream-chat .heading .close:hover {
  color: hsl(var(--primary));
}

.dark-mode .tt-live-chat-form-wrapper form > * {
  background-color: hsl(var(--secondary));
}

/* Inputs */
.dark-mode input {
  color: hsl(var(--foreground));
}

/* Textareas: allinea lo sfondo al tema scuro (la .form-control di Bootstrap è
   bianca di default). Le regole per-componente, più specifiche o caricate dopo,
   mantengono comunque il loro stile. */
.dark-mode textarea,
.dark-mode textarea.form-control {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.dark-mode textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-video-details__heading .form-control {
  color: hsl(var(--foreground));
}

/* Comments */
.dark-mode .tt-video-details__comment-text {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-video-details__comment-author {
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details__comment-date {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-video-details__descr {
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details__descr h6 {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-video-details__descr h6 > span {
  color: hsl(var(--foreground));
}

.dark-mode .tt-same-author-videos-slider-nav button {
  background-color: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

.dark-mode .tt-same-author-videos-slider-nav button:hover {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark-mode .tt-video-details__comment-container {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details__comment-form-container .heading h5,
.dark-mode .tt-video-details__comment-form-container .heading select {
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details__comment-form-container .heading select option {
  background-color: hsl(var(--popover));
}

.dark-mode .tt-video-details__comment-form textarea {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-video-details__comment-form .btns button {
  color: hsl(var(--foreground));
  background-color: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-video-details__comment-form .btns button:hover {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark-mode .tt-video-details__comment-form .btns button[type=submit] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
}

.dark-mode .tt-video-details__comment-form .btns button[type=submit]:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.dark-mode .tt-video-details__comment-action {
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--secondary));
}

.dark-mode .tt-video-details__comment-action:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark-mode .tt-video-details__categories-slider-nav button {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
}

.dark-mode .tt-categories-nav button {
  color: hsl(var(--foreground));
}

.dark-mode .tt-categories-nav button:hover,
.dark-mode .tt-categories-nav button.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Login */
.dark-mode .tt-login {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-login .field-container {
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
}

.dark-mode .tt-login .field-container input {
  color: hsl(var(--foreground));
  background-color: transparent;
  border: none !important;
}

.dark-mode .tt-login .field-container input::placeholder {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-login .field-container i {
  color: hsl(var(--muted-foreground));
}

.dark-mode .other-login-options__title span {
  background-color: hsl(var(--card));
}

.dark-mode .other-login-options__title::before {
  background-color: hsl(var(--border));
}

.dark-mode .other-login-options .options > * {
  background-color: hsl(var(--secondary));
}

.dark-mode .other-login-options .options > *:hover {
  background-color: hsl(var(--accent));
}

/* Packages */
.dark-mode .tt-package {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-packages .custom-control-label {
  color: hsl(var(--foreground));
}

.dark-mode .tt-packages .billing-address-title {
  color: hsl(var(--foreground));
}

/* Watch History */
.dark-mode .tt-watch-history-single .more-info {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-watch-history-single .author-channel .name {
  color: hsl(var(--foreground));
}

.dark-mode .tt-watch-history-single .author-channel .name:hover {
  color: hsl(var(--primary));
}

/* Shorts */
.dark-mode .tt-shorts-nav button,
.dark-mode .tt-shorts-interaction button,
.dark-mode .tt-shorts-interaction a {
  background-color: hsl(var(--secondary));
}

.dark-mode .tt-shorts-nav button:hover,
.dark-mode .tt-shorts-interaction button:hover,
.dark-mode .tt-shorts-interaction a:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark-mode .tt-shorts-interaction .txt {
  color: hsl(var(--foreground));
}

/* Channel Customize Form */
.dark-mode .tt-channel-customize-form .dp > label,
.dark-mode .tt-channel-customize-form .cover-pic > label,
.dark-mode .tt-channel-customize-form label {
  color: hsl(var(--foreground));
}

.dark-mode .tt-channel-customize-form input,
.dark-mode .tt-channel-customize-form textarea {
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

.dark-mode .tt-channel-customize-form-btn {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border));
}

.dark-mode .tt-channel-customize-form-btn:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Blog */
.dark-mode .tt-blog-details-descr {
  color: hsl(var(--foreground));
}

.dark-mode .form-group-select select {
  background-color: transparent;
  color: hsl(var(--foreground));
}

/* Subscribe Button */
.dark-mode .subscribe-btn {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dark-mode .subscribe-btn.subscribed {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.dark-mode .channel-subscribe-button {
  background-color: hsl(var(--secondary));
  color: hsl(var(--primary));
}

.dark-mode .channel-subscribe-button.subscribed {
  background-color: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

/* Video Description */
.dark-mode .video-description {
  color: hsl(var(--foreground));
}

/* Autofill */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:active {
  color: hsl(var(--foreground)) !important;
  -webkit-text-fill-color: hsl(var(--foreground)) !important;
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--background)) inset !important;
}

/* Form Fields */
.dark-mode .tt-radio-field-wrapper,
.dark-mode .tt-video-details-form-wrapper__title,
.dark-mode .tt-video-details-form-schedule p,
.dark-mode .tt-video-details-form .label {
  color: hsl(var(--foreground));
}

.dark-mode .tt-radio-field {
  border-color: hsl(var(--border));
}

.dark-mode .tt-video-details-form input,
.dark-mode .tt-video-details-form textarea {
  color: hsl(var(--foreground));
}

.dark-mode .tt-video-details-form input::placeholder,
.dark-mode .tt-video-details-form textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

.dark-mode input {
  color-scheme: dark;
}

.dark-mode .tt-video-details-form-note {
  color: hsl(var(--foreground));
}

/* Upload Modal */
.dark-mode .tt-upload-video-modal {
  background-color: hsl(var(--card));
  border-color: hsl(var(--border));
}

.dark-mode .tt-upload-video-modal-header {
  border-bottom: 1px solid hsl(var(--border));
}

.dark-mode .tt-upload-video-modal-header .title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-upload-video-modal-icon {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-upload-video-modal-title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-upload-video-modal-descr,
.dark-mode .tt-upload-video-modal-footer {
  color: hsl(var(--muted-foreground));
}

/* Mobile Nav → dock fluttuante glass (dock.css / dock.js) */

/* Blog */
.dark-mode .tt-blog__descr,
.dark-mode .tt-blog__infos {
  color: hsl(var(--muted-foreground));
}

.dark-mode .tt-blog__title {
  color: hsl(var(--foreground));
}

.dark-mode .tt-blog__title:hover {
  color: hsl(var(--primary));
}

/* Footer */
.dark-mode .tt-footer::before {
  background-color: hsl(var(--background));
}

/* Scrollbar */
.dark-mode::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

.dark-mode::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
}

.dark-mode::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}