/* --- Γενικά --- */
body {
    margin: 0;
    padding: 0;
    background-color: #080a0d;
    font-family: 'Inter', sans-serif;
    color: white;
    transition: background-color 0.3s ease;
    
}
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Κρύβει το οριζόντιο scrollbar */
}

/* --- Navbar / Container --- */
.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    max-width: 1400px;
    margin: 20px auto;
    padding: 10px 20px;
    background: rgba(6, 14, 31, 0.7);
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.05);
}



/* --- Dashboard Grid --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    /* Χρησιμοποιούμε auto για να προσαρμόζεται στο ύψος των στοιχείων */
    grid-template-rows: auto auto;
    grid-template-areas: 
        "sidebar chart ad"
        "sidebar news ad";
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    /* Η εντολή αυτή αναγκάζει όλα τα κουτιά να ξεκινούν από την κορυφή */
    align-items: start;
}

/* --- Περιοχές Grid --- */
.sidebar-assets { 
  grid-area: sidebar; 
  background: rgba(6, 14, 31, 0.7); 
  border-radius: 20px; 
  padding: 20px; 
  height: 92.8vh; 
  border: 1px solid rgba(255, 255, 255, 0.05);
  
}

.sidebar-assets h3 {
    margin-top: 0;
    font-size: 1.2rem;
    margin-bottom: 45px;
    text-align: center;
    margin-top: 10px;
}

.sidebar-assets button {
  font-size: 1rem;
  padding-bottom: 32px;
  padding-top: 32px;
  text-align: left;
  
}

.main-chart { 
  grid-area: chart; 
  background: rgba(6, 14, 31, 0.7); 
  border-radius: 20px; 
  padding: 20px; 
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.main-chart h3 {
    margin-top: 0;
    font-size: 1.2rem;
    margin-bottom: 45px;
    text-align: center;
    font-weight: bold;
}


.news-feed { 
  grid-area: news; 
  background: rgba(6, 14, 31, 0.7); 
  border-radius: 20px; 
  padding: 20px; 
  border: 1px solid rgba(255, 255, 255, 0.05); 
  margin-bottom: 40px;
}

.news-feed ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Ευθυγράμμιση αριστερά για καλύτερη ανάγνωση */
    
}

.news-feed ul li {
    padding: 15px 20px;
    margin-bottom: 15px;
    border-left: 4px solid #ffc800; /* Η γραμμή που κάνει τη διαφορά */
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    cursor: pointer;
}

.news-feed ul li:hover {
    background: rgba(255, 255, 255, 0.06);
    border-left-width: 8px; /* Μεγαλώνει η γραμμή στο hover */
}

body.light-mode .news-feed ul li {
    background: rgba(0, 0, 0, 0.03);
    border-left: 4px solid #ffa600;
}

.news-feed ul li a {
    text-decoration: none;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 500;
    display: block;
}

/* Light Mode Προσαρμογή */
body.light-mode .news-feed ul li {
    background: rgba(0, 0, 0, 0.03);
    border-left: 4px solid #ffa600;
}

body.light-mode .news-feed ul li:hover {
    background: rgba(0, 0, 0, 0.1);
    border-left-width: 8px;
}



.news-feed h3 {
    margin-top: 0;
    font-size: 1.2rem;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 1800;
}

.ad-space {
    grid-area: ad; /* Συνδέεται με την περιοχή ad που ορίσαμε παραπάνω */
    background: rgba(6, 14, 31, 0.7);
    border-radius: 20px;
    padding: 20px;
    height: 92.8vh;
    grid-row: 1 / 3; /* Πιάνει όλο το ύψος μέχρι το τέλος του footer */
    
}

.ad-space h3 {
    margin-top: 0;
    font-size: 1.2rem;
    margin-bottom: 45px;
    text-align: center;
    font-weight: 1800;
}


/* styling adds */

.ad-banner {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 45px; /* Μειωμένο από 45px σε 20px */
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    border-left: 5px solid #ffc800;
    width: 100%;       /* Διασφαλίζει ότι πιάνει όλο το πλάτος */
    box-sizing: border-box; /* Πολύ σημαντικό: ενσωματώνει το padding στο πλάτος */
}


.ad-banner:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}

.ad-btn {
    background: #ffc800;
    color: #000;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}

body.light-mode .ad-banner:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Χρώματα στις γραμμές */
.bitmedia { border-left-color: #3b82f6; }
.coinzilla { border-left-color: #ef4444; }
.bybit { border-left-color: #f59e0b; }


/* --- Στοιχεία --- */
.asset-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: white;
    padding: 15px;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.asset-btn:hover { 
  background: rgba(255, 255, 255, 0.05); 
  color: #ffc800;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 9px;
    margin: 0;
}



/* --- Theme Switch --- */

.theme-switch {
  position: relative;
  display: flex;
  justify-content: center;
  direction: rtl;
  
}

#theme-checkbox {
  display: none;
  
}

#theme-checkbox + label {
  /* change the font-size below to change the size of the switch button*/
  font-size: 2rem;
  height: 1em;
  width: 2.5em;
  border-radius: 0.25em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  background-color: #cecece;
  position: relative;
  border-radius: 50px;
}

#theme-checkbox:checked + label {
  background-color: #3a3a3a;
}

#theme-checkbox + label:active {
  transform: scale(0.85);
  transition: transform 0.2s;
}

