/**
 * PowerUp LMS - Custom Styles
 * 
 * Questo file contiene gli stili personalizzati del progetto.
 * Utilizza le variabili CSS definite in theme-variables.css
 * 
 * IMPORTANTE: Assicurati che theme-variables.css sia caricato PRIMA di questo file
 */

/* ============================================
   OVERRIDE GLOBALI CON VARIABILI TEMA
   ============================================ */

/* Applicazione delle variabili al body */
body {
  font-family: var(--font-default);
  background: var(--color-bg-body);
  color: var(--color-text-default);
}

/* ============================================
   OVERRIDE BOOTSTRAP BUTTONS
   ============================================ */

/* Primary Button Override */
.btn-primary {
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-border);
  --bs-btn-hover-bg: var(--btn-primary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-primary-hover-border);
  --bs-btn-active-bg: var(--btn-primary-hover-bg);
  --bs-btn-active-border-color: var(--btn-primary-hover-border);
}

.btn:hover {
  --bs-btn-hover-bg: var(--btn-primary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-primary-hover-border);
}

/* Secondary Button Override */
.btn-secondary {
  --bs-btn-bg: var(--btn-secondary-bg);
  --bs-btn-border-color: var(--btn-secondary-border);
  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-secondary-hover-border);
  --bs-btn-active-bg: var(--btn-secondary-hover-bg);
  --bs-btn-active-border-color: var(--btn-secondary-hover-border);
}

/* Applicazione delle variabili ai link */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-secondary);
}

/* Applicazione delle variabili ai titoli */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  color: var(--color-secondary);
}

/* ============================================
   OVERRIDE FONT DEL TEMA NICE-ADMIN
   Sovrascrive i font hardcoded nel template
   ============================================ */

/* Override card-title che usa Poppins */
.card-title {
  font-family: var(--font-secondary) !important;
  color: var(--color-primary);
}

/* Override breadcrumb che usa Nunito */
.breadcrumb {
  font-family: var(--font-primary) !important;
}

/* Override logo span che usa Nunito */
.logo span {
  font-family: var(--font-primary) !important;
}

/* Override alert-heading che usa Poppins */
.alert-heading {
  font-family: var(--font-secondary) !important;
}

/* Override pagetitle h1 */
.pagetitle h1 {
  font-family: var(--font-primary) !important;
  color: var(--color-primary);
}

/* Override iconslist label */
.iconslist .label {
  font-family: var(--font-default) !important;
}

/* ============================================
   FINE OVERRIDE FONT NICE-ADMIN
   ============================================ */

/* Definition for the ql-size-large class */
.ql-size-large {
  font-size: 1.5em; /* 150% of the base size */
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: var(--header-height);
  padding: var(--spacing-lg) var(--spacing-xl);
  transition: var(--transition-base);
}

@media (max-width: 1199px) {
  #main {
    padding: var(--spacing-lg);
  }
}

/*--------------------------------------------------------------
# Sidebar - Right
--------------------------------------------------------------*/
.sidebar-right {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: 996;
  transition: var(--transition-base);
  padding: var(--spacing-lg);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: var(--card-shadow);
  background-color: var(--sidebar-bg);
}

.nav-link-small {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sidebar-nav .nav-link .nav-link-small i {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-right: var(--spacing-xs);
}

@media (min-width: 1200px) {
  .sidebar-margin-right {
    margin-right: var(--sidebar-width);
  }
}

.sidebar-right::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--color-bg-white);
}

.sidebar-right::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}

@media (min-width: 1200px) {
  .toggle-sidebar .sidebar-right {
    right: var(--sidebar-width);
  }
}

/*--------------------------------------------------------------
# Dashboard Admin - Statistics Cards
--------------------------------------------------------------*/
.info-card {
  transition: var(--transition-base);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}

.info-card .card-icon {
  font-size: 32px;
  width: 64px;
  height: 64px;
  background: var(--color-bg-hover);
}

.sales-card .card-icon {
  color: var(--card-sales-color);
  background: var(--card-sales-bg);
}

.revenue-card .card-icon {
  color: var(--card-revenue-color);
  background: var(--card-revenue-bg);
}

.customers-card .card-icon {
  color: var(--card-customers-color);
  background: var(--card-customers-bg);
}

.warning-card .card-icon {
  color: var(--card-warning-color);
  background: var(--card-warning-bg);
}

/* Dashboard Chart Improvements */
.dashboard .card {
  border: none;
  box-shadow: var(--card-shadow);
  transition: var(--transition-base);
}

.dashboard .card:hover {
  box-shadow: var(--card-shadow-hover);
}

