/* =========================================
   1. ΓΕΝΙΚΑ
   ========================================= */

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

.bg-mint{
  background-color: #f0f5f1;
}

/* =========================================
   2. HEADER & MENU (SCOPED)
   ========================================= */

.w3-top{
  z-index: 9999 !important;
}

/* ΜΟΝΟ το δικό μας header bar */
.header-bar{
  background: linear-gradient(90deg, #1b4332 0%, #2d6a4f 100%) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  height: 60px;

  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  z-index: 1000;
}

/* 3 ζώνες header */
.header-left,
.header-center,
.header-right{
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.header-left{  flex: 1; justify-content: flex-start; }
.header-center{ flex: 2; justify-content: center; gap: 20px; }
.header-right{ flex: 1; justify-content: flex-end; }

.brand-title{
  margin-left: 10px;
}

/* Desktop menu */
.nav-center-desktop{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  white-space: nowrap;
}

/* Login button */
.nav-btn{
  border-radius: 50px !important;
  padding: 8px 25px !important;
  transition: all 0.3s ease;
  font-weight: bold;
  white-space: nowrap;
}

/* Hamburger default hidden */
.hamburger-btn{
  display: none;
}

/* Mobile menu container */
#mobileNav{
  background: linear-gradient(90deg, #1b4332 0%, #2d6a4f 100%) !important;
  position: absolute;
  top: 60px;
  width: 100%;
  z-index: 999;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: none; /* default hidden */
}

#mobileNav a{
  color: white !important;
}

#mobileNav a.active-link{
  background-color: white !important;
  color: #2d6a4f !important;
  font-weight: bold;
}

/* κάτω από 1200px: κρύψε desktop menu, δείξε hamburger */
@media screen and (max-width: 1200px){
  .nav-center-desktop{ display: none !important; }
  .hamburger-btn{ display: inline-block !important; }
}

/* πάνω από 1201px: mobile menu κλειστό */
@media screen and (min-width: 1201px){
  #mobileNav{ display: none !important; }
}

/* πολύ μικρές οθόνες */
@media screen and (max-width: 460px){
  .w3-large{
    font-size: 0.9rem !important;
  }
  .brand-title{
    margin-left: 6px;
  }
  .nav-btn{
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
  }
  .fa-pagelines{
    font-size: 1.1rem !important;
  }
}

/* =========================================
   3. HERO (INDEX)
   ========================================= */

.hero-section{
  position: relative;
  height: 600px;
  width: 100%;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: #ffffff;
  margin-top: 50px;
}

.hero-video{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}

.hero-content{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 95%;
  padding: 20px;
  box-sizing: border-box;
}

.hero-content h1{
  white-space: nowrap;
  font-size: 3.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  margin: 0 0 10px 0;
}

@media (max-width: 992px){
  .hero-content h1{
    white-space: normal;
    font-size: 2.5rem;
  }
}

.hero-subtitle{
  font-size: 1.2rem;
  margin: 20px 0;
}