#theme-checkbox + label div {
  width: 0.8em;
  height: 0.8em;
  border-radius: inherit;
  position: absolute;
  top: 0.1em;
  left: 0.1em;
  z-index: 10;
  transition: 0.5s cubic-bezier(1, 0.33, 0.11, 1.34);
  background-color: #f2f2f2;
  
}

#theme-checkbox:checked + label div {
  /* left: calc(2.5em - .8em - .1em); */
  left: 1.6em;
  background-color: #212121;
}

#theme-checkbox + label span {
  display: flex;
}

#theme-checkbox + label svg {
  display: inline-block;
  height: 1em;
  width: 1em;
  padding: 0.15em;
  box-sizing: border-box;
}

#theme-checkbox + label span:first-of-type {
  color: #3a3a3a;
}

#theme-checkbox + label span:last-of-type {
  color: #cecece;
}


/* --- Responsive --- */
@media (max-width: 1024px) {
    /* Αλλάζουμε το grid σε 2 στήλες */
    .dashboard-grid { 
        grid-template-columns: 250px 1fr; 
        grid-template-areas: 
            "sidebar chart" 
            "sidebar news"
            "sidebar ad"; /* Προσθέτουμε το ad από κάτω */
    }
    .ad-space { 
        display: block; /* Το κάνουμε να εμφανίζεται */
        height: auto;   /* Δεν θέλουμε σταθερό ύψος εδώ */
    }
}

@media (max-width: 768px) {
    /* 1. Αφαιρούμε τα περιττά κενά από το grid */
    .dashboard-grid { 
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 5px !important; /* Πολύ μικρό padding για να μην υπάρχουν κενά */
        gap: 10px !important;   /* Πιο μικρή απόσταση ανάμεσα στα κουτιά */
    }

    /* 2. Κάνουμε τα κουτιά να γεμίζουν τον χώρο */
    .main-chart, .news-feed, .ad-space {
        margin-right: 0  !important; /* Κεντράρουμε τα κουτιά */
        width: 90% !important;
        padding: 15px !important; /* Λιγότερο padding μέσα στα κουτιά */
        margin: 0 !important;
        border-radius: 12px !important; /* Λίγο πιο μικρή καμπύλη για να μη χάνεται χώρος */
    }

 .ad-space {
    width: 100% !important;
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center; /* Κεντράρει τα παιδιά (banners) οριζόντια */
        
    }

    /* Η ρύθμιση για το banner */
    .ad-banner {
        width: 95% !important;        /* Καταλαμβάνει το 95% του διαθέσιμου χώρου */
        margin: 0 auto 10px auto !important; /* Το "auto" κάνει το κεντράρισμα */
        box-sizing: border-box;       /* Σημαντικό για να μη βγαίνει έξω */
        padding: 15px !important;     /* Εσωτερικό περιθώριο */
        margin-left: 0% !important; /* Αφαιρούμε το margin-left */
    }

    /* 4. Μικραίνουμε λίγο τα h3 για να μην πιάνουν πολύ ύψος */
    h3 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        font-size: 1.1rem !important;
    }

    .assets-scroll {
        display: block !important;
        width: 100% !important;
    }

    /* 2. Κάνουμε τα κουμπιά πιο "σφιχτά" για να μοιάζουν με το desktop */
    .asset-btn {
        width: 100% !important;
        text-align: center !important;       /* Στοίχιση κειμένου στο κέντρο */
        display: block !important;
        padding: 15px 20 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        font-size: 1rem !important;
    }

    /* 3. Διορθώνουμε το container της μπάρας */
   .sidebar-assets {
        width: 94% !important;        /* Λιγότερο από 100% για να αφήνει μικρό κενό δεξιά-αριστερά */
        margin: 0 auto 15px auto !important; /* Το "auto" κεντράρει το κουτί στην οθόνη */
        padding: 20px 10px !important;       /* Εσωτερικό κενό */
        box-sizing: border-box !important;
        border-radius: 15px !important;      /* Στρογγυλεμένες γωνίες */
    }
}

/* --- Light Mode --- */
body.light-mode { background-color: #e2e8f0; }
body.light-mode .sidebar-assets,
body.light-mode .main-chart,
body.light-mode .news-feed,
body.light-mode .ad-space,
body.light-mode .container {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ccc !important;
    color: #2c4c7c !important;
}

body.light-mode h3, 
body.light-mode .site-title, 
body.light-mode .asset-btn,
body.light-mode #news-list a {
    color: #111386 !important;
}


body.light-mode .asset-btn:hover { 
  background: rgba(0, 0, 0, 0.1) !important; 
  color: #ff9900 !important; 
  /* Επαναπροσδιόρισε ολόκληρο το border-bottom */
}

body.light-mode .asset-btn{
  border-bottom: 1px solid rgba(0, 0, 0, 0.122) !important;
}