.dashboard .card-title {
  padding: var(--spacing-lg) 0 15px 0;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-primary);
  font-family: var(--font-secondary);
}

.dashboard .card-title span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 400;
}

/* Statistics Detail List */
.dashboard .news .post-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.dashboard .news .post-item:last-child {
  border-bottom: none;
}

.dashboard .news .post-item h4 {
  font-size: 24px;
  color: var(--color-text-default);
  font-weight: 600;
  margin-bottom: 5px;
}

.dashboard .news .post-item p {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Progress Bars Enhancement */
.dashboard .progress {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.dashboard .progress-bar {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 30px;
}

/* Alert Box Styling */
.dashboard .alert {
  border-radius: var(--border-radius-md);
  border-left: 4px solid var(--color-info);
}

.dashboard .alert-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-secondary);
}

.dashboard .alert h5 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.dashboard .alert ul li {
  margin-bottom: 5px;
}

.dashboard .info-card h6 {
  color: var(--color-primary-dark);
}

.header-nav .nav-profile {
  color: var(--color-text-default);
}

.footer .copyright {
  color: var(--color-text-default);
}

.header .toggle-sidebar-btn {
  color: var(--color-text-default);
}

.sidebar-nav .nav-link {
  color: var(--color-primary);
  background: var(--color-bg-body);
}

.sidebar-nav .nav-link:hover {
  color: var(--color-primary);
  background: var(--color-bg-body);
}

.sidebar-nav .nav-link i {
  color: var(--color-primary);
}

.sidebar-nav .nav-link.collapsed {
  color: var(--color-text-default);
}

.sidebar-nav .nav-link.collapsed i {
  color: var(--color-text-default);
}

.header-nav .profile .dropdown-header h6 {
  color: var(--color-primary);
}

.dropdown-header {
  color: var(--color-text-default);
}

.dropdown-item {
  color: var(--color-text-default);
}

.datatable-table th button,
.datatable-pagination-list button {
  color: var(--color-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--color-bg-body);
}

.table-striped > tbody > tr:nth-of-type(odd):hover > * {
  --bs-table-bg-type: var(--color-secondary-light);
}

/* ============================================
   CLICKABLE ROWS STYLES
   Stili per le righe cliccabili nelle tabelle
   ============================================ */

.clickable-row {
  cursor: pointer;
  transition: all 0.3s ease;
}

.clickable-row:hover,
.clickable-row:hover > td,
.clickable-row:hover > th {
  /* Set the transition on the elements whose properties are changing */
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;

  /* Override the background color on the cells (td/th) */
  background-color: var(--color-secondary) !important;

  /* Change the text color */
  color: #ffffff !important;

  /* This rule is crucial for overriding Bootstrap's inset box-shadow color layering */
  --bs-table-accent-bg: var(--color-secondary) !important;

  /* Ensure the base table background variable is also set for completeness, though cell targeting is key */
  --bs-table-bg: var(--color-secondary) !important;
}

.table > :not(caption) > * > * {
  border-bottom-width: 0;
}

.back-to-top {
  background-color: var(--color-primary);
}

.back-to-top:hover {
  background-color: var(--color-secondary);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
  .dashboard .card-title {
    font-size: var(--font-size-base);
  }

  .dashboard .news .post-item h4 {
    font-size: var(--font-size-xl);
  }

  .info-card .card-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
  }
}

/*--------------------------------------------------------------
# User Course Detail Cards
--------------------------------------------------------------*/
.course-detail-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius-md);
  transition: box-shadow var(--transition-base);
}

.course-detail-card:hover {
  box-shadow: var(--shadow-lg);
}

.course-detail-card .card-header {
  background-color: var(--color-bg-light);
  border-bottom: 2px solid #e0e0e0;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.course-detail-card .card-header h6 {
  font-weight: 600;
  color: var(--color-primary);
}

.course-detail-card .card-body {
  padding: 1.25rem;
}

.course-detail-card .progress {
  background-color: #e9ecef;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.course-detail-card .progress-bar {
  background: linear-gradient(
    90deg,
    var(--color-secondary) 0%,
    var(--color-primary) 100%
  );
  transition: width 0.6s ease;
}

.lessons-list {
  margin-top: 1rem;
}

.lessons-list .list-group-item {
  border: none;
  border-bottom: 1px solid #f0f0f0;
  padding: 0.75rem 0;
  transition: background-color 0.2s ease;
}

.lessons-list .list-group-item:hover {
  background-color: var(--color-bg-light);
}

.lessons-list .list-group-item:last-child {
  border-bottom: none;
}

.lesson-item .lesson-title {
  font-weight: 500;
  color: var(--color-text-default);
  font-size: 0.95rem;
}

