/* =========================================
   COLORS & ROOT
   ========================================= */
:root {
  /* Υπάρχουσες μεταβλητές */
  --color-bg: #1f1f1f;
  --color-fg: #ffffff;
  --color-progress: #69e469;

  /* ΝΕΑ: Brand Colors (αν θέλεις)
     π.χ. ένα primary για κουμπιά, links, accent */
  --brand-primary: #0dcaf0; /* existing “info” color */
  --brand-secondary: #0d83f0; /* ή άλλο secondary */
  --brand-accent: #ff8800; /* ένα ζεστό πορτοκαλί, π.χ. for hovers */
  /* Προαιρετικά ένα ουδέτερο gray */
  --neutral-light: #f8f8f8;
  --neutral-dark: #2a2a2a;
}

/* =========================================
   BODY & GENERAL
   ========================================= */
body {
  background-color: #212529;
  color: var(--color-fg);
  font-family: sans-serif;  /* ή π.χ. 'Inter', sans-serif */
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
}

/* ΝΕΟ: Μπορείς να ορίσεις δύο επιπλέον κλάσεις τυπογραφίας,
   αν θέλεις διακριτή γραμματοσειρά για τίτλους vs σώμα */
.title-font {
  font-family: 'Poppins', sans-serif; /* παράδειγμα */
  font-weight: 700;
}

.body-font {
  font-family: 'Inter', sans-serif;   /* παράδειγμα */
  font-weight: 400;
}

/* Προαιρετικό “section block” με μεγαλύτερο padding */
.section-block {
  padding: 60px 0;
}

/* =========================================
   PROGRESS BAR
   ========================================= */
#updateProgressContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #444;
  z-index: 9999;
}
#updateProgressBar {
  width: 0%;
  height: 100%;
  background-color: var(--color-progress);
  transition: width 0.2s linear;
}

/* =========================================
   TOP GREEN LINE + STATS BAR
   ========================================= */
.top-green-line {
  background-color: #2ee03e;
  height: 3px;
  width: 100%;
}
.top-stats-bar {
  background-color: #1f1f1f;
  border-bottom: 1px solid #333;
}
.stats-container {
  transition: box-shadow 0.2s;
}
.stats-wrap .stat-item {
  background-color: #2a2a2a;
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background-color 0.2s;
  white-space: nowrap;
  font-size: 0.85rem;
  text-decoration: none !important;
}
.stats-wrap .stat-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.stat-icon {
  color: #ccc;
  font-size: 1rem;
}
.label {
  color: #ccc;
  font-weight: 500;
}

/* =========================================
   NAVBAR
   ========================================= */
.navbar-brand {
  font-size: 1rem;
  text-decoration: none !important;
}
.navbar-toggler {
  border: none;
  background-color: #333;
  color: #fff;
  transition: background-color 0.2s;
}
.navbar-toggler:hover {
  background-color: #444;
}

/* =========================================
   LINKS & ICONS
   ========================================= */
.icon-link, .icon-link i {
  text-decoration: none !important;
  color: #ccc;
  font-size: 1.1rem;
  transition: color 0.2s;
}
.icon-link:hover {
  color: #fff;
}
.navbar-nav .nav-link {
  color: #fff;
  transition: color 0.2s;
  text-decoration: none !important;
}
.navbar-nav .nav-link:hover {
  color: #0dcaf0;
}

/* =========================================
   SEARCH
   ========================================= */
.search-group {
  transition: box-shadow 0.2s;
}
.search-input:focus {
  outline: none;
  box-shadow: 0 0 5px #0dcaf0;
  transition: box-shadow 0.2s;
}

/* =========================================
   TOASTS
   ========================================= */
.toast {
  border-radius: 4px;
  margin-bottom: 0.5rem;
  opacity: 0.95;
  transition: opacity 0.3s;
}

/* =========================================
   SPARKLINE (μικρό γράφημα, 100x40)
   ========================================= */
.sparkline-container {
  width: 100px;
  height: 40px;
  position: relative;
  overflow: hidden;
}
.sparkline-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================
   FOOTER
   ========================================= */
