/**
 * Dark Mode Styles for Bootstrap Barrio
 * Works with data-bs-theme attribute set by dark-mode.js
 */

/* ==================== THEME TRANSITION ==================== */

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease !important;
  animation: none !important;
}

/* ==================== CSS VARIABLES ==================== */

:root {
  --dm-border-color: #dee2e6;
  --dm-code-bg: #f5f5f5;
}

html[data-bs-theme="dark"] {
  /* Border & code */
  --dm-border-color: #3a3a3a;
  --dm-code-bg: #1e1e1e;

  /* Sovrascritture Bootstrap */
  --bs-body-bg:            #131313;
  --bs-body-color:         #e8e8e8 !important;
  --bs-body-color-rgb:     232, 232, 232;

  --bs-black:              #e8e8e8;
  --bs-black-rgb:          232, 232, 232;
  --bs-white:              #1a1a1a;

  --bs-gray-100:           #1e1e1e;
  --bs-gray-200:           #2a2a2a;
  --bs-gray-300:           #3a3a3a;
  --bs-gray-400:           #4a4a4a;
  --bs-gray-500:           #6a6a6a;
  --bs-gray-600:           #8a8a8a;
  --bs-gray-700:           #aaaaaa;
  --bs-gray-800:           #cccccc;
  --bs-gray-900:           #e8e8e8;

  --bs-light:              #1e1e1e;
  --bs-dark:               #e8e8e8;
  --bs-light-rgb:          30, 30, 30;
  --bs-dark-rgb:           232, 232, 232;

  --bs-border-color:       var(--dm-border-color);

  /* Link */
  --bs-link-color:         #6ba3ff;
  --bs-link-hover-color:   #90bcff;
  --bs-link-color-rgb:     107, 163, 255;

  /* Intestazioni */
  --bb-h1-color:           #f1f1f1;
  --bb-h2-color:           #f1f1f1;
  --bb-h3-color:           #f1f1f1;
  --header-color:          #f1f1f1;
}

/* ==================== BODY & GENERAL ==================== */

html[data-bs-theme="dark"] body {
  background-color: #131313;
  color: var(--bs-body-color);
}

/* ==================== SELEZIONE TESTO ==================== */

html[data-bs-theme="dark"] ::selection {
  background-color: #2c4a8a;
  color: #ffffff;
}

/* ==================== TITOLI ==================== */

html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] .h1,
html[data-bs-theme="dark"] .h2,
html[data-bs-theme="dark"] .h3,
html[data-bs-theme="dark"] .h4,
html[data-bs-theme="dark"] .h5,
html[data-bs-theme="dark"] .h6 {
  color: var(--bb-h1-color);
}

/* ==================== TESTO ==================== */

html[data-bs-theme="dark"] .text-dark {
  color: #e8e8e8 !important;
}

html[data-bs-theme="dark"] .text-black {
  color: #e8e8e8 !important;
}

html[data-bs-theme="dark"] .text-muted {
  color: #8a8a8a !important;
}

html[data-bs-theme="dark"] .text-body-secondary {
  color: #9a9a9a !important;
}

/* ==================== SFONDI UTILITY ==================== */

html[data-bs-theme="dark"] .bg-light {
  background-color: #1e1e1e !important;
}

html[data-bs-theme="dark"] .bg-white {
  background-color: #1a1a1a !important;
}

html[data-bs-theme="dark"] .bg-lightgray {
  background: #2a2a2a !important;
}

html[data-bs-theme="dark"] .bg-dark {
  background-color: #0d0d0d !important;
}

/* ==================== LINKS ==================== */

/*html[data-bs-theme="dark"] a {
  color: var(--bs-link-color);
}

html[data-bs-theme="dark"] a:hover {
  color: var(--bs-link-hover-color);
}*/

/* ==================== CARDS ==================== */

html[data-bs-theme="dark"] .card {
  background-color: #1c1c1c;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .card-header {
  background-color: #242424;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .card-footer {
  background-color: #202020;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .card-title {
  color: #f1f1f1;
}

/* ==================== FORMS & INPUTS ==================== */

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] input[type="text"],
html[data-bs-theme="dark"] input[type="email"],
html[data-bs-theme="dark"] input[type="password"],
html[data-bs-theme="dark"] input[type="search"],
html[data-bs-theme="dark"] input[type="number"],
html[data-bs-theme="dark"] input[type="tel"],
html[data-bs-theme="dark"] input[type="url"] {
  background-color: #1e1e1e;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background-color: #1e1e1e;
  border-color: #6ba3ff;
  color: var(--bs-body-color);
  box-shadow: 0 0 0 0.25rem rgba(107, 163, 255, 0.2);
}

html[data-bs-theme="dark"] .form-control::placeholder {
  color: #666666;
}

