/* ==========================================================================
   osTicket v1.18.x - Fully Responsive & Corporate Custom Skin
   Primary Color: #1658A2 | Secondary Color: #878888
   ========================================================================== */

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  background-color: #f5f7fa; 
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
input, select, textarea {
  font-family: inherit;
  color: #333;
}
b, strong { font-weight: 600; }
blockquote { margin: 1em 40px; color: #878888; border-left: 3px solid #1658A2; padding-left: 10px; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #e0e0e0; margin: 1.5em 0; }
small { font-size: 85%; }
ul, ol { margin: 1em 0; padding: 0 0 0 25px; }
img { border: 0; vertical-align: middle; max-width: 100%; height: auto; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; font-weight: 500; margin-bottom: 5px; display: inline-block; }

/* Φόρμες & Πεδία Εισαγωγής */
input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin: 6px 0;
  border: 1px solid #ced4da;
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
  border-color: #1658A2;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 88, 162, 0.15);
}

textarea { overflow: auto; vertical-align: top; resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td { vertical-align: middle; padding: 12px; border-bottom: 1px solid #eee; }
th { text-align: left; font-weight: 600; background-color: #f8f9fa; color: #495057; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; padding: 0; font-weight: 600; color: #212529; }
h1 { color: #1658A2; font-size: 24px; }
h2, .subject { font-size: 18px; }
h3 { font-size: 16px; }

/* Σύνδεσμοι (Links) */
a, .link { color: #1658A2; text-decoration: none; transition: color 0.2s; }
a:hover, .link:hover { color: #0f3d73; text-decoration: underline; cursor: pointer; }

/* Helpers */
.centered { text-align: center; }
.clear { clear: both; height: 1px; }
.hidden { display: none; }
.faded { color: #878888; }

/* Κεντρικό Πλαίσιο (Container) */
#container {
  background: #fff;
  width: 95%;
  max-width: 1140px;
  margin: 30px auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Επικεφαλίδα (Header) */
#header {
  position: relative;
  padding: 20px 30px;
  background: #fff;
  border-bottom: 1px solid #eef2f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
#logo { height: auto; display: flex; align-items: center; }
#header #logo img { max-height: 55px; width: auto; }

/* Μπάρα Πλοήγησης (Menu) */
#nav {
  margin: 0;
  padding: 10px 30px;
  background: #1658A2; /* Εταιρικό Μπλε */
  white-space: nowrap;
  display: flex;
  gap: 8px;
  overflow-x: auto; /* Επιτρέπει scroll στα κινητά αν δεν χωράει */
}
#nav li { list-style: none; display: inline-block; }
#nav li a {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s;
  background-image: none !important; /* Αφαίρεση παλιών εικονιδίων */
  padding-left: 16px !important; 
}
#nav li a:hover, #nav li a.active {
  background-color: #878888 !important; /* Εταιρικό Γκρι στα Hover/Active */
  color: #fff !important;
}

/* Περιοχή Περιεχομένου */
#content {
  padding: 30px;
  min-height: 400px;
  box-sizing: border-box;
}

/* Κουμπιά (Flat Corporate Style) */
.button, input[type="submit"], input[type="button"] {
  background-color: #1658A2 !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.2s !important;
}
.button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background-color: #0f3d73 !important;
}
.green.button { background-color: #2ecc71 !important; }
.green.button:hover { background-color: #27ae60 !important; }
.blue.button { background-color: #878888 !important; } /* Δευτερεύον κουμπί με το Γκρι σας */
.blue.button:hover { background-color: #6e6f6f !important; }

/* Ειδοποιήσεις (Alerts) */
#msg_notice, #msg_warning, #msg_error, #msg_info {
  margin-bottom: 20px;
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 500;
}
#msg_notice { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
#msg_warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
#msg_error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
#msg_info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* Υποσέλιδο (Footer) */
#footer {
  padding: 25px 30px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  background-color: #878888; /* Εταιρικό Γκρι στο Footer */
  border-top: 1px solid #eef2f5;
}
#footer a { color: #fff; font-weight: bold; }

/* Αρχική Σελίδα (Landing Page - Κουμπιά Υποβολής) */
#landing_page #new_ticket, #landing_page #check_status {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 25px 20px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
  background-image: none !important; /* Αφαίρεση παλιών εικόνων */
  padding-left: 20px !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE MEDIA QUERIES (Για Κινητά & Tablet)
   ========================================================================== */

@media (min-width: 768px) {
  #landing_page #new_ticket, #landing_page #check_status {
    display: inline-block;
    width: 48%;
    vertical-align: top;
  }
  #landing_page #check_status {
    margin-left: 4%;
  }
}

@media (max-width: 767px) {
  #header {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  #nav {
    padding: 10px 15px;
  }
  #content {
    padding: 15px;
  }
  table, thead, tbody, th, td, tr {
    display: block; /* Μετατροπή των πινάκων σε block για να διαβάζονται στο κινητό */
  }
  th {
    text-align: center;
  }
  td {
    text-align: left;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 10px;
  }
}
/* ==========================================================================
   ULTIMATE MOBILE RESPONSIVE MEDIA QUERIES (Για Κινητά & Tablet)
   ========================================================================== */

@media (max-width: 991px) {
  /* Μεσαίες οθόνες / Tablet */
  .custom-hero-banner {
    padding: 60px 8% !important;
  }
  .custom-buttons-container {
    gap: 20px !important;
    max-width: 100% !important;
    padding: 0 30px !important;
  }
  .custom-card-box h3 {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  /* Μικρές οθόνες / Κινητά Τηλέφωνα */
  #header {
    flex-direction: column !important;
    text-align: center !important;
    padding: 15px 20px !important;
    gap: 15px !important;
  }
  .user-nav-box {
    text-align: center !important;
    width: 100% !important;
  }
  #nav {
    flex-direction: column !important;
    padding: 5px 20px !important;
  }
  #nav li {
    width: 100% !important;
    text-align: center !important;
  }
  #nav li a {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
  }
  .custom-hero-banner {
    padding: 50px 5% !important;
  }
  .custom-hero-banner h2 {
    font-size: 22px !important;
  }
  .custom-hero-banner p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* Οι κάρτες στοιχίζονται η μία κάτω από την άλλη στα κινητά */
  .custom-buttons-container {
    flex-direction: column !important;
    gap: 25px !important;
    margin: 30px auto !important;
    padding: 0 20px !important;
  }
  .custom-card-box {
    max-width: 100% !important;
    width: 100% !important;
    padding: 30px 20px !important;
  }
  .custom-flat-btn {
    font-size: 14px !important;
    padding: 12px 15px !important;
  }
  .kb-grid {
    flex-direction: column !important;
  }
}