.hero-buttons{
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.btn-custom{
  padding: 14px 35px;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-block;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.btn-primary{
  background-color: #fceea7;
  color: #1a4d2e;
  border: 2px solid #fceea7;
}

.btn-primary:hover{
  background-color: #e6d690;
  border-color: #e6d690;
  transform: translateY(-3px);
}

.btn-outline{
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.btn-outline:hover{
  background-color: #ffffff;
  color: #1a4d2e;
  transform: translateY(-3px);
}

/* main content index */
.main-content{
  max-width: 1200px;
  padding: 60px 15px;
  box-sizing: border-box;
}

/* =========================================
   4. ΚΑΡΤΕΣ & UI
   ========================================= */

.w3-card, .w3-card-2, .w3-white, .action-card, .action-list-item{
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}

.w3-card:hover, .action-card:hover, .action-list-item:hover{
  transform: translateY(-7px);
  box-shadow: 0 15px 30px rgba(45, 106, 79, 0.15) !important;
  border-color: #40916c;
  background-color: #fff !important;
}


.action-card{
  cursor: pointer;
}

.action-card:hover i{
  transform: scale(1.2);
  color: #1a4d2e !important;
  transition: transform 0.3s ease;
}

.action-card-minh{
  min-height: 300px;
}



/* =========================================
   5. FORMS
   ========================================= */

.form-container{
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 1px solid #e0e0e0;
}

.custom-input, .form-input{
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px;
  background-color: #f9f9f9;
  width: 100%;
  margin-bottom: 15px;
  outline: none;
  transition: all 0.3s;
  box-sizing: border-box;
}

.custom-input:focus, .form-input:focus{
  border-color: #2d6a4f;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.submit-btn, .btn-submit{
  background-color: #2d6a4f;
  color: white;
  font-weight: bold;
  border-radius: 25px;
  padding: 14px 28px;
  width: 100%;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin-top: 10px;
}

.submit-btn:hover, .btn-submit:hover{
  background-color: #1b4332;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* =========================================
   6. ACTIONS PAGE (ΛΙΣΤΑ)
   ========================================= */

.actions-wrapper{
  max-width: 1000px;
  margin-top: 100px;
  min-height: 80vh;
  padding: 0 15px 50px 15px;
  box-sizing: border-box;
}

/* Το “Δράσεις” + κουμπί πάνω */
.actions-topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;

  margin-bottom: 30px;
  padding: 0 10px;
  box-sizing: border-box;

  /* ΑΥΤΟ ΣΟΥ ΕΦΤΙΑΧΝΕ ΤΟ “ΣΠΑΣΙΜΟ”:
     αν κάπου έχεις text-align:center κληρονομιά, εδώ το μηδενίζουμε */
  text-align: left;
}

.actions-title{
  color: #2d6a4f;
  font-weight: bold;
  margin: 0;
}

@media (max-width: 700px){
  .actions-topbar{
    flex-wrap: wrap;
  }
}

/* =========================================
   7. ACCORDION + LIST ITEMS
   ========================================= */

.category-accordion{
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #cce3de;
}

.category-header{
  background-color: #dbece2;
  color: #1b4332;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  transition: background 0.3s;
}

.category-header:hover{
  background-color: #cce3de;
}

.category-header::after{
  content: '\f107';
  font-family: 'FontAwesome';
  margin-left: auto;
  transition: transform 0.3s;
}

.category-accordion[open] .category-header::after{
  transform: rotate(180deg);
}

.category-container{
  background-color: #f8fbf9;
  padding: 20px;
  border-top: 1px solid #cce3de;
}

.action-list-item{
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.action-list-img{
  width: 200px;
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
}

.action-list-content{
  padding: 20px;
  flex-grow: 1;
}

.action-list-title{
  font-weight: bold;
  font-size: 1.2rem;
  margin: 0 0 8px 0;
}

.btn-outline-small{
  border: 2px solid #2d6a4f;
  color: #2d6a4f;
  background-color: transparent;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  transition: all 0.3s;
}

.btn-outline-small:hover{
  background-color: #2d6a4f;
  color: white;
  box-shadow: 0 4px 8px rgba(45, 106, 79, 0.2);
}

@media (max-width: 600px){
  .action-list-item{
    flex-direction: column;
    align-items: stretch;
  }
  .action-list-img{
    width: 100%;
    height: 200px;
  }
}

.empty-category-note{
  font-style: italic;
}

/* =========================================
   8. ACTION DETAIL PAGE
   ========================================= */

.action-detail-wrapper{
  max-width: 1000px;
  margin-top: 100px;
  margin-bottom: 60px;
  padding: 0 15px;
  box-sizing: border-box;
}

.action-detail-img{
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 0 0;
}

.action-detail-title{
  color: #2d6a4f;
  font-weight: bold;
  margin-top: 10px;
}

.action-detail-lead{
  font-size: 1.1rem;
}

.action-detail-text{
  line-height: 1.8;
  font-size: 1.05rem;
}

.info-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.info-box{
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
}

.info-label{
  font-size: 0.8rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  margin-bottom: 5px;
}

.info-value{
  font-size: 1.1rem;
  font-weight: bold;
  color: #2d6a4f;
}

.breadcrumbs{
  color: #6c757d;
  font-size: 0.95rem;
  margin-bottom: 15px;
}

.breadcrumbs a{
  text-decoration: none;
  color: #6c757d;
}

.breadcrumbs a:hover{
  color: #2d6a4f;
}

.breadcrumb-sep{
  margin: 0 5px;
}

/* =========================================
   9. BUTTONS + FOOTER
   ========================================= */

.btn-header-action{
  background-color: #1b4332;
  color: #ffffff !important;
  padding: 10px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-header-action:hover{
  background-color: #2d6a4f;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.footer-sticky{
  margin-top: auto;
}

/* ACTIONS.HTML – αντικατάσταση inline */

.actions-wrapper{
  max-width: 1000px;
  margin-top: 100px;
  min-height: 80vh;
  padding-bottom: 50px;
  box-sizing: border-box;
}

/* w3-content περιορίζει στα 980px – το νικάμε */
.w3-content.actions-wrapper{
  max-width: 1000px !important;
}

/* Αντικαθιστά:
   display:flex, justify-content, align-items, margin-bottom, padding
*/
.actions-topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 10px;
  gap: 20px;
}

/* Αντικαθιστά:
   color, font-weight, margin
*/
.actions-title{
  color: #2d6a4f;
  font-weight: bold;
  margin: 0;
  white-space: nowrap;
}

/* ACTION DETAIL PAGE */
.action-detail-wrapper{
  max-width: 1000px;
  margin-top: 100px;
  margin-bottom: 60px;
  padding: 0 15px;
  box-sizing: border-box;
}

.breadcrumb-sep{
  margin: 0 5px;
}

.action-detail-title{
  color: #2d6a4f;
  font-weight: bold;
  margin-top: 10px;
}

.action-detail-lead{
  font-size: 1.1rem;
}

.action-detail-text{
  line-height: 1.8;
  font-size: 1.05rem;
}

/* Κατάργηση υπογράμμισης για τα Link των καρτών */
.card-link, 
.card-link:hover, 
.card-link:focus, 
.card-link:active {
    text-decoration: none !important; /* Εξαφανίζει τη γραμμή */
    color: inherit !important;       /* Κρατάει το χρώμα που έχουν ήδη τα γράμματα */
    outline: none !important;        /* Αφαιρεί το περίγραμμα στο κλικ */
}

/* Σιγουρευόμαστε ότι και τα στοιχεία μέσα στο link δεν θα υπογραμμιστούν */
.card-link h3, 
.card-link p {
    text-decoration: none !important;
}

/* Διόρθωση για τον πίνακα στις δράσεις μου */
@media screen and (max-width: 600px) {
    /* Κάνουμε τον πίνακα να μην συμπεριφέρεται σαν πίνακας */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Κρύβουμε το header του πίνακα (Εικόνα, Τίτλος κλπ) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { 
        border: 1px solid #ccc; 
        margin-bottom: 10px;
        background: #fff;
        border-radius: 8px;
        padding: 10px;
    }
    
    td { 
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        text-align: right;
    }
    
    td:last-child {
        border-bottom: none;
    }

    /* Προσθέτουμε ετικέτες πριν από κάθε δεδομένο */
    td:before { 
        position: absolute;
        left: 10px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #2d6a4f;
    }
    
    /* Ορίζουμε τι θα γράφει κάθε "κελιά" στο κινητό */
    td:nth-of-type(1):before { content: "Εικόνα"; }
    td:nth-of-type(2):before { content: "Τίτλος"; }
    td:nth-of-type(3):before { content: "Ημερομηνία"; }
    td:nth-of-type(4):before { content: "Ενέργειες"; }

    /* Διόρθωση για την εικόνα και τα κουμπιά στο κινητό */
    td img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .w3-button {
        width: 100%;
        margin-bottom: 5px;
    }
}

/***********************************************************/
@media screen and (max-width: 600px) {
    /* Κάνει τον πίνακα να μην συμπεριφέρεται σαν πίνακας */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Κρύβει την κεφαλίδα (Τίτλος, Χρήστης κλπ) γιατί θα μπερδεύει */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { 
        border: 1px solid #ccc; 
        margin-bottom: 10px;
    }
    
    td { 
        /* Κάνει κάθε κελί να πιάνει όλο το πλάτος και να πηγαίνει από κάτω */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50% !important; 
        text-align: left !important;
    }

    /* Προσθέτει την ετικέτα (Label) πριν από κάθε κείμενο στο κινητό */
    td:before { 
        position: absolute;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        font-weight: bold;
    }

    /* Ορίζουμε τι θα γράφει το "Label" σε κάθε κελί */
    td:nth-of-type(1):before { content: "Τίτλος:"; }
    td:nth-of-type(2):before { content: "Χρήστης:"; }
    td:nth-of-type(3):before { content: "Κατηγορία:"; }
    td:nth-of-type(4):before { content: "Ενέργειες:"; }
}