.footer-gradient {
  background: #272d34;
  border-top: 1px solid #333;
  color: #fff;
}
.footer-top-green {
  background-color: #2ee03e;
  height: 3px;
  width: 100%;
}
.footer-links li {
  margin-bottom: 0.4rem;
}
.footer-link {
  color: #bbb;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover {
  color: #0dcaf0;
  text-decoration: none;
}
/* input στο footer */
.footer-gradient input[type="email"] {
  border: none;
  box-shadow: none;
  outline: none;
  font-size: 0.85rem; /* πιο compact */
}
.footer-gradient input[type="email"]:focus {
  outline: none;
  box-shadow: 0 0 3px #0dcaf0;
  transition: box-shadow 0.2s;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 767.98px) {
  .hide-mobile {
    display: none !important;
  }
}

/* =========================================
   LIGHT THEME OVERRIDES
   ========================================= */

/* -- Σώμα & βασικά χρώματα -- */
.light-theme body {
  background-color: #f4f4f4 !important;
  color: #111 !important;
}

/* Navbar & Stats Bar */
.light-theme .top-stats-bar,
.light-theme .main-navbar {
  background-color: #e6e6e6 !important;
  border-bottom: 1px solid #ccc !important;
  color: #111 !important;
}

/* Στατιστικά κουτάκια */
.light-theme .stats-wrap .stat-item {
  background-color: #dadada !important;
  color: #111 !important;
}

/* Τίτλοι/Labels στα stats */
.light-theme .label {
  color: #555 !important;
}

/* Εικονίδια (stats, navbar, κ.λπ.) */
.light-theme .stat-icon, 
.light-theme .icon-link i,
.light-theme .nav-link i {
  color: #555 !important;
}

/* Links στη navbar */
.light-theme .navbar-nav .nav-link {
  color: #111 !important;
}
.light-theme .navbar-nav .nav-link:hover {
  color: #007bff !important;
}

/* Search input */
.light-theme .search-input {
  background-color: #fafafa !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
}
.light-theme .search-input:focus {
  box-shadow: 0 0 5px #007bff !important;
}

/* ===================== TABLE OVERRIDES (Light) ===================== */

/* 1) Το table.dark => στο Light Theme γίνεται λευκό */
.light-theme table.table-dark,
.light-theme .table-dark {
  background-color: #fff !important;
  color: #000 !important;
}

/* 2) Thead (κεφαλίδες) */
.light-theme table.table-dark thead,
.light-theme .table-dark thead {
  background-color: #f1f1f1 !important;
  color: #111 !important;
  border-bottom: 2px solid #e2e2e2 !important;
}

/* 4) Body / Hover */
.light-theme table.table-dark tbody,
.light-theme .table-dark tbody {
  background-color: #fff !important;
}
.light-theme table.table-dark tbody tr:hover,
.light-theme .table-dark tbody tr:hover {
  background-color: #eaeaea !important;
}

/* 5) Συνοριακές γραμμές κελιών */
.light-theme .table-dark th, 
.light-theme table.table-dark th,
.light-theme .table-dark td, 
.light-theme table.table-dark td {
  border-color: #ddd !important;
}

/* 6) Κελιά με text-success / text-danger */
.light-theme .text-success {
  color: #198754 !important; 
}
.light-theme .text-danger {
  color: #dc3545 !important; 
}

/* 7) Sparkline canvas => δεν χρειάζεται background */
.light-theme .sparkline-container canvas {
  background-color: transparent !important;
}

/* ===================== FOOTER (Light Theme) ===================== */
.light-theme .footer-gradient {
  background: linear-gradient(120deg, #f9f9f9 0%, #e7e7e7 100%) !important;
  border-top: 1px solid #ccc !important;
  color: #111 !important;
}
.light-theme .footer-link {
  color: #333 !important;
}
.light-theme .footer-link:hover {
  color: #007bff !important;
}
.light-theme .footer-top-green {
  background-color: #2ee03e !important; 
}

/* ===================== BUTTONS, ETC. ===================== */
.light-theme .btn-dark {
  background-color: #ccc !important;
  color: #111 !important;
  border: 1px solid #999 !important;
}
.light-theme .btn-dark:hover {
  background-color: #bbb !important;
}
/* .bg-dark / .text-light */
.light-theme .bg-dark {
  background-color: #ffffff !important;
  color: #000 !important;
}
.light-theme .text-light {
  color: #111 !important;
}
/* Toasts */
.light-theme .toast {
  background-color: #fff !important;
  color: #111 !important;
}
/* Φόρμες (inputs, selects) */
.light-theme input,
.light-theme select,
.light-theme textarea {
  background-color: #fff !important;
  color: #111 !important;
}
.light-theme input:hover,
.light-theme select:hover,
.light-theme textarea:hover {
  border-color: #aaa !important;
}
.light-theme input:focus,
.light-theme select:focus,
.light-theme textarea:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 3px #007bff !important;
}