.lesson-status-badge .badge {
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
}

/* Status Colors Enhancement */
.text-locked {
  color: var(--color-gray) !important;
}

.text-in-progress {
  color: var(--color-blue) !important;
}

.text-test-pending {
  color: var(--color-orange) !important;
}

.text-completed {
  color: var(--color-success) !important;
}

.text-test-failed {
  color: var(--color-danger) !important;
}

/* Course Statistics Alert */
.course-detail-card .alert-light {
  background-color: var(--color-bg-light);
  border-color: #dee2e6;
}

.course-detail-card .alert-light i {
  font-size: 1rem;
  margin-right: 0.25rem;
}

/* Certificate Alert */
.course-detail-card .alert-success {
  background-color: var(--color-success-bg);
  border-color: #badbcc;
  color: #0f5132;
}

.course-detail-card .alert-success .alert-link {
  color: #0a3622;
  font-weight: 600;
  text-decoration: none;
}

.course-detail-card .alert-success .alert-link:hover {
  text-decoration: underline;
}

.card-body {
  color: var(--color-text-default);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb .breadcrumb-item::before {
  color: var(--color-text-muted);
}

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

.alert-secondary {
  background-color: var(--color-bg-body);
  color: var(--color-text-default);
}

.dashboard .alert {
  border-left: 4px solid var(--color-secondary);
}

.accordion-button {
  background-color: var(--color-primary-light);
  color: var(--color-text-default);
}

.profile .profile-edit label {
  color: var(--color-primary);
}

.profile .profile-overview .card-title {
  color: var(--color-primary);
}
.profile .profile-overview .label {
  color: var(--color-primary);
}

/* Responsive for Course Cards */
@media (max-width: 768px) {
  .course-detail-card .card-header {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .course-detail-card .card-header .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    width: 100%;
  }

  .course-detail-card .card-header .badge {
    margin-top: 0.5rem;
    margin-right: 0 !important;
  }

  .course-detail-card .card-header button {
    margin-top: 0.5rem;
    margin-left: 0 !important;
    width: 100%;
  }

  .lesson-item {
    font-size: 0.9rem;
  }
}

.logo img {
  max-height: 32px;
  margin-right: 6px;
}

/* ============================================
   MOBILE LEARN LAYOUT
   Responsive layout for learn pages (inspired by Udemy)
   ============================================ */

/* --- Mobile sticky course bar --- */
.mobile-course-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background-color: var(--sidebar-bg);
  border-top: 1px solid var(--sidebar-border);
  padding: 10px 16px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
  /* Only visible on mobile (d-xl-none handles display, but ensure correct box) */
}

/* Prevent the main content from being hidden behind the mobile bar */
@media (max-width: 1199px) {
  #main {
    padding-bottom: 80px; /* space for the sticky mobile bar */
  }

  /* Remove right margin (sidebar is not fixed visible on mobile) */
  .sidebar-margin-right {
    margin-right: 0 !important;
  }
}

/* --- Overlay backdrop --- */
.sidebar-right-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1045;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-right-overlay.sidebar-right-overlay-visible {
  display: block;
  opacity: 1;
}

/* --- Right sidebar mobile drawer --- */
@media (max-width: 1199px) {
  .sidebar-right {
    /* Override the default off-screen position */
    top: 0;
    right: -100%;
    bottom: 0;
    width: min(360px, 90vw);
    z-index: 1050;
    transition: right 0.3s ease;
    padding-top: 16px;
    /* Make it a full-height drawer from the top */
    height: 100dvh;
  }

  .sidebar-right.sidebar-right-open {
    right: 0;
  }

  /* Prevent body scroll when drawer is open */
  body.sidebar-right-mobile-open {
    overflow: hidden;
  }
}

/* --- Video responsive fix --- */
@media (max-width: 767px) {
  /* Reduce card padding on very small screens */
  .card-body {
    padding: 1rem 0.75rem;
  }

  /* Breadcrumb smaller on mobile */
  .pagetitle {
    margin-bottom: 0.5rem;
  }

  .pagetitle h1 {
    font-size: 1.1rem;
  }

  /* Table horizontal scroll */
  .table-responsive {
    font-size: 0.85rem;
  }
}

/* --- Lesson sidebar items: better touch targets --- */
@media (max-width: 1199px) {
  .sidebar-right .nav-link {
    padding: 12px 10px !important;
  }

  .sidebar-right .nav-item {
    margin-bottom: 6px !important;
  }
}

/* --- Back-to-top button: lift above the mobile course bar --- */
@media (max-width: 1199px) {
  .back-to-top {
    bottom: 70px !important;
  }
}