html[data-bs-theme="dark"] .form-check-input {
  background-color: #1e1e1e;
  border-color: #555555;
}

html[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

html[data-bs-theme="dark"] .form-label {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .input-group-text {
  background-color: #252525;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-control[readonly] {
  background-color: #252525;
  color: #777777;
}

/* ==================== BORDERS & DIVIDERS ==================== */

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-end,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start {
  border-color: var(--dm-border-color) !important;
}

html[data-bs-theme="dark"] hr {
  border-color: var(--dm-border-color);
  opacity: 0.4;
}

/* ==================== TABLES ==================== */

html[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--dm-border-color);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  color: var(--bs-body-color);
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table thead td {
  background-color: #1e1e1e;
  color: #f1f1f1;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.04);
}

html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.06);
}

html[data-bs-theme="dark"] .table-bordered {
  border-color: var(--dm-border-color);
}

/* ==================== CODE & BLOCKS ==================== */

html[data-bs-theme="dark"] code {
  background-color: var(--dm-code-bg);
  color: #f48fb1;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

html[data-bs-theme="dark"] pre {
  background-color: var(--dm-code-bg);
  color: #e0e0e0;
  border: 1px solid var(--dm-border-color);
  border-radius: 4px;
  padding: 1rem;
}

html[data-bs-theme="dark"] pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

html[data-bs-theme="dark"] kbd {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #444;
}

html[data-bs-theme="dark"] blockquote,
html[data-bs-theme="dark"] .blockquote {
  border-left: 4px solid var(--dm-border-color);
  color: #aaaaaa;
}

/* ==================== NAVIGATION ==================== */

html[data-bs-theme="dark"] .navbar {
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-bs-theme="dark"] .navbar .navbar-nav .nav-link {
  color: rgba(232, 232, 232, 0.85);
}

html[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
html[data-bs-theme="dark"] .navbar .navbar-nav .nav-link:hover,
html[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link.active,
html[data-bs-theme="dark"] .navbar .navbar-nav .nav-link.active {
  color: #ffffff;
}

html[data-bs-theme="dark"] .navbar-light .navbar-brand,
html[data-bs-theme="dark"] .navbar .navbar-brand {
  color: #ffffff;
}

html[data-bs-theme="dark"] .navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

html[data-bs-theme="dark"] .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ==================== NAV TABS & PILLS ==================== */

/*
html[data-bs-theme="dark"] .nav-tabs {
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: #aaaaaa;
}

html[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  color: #e8e8e8;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #131313;
  border-color: var(--dm-border-color) var(--dm-border-color) #131313;
  color: #f1f1f1;
}

html[data-bs-theme="dark"] .nav-pills .nav-link {
  color: #aaaaaa;
}

html[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  color: #ffffff;
}
*/

/* ==================== DROPDOWNS ==================== */

html[data-bs-theme="dark"] .dropdown-menu {
  background-color: #1e1e1e;
  border-color: var(--dm-border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .dropdown-item a {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #2a2a2a;
  color: #ffffff;
}

html[data-bs-theme="dark"] .dropdown-item.active {
  background-color: var(--bs-primary);
  color: #ffffff;
}

html[data-bs-theme="dark"] .dropdown-item.disabled {
  color: #666666;
}

html[data-bs-theme="dark"] .dropdown-header {
  color: #8a8a8a;
}

html[data-bs-theme="dark"] .dropdown-divider {
  border-color: var(--dm-border-color);
}

/* ==================== MODALS ==================== */

html[data-bs-theme="dark"] .modal-content {
  background-color: #1c1c1c;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .modal-header {
  background-color: #222222;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .modal-footer {
  background-color: #1e1e1e;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .modal-title {
  color: #f1f1f1;
}

html[data-bs-theme="dark"] .modal-backdrop {
  background-color: #000000;
}

html[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==================== OFFCANVAS ==================== */

html[data-bs-theme="dark"] .offcanvas {
  background-color: #1c1c1c;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .offcanvas-header {
  border-color: var(--dm-border-color);
}

/* ==================== ALERTS ==================== */

html[data-bs-theme="dark"] .alert-primary {
  background-color: rgba(0, 121, 192, 0.15);
  border-color: rgba(0, 121, 192, 0.4);
  color: #6ba3ff;
}

html[data-bs-theme="dark"] .alert-secondary {
  background-color: rgba(108, 117, 125, 0.15);
  border-color: rgba(108, 117, 125, 0.4);
  color: #adb5bd;
}

html[data-bs-theme="dark"] .alert-success {
  background-color: rgba(40, 167, 69, 0.15);
  border-color: rgba(40, 167, 69, 0.4);
  color: #75c98b;
}

html[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.4);
  color: #f08080;
}

html[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.4);
  color: #ffd55a;
}

html[data-bs-theme="dark"] .alert-info {
  background-color: rgba(23, 162, 184, 0.15);
  border-color: rgba(23, 162, 184, 0.4);
  color: #63d9e8;
}

html[data-bs-theme="dark"] .alert-light {
  background-color: #1e1e1e;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .alert-dark {
  background-color: #2a2a2a;
  border-color: #444444;
  color: #cccccc;
}

/* ==================== BADGES ==================== */

html[data-bs-theme="dark"] .badge.bg-light {
  background-color: #333333 !important;
  color: #cccccc !important;
}

html[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: #4a4a4a !important;
}

/* ==================== LIST GROUPS ==================== */

html[data-bs-theme="dark"] .list-group-item {
  background-color: #1c1c1c;
  border-color: var(--dm-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .list-group-item:hover,
html[data-bs-theme="dark"] .list-group-item:focus {
  background-color: #252525;
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

html[data-bs-theme="dark"] .list-group-item.disabled {
  color: #666666;
  background-color: #1c1c1c;
}

/* ==================== BREADCRUMBS ==================== */

html[data-bs-theme="dark"] .breadcrumb {
  background-color: transparent;
}

html[data-bs-theme="dark"] .breadcrumb-item a {
  color: var(--bs-link-color);
}

html[data-bs-theme="dark"] .breadcrumb-item.active {
  color: #8a8a8a;
}

html[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: #666666;
}

/* ==================== PAGINATION ==================== */

html[data-bs-theme="dark"] .page-link {
  background-color: #1c1c1c;
  border-color: var(--dm-border-color);
  color: var(--bs-link-color);
}

html[data-bs-theme="dark"] .page-link:hover {
  background-color: #2a2a2a;
  border-color: var(--dm-border-color);
  color: var(--bs-link-hover-color);
}

html[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

html[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: #1a1a1a;
  border-color: var(--dm-border-color);
  color: #555555;
}

/* ==================== PROGRESS ==================== */

html[data-bs-theme="dark"] .progress {
  background-color: #2a2a2a;
}

/* ==================== ACCORDION ==================== */

html[data-bs-theme="dark"] .accordion-item {
  background-color: #1c1c1c;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .accordion-button {
  background-color: #1e1e1e;
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #252525;
  color: #f1f1f1;
  box-shadow: inset 0 -1px 0 var(--dm-border-color);
}

html[data-bs-theme="dark"] .accordion-button::after {
  filter: invert(1);
}

html[data-bs-theme="dark"] .accordion-body {
  background-color: #1c1c1c;
  color: var(--bs-body-color);
}

/* ==================== TOOLTIP & POPOVER ==================== */

html[data-bs-theme="dark"] .tooltip-inner {
  background-color: #e8e8e8;
  color: #131313;
}

html[data-bs-theme="dark"] .popover {
  background-color: #1e1e1e;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .popover-header {
  background-color: #252525;
  border-color: var(--dm-border-color);
  color: #f1f1f1;
}

html[data-bs-theme="dark"] .popover-body {
  color: var(--bs-body-color);
}

/* ==================== SPINNER ==================== */

html[data-bs-theme="dark"] .spinner-border,
html[data-bs-theme="dark"] .spinner-grow {
  color: var(--bs-primary);
}

/* ==================== IMMAGINI & MEDIA ==================== */

html[data-bs-theme="dark"] .img-thumbnail {
  background-color: #1e1e1e;
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .figure-caption {
  color: #8a8a8a;
}

/* ==================== FOOTER ==================== */

html[data-bs-theme="dark"] footer {
  border-top-color: var(--dm-border-color);
}

/* ==================== DRUPAL SPECIFICO ==================== */

html[data-bs-theme="dark"] .region-sidebar-first,
html[data-bs-theme="dark"] .region-sidebar-second {
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .block {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .views-row {
  border-color: var(--dm-border-color);
}

html[data-bs-theme="dark"] .pager__item a {
  color: var(--bs-link-color);
}

/* ==================== SCROLLBAR ==================== */

html[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 4px;
}

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* ==================== DARK MODE TOGGLE BUTTON ==================== */

.dark-mode-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  transition: transform 200ms ease, background-color 200ms ease;
  appearance: none;
  border-radius: 8px;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.08);
}

html[data-bs-theme="dark"] .dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode-toggle:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.dark-mode-toggle [data-icon="moon"]::before {
  content: "\f186";
  font-family: "FontAwesome", serif;
  color: var(--bs-navbar-color);
}

.dark-mode-toggle [data-icon="sun"]::before {
  content: "\f185";
  font-family: "FontAwesome", serif;
  color: var(--bs-navbar-color);
}

/* ==================== ACCESSIBILITY ==================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}