/* =============== ΠΡΑΣΙΝΟ (θετικές μεταβολές) =============== */
.cell-green {
  /* Πιο απαλό πράσινο με κάποια ημιδιαφάνεια (π.χ. 70% opacity) */
  background-color: rgba(18, 101, 31, 0.7) !important;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  padding: 0.3rem 0.5rem;
  transition: background-color 0.2s ease;
}

.cell-green:hover {
  /* Στο hover γίνεται 100% αδιαφανές, οπότε πιο έντονο */
  background-color: rgba(18, 101, 31, 1) !important;
}

/* =============== ΚΟΚΚΙΝΟ (αρνητικές μεταβολές) =============== */
.cell-red {
  /* Πιο απαλό κόκκινο με 70% opacity */
  background-color: rgba(125, 39, 39, 0.7) !important;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  padding: 0.3rem 0.5rem;
  transition: background-color 0.2s ease;
}

.cell-red:hover {
  /* Πιο έντονο (100% opacity) στο hover */
  background-color: rgba(125, 39, 39, 1) !important;
}

/* =============== ΟΥΔΕΤΕΡΟ (ελάχιστη/μηδενική μεταβολή) =============== */
.cell-none {
  background-color: rgba(255,255,255,0.05) !important; 
  /* ή ό,τι θες για διακριτική ουδέτερη εμφάνιση */
  color: inherit; 
  font-weight: 500;
  text-align: center;
  padding: 0.3rem 0.5rem;
  transition: background-color 0.2s ease;
}
.cell-none:hover {
  /* Στο hover, λίγο πιο έντονο γκρι/λευκό */
  background-color: rgba(255,255,255,0.15) !important;
}


.table-dark {
  --bs-table-hover-bg: #32353996 !important;
}
#graphModalCanvas {
  max-width: 100%;
  /* το ύψος ρυθμίζεται inline ή με JS */
}
.graph-clickable {
  cursor: pointer;
}
.graph-clickable:hover {
  background-color: rgba(255,255,255,0.05);
}
.coin-name-link {
  cursor: pointer;
  text-decoration: underline;
}
.coin-name-link:hover {
  color: #0dcaf0;
}
.table-container {
  overflow-x: auto;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 20px;
}
.table-container table {
  width: 100%;
  border-collapse: collapse;
}

/* =========================================
   DETAILS ROW / ACCORDION (DESKTOP VS MOBILE)
   ========================================= */
.coin-table-with-details .details-row {
  display: none;
}
.coin-table-with-details .details-row.show-details {
  display: none !important;
}

/* =============== Mobile =============== */
@media (max-width: 576px) {
  .desktop-only {
    display: none !important;
  }
  .partial-mobile .desktop-only {
    display: none !important;
  }
  .partial-mobile .coin-row.expanded .desktop-only {
    display: table-cell !important;
  }

  /* Navbar brand μέγεθος */
  .navbar-brand img {
    width: 28px;
    height: 28px;
  }
  .navbar-brand span {
    font-size: 0.95rem;
  }

  /* Στατιστικά wrap */
  .stats-wrap .stat-item.d-none.d-sm-flex {
    display: none !important;  
  }
}

/* =============== Expand Toggle Icon =============== */
.coin-row .expand-toggle {
  display: none;
  cursor: pointer;
  margin-right: 0.5rem;
}
@media (max-width: 576px) {
  .coin-row .expand-toggle {
    display: inline-block;
  }
}
.coin-row.expanded {
  background-color: #2f343a;
}

/* =========================================
   Footer minimal σε mobile
   ========================================= */
@media (max-width: 576px) {
  .footer-cols {
    display: none !important;
  }
}

/* =========================================
   2η γραμμή (details-row) για κινητά
   ========================================= */
.details-row {
  display: none;
  background-color: #2f343a;
}
.details-row.show-details {
  display: table-row;
}
.mobile-extra-stats p {
  margin: 0.3rem 0;
  line-height: 1.3;
}
.expand-toggle {
  cursor: pointer;
  margin-right: 6px;
  color: #ccc;
}
.expand-toggle:hover {
  color: #fff;
}
@media (min-width: 992px) {
  .details-row {
    display: none !important;
  }
}

/* =========================================
   EXTRA OVERRIDES (Dark)
   ========================================= */
th.sortable-header {
  background: #272d34;
}
th.desktop-only {
  background: #272d34;
}
img.coin-icon {
  width: 40px;
  height: 40px;
  background: #272d34;
  padding: 5px;
  border-radius: 5px;
}
footer.footer-gradient.pt-4.pb-3 {
  padding-top: 0px !important;
}
.row.row-cols-1.row-cols-sm-2.row-cols-md-4.g-3 {
  padding-top: 50px;
}
.mb-5.p-4.rounded.shadow-sm {
  background: #252a2f !important;
}
.p-4.rounded.shadow-sm {
  background: #252a2f !important;
}
.mb-5.p-3.rounded.shadow-sm {
  background: #252a2f !important;
}
.p-3.rounded.shadow-sm {
  background: #252a2f !important;
}
h1.fw-bold.mb-4 {
  text-align: center;
}

/* =============== LIGHT THEME FIXES =============== */
/* Override blocks (.p-4, .p-3) στο Light */
.light-theme .p-4.rounded.shadow-sm,
.light-theme .p-3.rounded.shadow-sm {
  background-color: var(--neutral-light) !important;
  color: #111 !important;
}

/* Table headers (sortable-header, desktop-only) στο Light */
.light-theme .table-dark th.sortable-header,
.light-theme .table-dark th.desktop-only {
  background-color: #f1f1f1 !important;
  color: #333 !important;
}

/* Inline style fallback */
.light-theme [style*="background: #2a2a2a"],
.light-theme [style*="background: #252a2f"],
.light-theme [style*="background: #1f1f1f"] {
  background-color: #f8f8f8 !important;
  color: #111 !important;
}

/* =========================================
   MICRO-INTERACTIONS / ANIMATIONS (Optional)
   ========================================= */
/* Παράδειγμα κλάσης για hover animation */
.hover-animate {
  transition: transform 0.2s ease;
}
.hover-animate:hover {
  transform: translateY(-2px)translateX(-2px);
}

/* Παράδειγμα custom gradient button */
.btn-custom-gradient {
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
  border: none;
  color: #fff;
  transition: background 0.3s;
}
.btn-custom-gradient:hover {
  background: linear-gradient(120deg, var(--brand-secondary), var(--brand-accent));
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: #2c3034b5;
}
img.me-2 {
    width: 32px;
    height: 32px;
}
/***********************************
  1) Hero section
************************************/
.details-hero {
  background: linear-gradient(120deg, #191919 0%, #2f2f2f 100%);
  border-radius: 8px;
  position: relative;
}
.coin-title {
  letter-spacing: 0.5px;
}
.text-shadow {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.hero-icon-wrap {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coin-hero-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff;
  object-fit: cover;
  border: 2px solid #fff;
}
/***********************************
  2) Stats cards
************************************/
.stats-cards .stats-card {
  background: #24272b; 
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stats-cards .stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.stats-icon {
  font-size: 1.4rem;
}
.stats-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #0dcaf0 !important;
}
.stats-value {
  font-size: 1.1rem;
  font-weight: 500;
}
/***********************************
  3) Exchanges
************************************/
.exchange-card {
  background-color: #24272b;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.exchange-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.coin-details-container {
  padding: 1rem;
}
.light-theme .modal-content.bg-dark.text-light {
  background-color: #fff !important;
  color: #000 !important;
}
p.small.text-uppercase.text-muted.mb-1 {
    color: #0dcaf0 !important;
}
p.small.text-muted {
    color: #0dcaf0 !important;
}
span.text-uppercase.text-muted.fs-5 {
    color: #0dcaf0 !important;
}
i.fa.fa-search.text-light {
    color: #000000 !important;
}
/* Κοντέινερ γενικών πληροφοριών */
.mobile-extra-stats {
  background-color: #1c1c1c; /* Dark background */
  color: #cccccc;           /* Ανοιχτό κείμενο */
  border: 1px solid #333;   /* Λεπτό, σκούρο περίγραμμα */
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0.5rem auto;
  box-sizing: border-box;
  max-width: 500px; /* Προσαρμόστε το κατά βούληση (μόνο για mobile) */
}

/* Πρώτη γραμμή: Cap & Vol 50%-50% */
.top-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Δύο στήλες, 50% - 50% */
  gap: 0.5rem;
  justify-items: center;
}

/* Δεύτερη γραμμή: 5 οριζόντια stats */
.bottom-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 στήλες */
  gap: 0.5rem;
  margin-top: 0.5rem;
  text-align: center; /* Κέντρο ευθυγράμμιση του κειμένου */
}

.top-row p,
.bottom-row p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Εμφάνιση των strong τίτλων (Cap, Vol, 1H, 24H κλπ.) */
.mobile-extra-stats strong {
  color: #ffffff; 
  font-weight: 600;
}

/* Παράδειγμα styling για τα “hourClass”, “dayClass” κλπ. */
.green-text {
  color: #2ecc71; /* Πράσινο */
}
.red-text {
  color: #e74c3c; /* Κόκκινο */
}
.gray-text {
  color: #bdc3c7; /* Ανοιχτό γκρι */
}

/* Προαιρετικά, αν θέλεις κι άλλο “σπάσιμο” σε μικρότερα κινητά */
@media (max-width: 400px) {
  .bottom-row {
    /* Εναλλακτικά σπάσιμο σε 2-3 στήλες κ.ο.κ. */
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  }
}
/* Κάνει το link να λειτουργεί σαν “κοντέινερ” σε flexbox */
.coin-name-link {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  text-decoration: none;      /* Αφαίρεση υπογράμμισης σε link */
  color: inherit;            /* Κληρονομεί το χρώμα του γονέα (π.χ. από το table cell) */
  cursor: pointer;
  width: 100%;               /* Για να εκτείνεται σε όλο το πλάτος του κελιού */
  box-sizing: border-box;
  padding: 0.25rem 0.5rem;   /* Ενδεικτικά, πρόσθεσε ό,τι padding θες */
}

/* Προαιρετικό styling για το όνομα */
.coin-name {
  font-weight: 600; 
  /* Μπορείς να προσθέσεις χρώμα, π.χ.:
     color: #fff; για dark theme */
}

/* Προαιρετικό styling για το icon */
.expand-icon {
  margin-left: 0.5rem;
  /* π.χ. color: #aaa; */
}
/* =========================
   LIGHT THEME TABLE OVERRIDES
   ========================= */

/* 1) Κάνε το table λευκό, κείμενο μαύρο */
.light-theme table.table-dark,
.light-theme .table-dark {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* 2) Thead (κεφαλίδες) */
.light-theme table.table-dark thead,
.light-theme .table-dark thead {
  background-color: #f1f1f1 !important;
  color: #111 !important;
  border-bottom: 2px solid #e2e2e2 !important;
}

/* 3) Κελιά κεφαλίδων (th) και data (td) με ανοιχτά borders */
.light-theme table.table-dark th,
.light-theme .table-dark th,
.light-theme table.table-dark td,
.light-theme .table-dark td {
  border-color: #ddd !important;
}

/* 4) Body λευκό */
.light-theme table.table-dark tbody,
.light-theme .table-dark tbody {
  background-color: #ffffff !important;
}

/* 5) Στα striped tables, οι μονές σειρές σε απαλό γκρι */
.light-theme table.table-dark.table-striped tbody tr:nth-of-type(odd),
.light-theme .table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fafafa !important; 
}

/* 6) Hover στα tr */
.light-theme table.table-dark.table-hover tbody tr:hover,
.light-theme .table-dark.table-hover tbody tr:hover {
  background-color: #eaeaea !important;
}

/* 7) Αν κάπου υπάρχει .bg-dark σε wrapper */
.light-theme .bg-dark {
  background-color: #ffffff !important;
  color: #000000 !important;
}