/* Material-like theme with clear light/dark */
:root{
  --m3-bg:#0f1116;--m3-bg2:#111827;--m3-surface:#263043;--m3-surface-select:#66799b;--m3-primary:#1a73e8;--m3-on-primary:#fff;--m3-text:#e8eaed;--m3-muted:#b8c1d4;
  --m3-border:#263043;--m3-ok:#1db954;--m3-err:#ff4d61
}
body.light{
  --m3-bg:#f5f7fb;--m3-bg2:#f0f4ff;--m3-surface:#ffffff;--m3-text:#202636;--m3-muted:#5b6c8b;--m3-border:#dde3ef;
  --m3-primary:#1a73e8;--m3-on-primary:#fff;--m3-ok:#16a34a;--m3-err:#e11d48;--m3-surface-select:#f0f4ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--m3-bg),var(--m3-bg2));color:var(--m3-text);font:1rem/1.55 system-ui,Segoe UI,Roboto,Arial;transition:background .15s ease,color .15s ease}
a{color:var(--m3-primary);text-decoration:none}
.appbar{position:sticky;top:0;z-index:10;background:var(--m3-surface);border-bottom:1px solid var(--m3-border);
       display:flex;align-items:center;justify-content:space-between;padding:10px 16px;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--m3-primary)}
.actions{display:flex;gap:8px;align-items:center}
.inline{display:inline}
.container{max-width:1350px;margin:22px auto;padding:0 16px}
.card{background:var(--m3-surface);border:1px solid var(--m3-border);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.card.narrow{max-width:520px;margin:40px auto}
h1{font-size:20px;margin:0 0 10px}
.small{color:var(--m3-muted);font-size:13px}
.footer{text-align:center;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid var(--m3-border);
     background:#1b2230;color:#e7ecf7;text-decoration:none;font-weight:600;cursor:pointer}
body.light .btn{background:#eef2ff;color:#111827}
.btn.primary{background:var(--m3-primary);border-color:var(--m3-primary);color:var(--m3-on-primary)}
.btn.danger{background:#2b1b21;border-color:#6a2333;color:#ff8aa1}
input[type=text],input[type=password],input[type=file]{width:100%;padding:12px;border:1px solid var(--m3-border);border-radius:12px;background:#0f1524;color:var(--m3-text)}
body.light input[type=text],body.light input[type=password],body.light input[type=file]{background:#fff;color:#111}
label{display:block;margin:12px 0 6px;color:var(--m3-muted)}
.right{display:flex;justify-content:flex-end;gap:8px}
.mt12{margin-top:12px}
.table-wrap{overflow:auto;border:1px solid var(--m3-border);border-radius:12px}
.table{border-collapse:collapse;width:100%;min-width:800px}
.table th,.table td{border:1px solid var(--m3-border);padding:10px 12px;vertical-align:top}
.table th{position:sticky;top:0;background:#1a2233;color:#e7ecf7}
body.light .table th{background:#f0f4ff;color:#111827}
.table tr:nth-child(even) td{background:rgba(255,255,255,.08)}
body.light .table tr:nth-child(even) td{background:#eaeced}
.alert{padding:12px;border-radius:12px;margin:12px 0;border:1px solid var(--m3-border)}
.alert.ok{background:rgba(29,185,84,.12);border-color:#1db954}
.alert.err{background:rgba(255,77,97,.12);border-color:#ff4d61}
.breadcrumbs{display:flex;gap:6px;align-items:center;margin:0 0 8px;color:var(--m3-muted)}
.breadcrumbs a{color:var(--m3-muted);text-decoration:none}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

  .table th:nth-child(1),
  .table td:nth-child(1) { max-width: 210px; } /* Ονοματεπώνυμο */


  .table th:nth-child(2),
  .table td:nth-child(2) { max-width: 200px; }  /* Τμήμα */

  .table th:nth-child(3),
  .table td:nth-child(3)
  { max-width: 120px; }  

  .table th:nth-child(4),
  .table td:nth-child(4),
  .table th:nth-child(5),
  .table td:nth-child(5),
  .table th:nth-child(6),
  .table td:nth-child(6)
  { max-width: 80px; }  

  .table th:nth-child(7),
  .table td:nth-child(7) { max-width: 200px; } /* Παρατήρηση */

/* Sort arrows for table headers */
#dataTable thead th {
  position: relative;
}
#dataTable thead th.sorted-asc::after,
#dataTable thead th.sorted-desc::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  border: 5px solid transparent;
  transform: translateY(-1px);
}
#dataTable thead th.sorted-asc::after {
  border-bottom-color: currentColor; /* ↑ */
}
#dataTable thead th.sorted-desc::after {
  border-top-color: currentColor;    /* ↓ */
}
th.sortable { cursor: pointer; position: relative; }
th.sort-asc::after  { content: "▲"; position: absolute; right: .5rem; }
th.sort-desc::after { content: "▼"; position: absolute; right: .5rem; }
.mt6{margin-top:6px}
.mb12{margin-bottom:12px}
select#sheetSelect {
    padding: 10px;
    margin-bottom: 10px;
	background-color: lightgray;
}

/* --- Material-style select --- */
.select-label {
  display:block;
  margin: 12px 0 6px;
  color: var(--m3-muted);
  font-weight: 500;
  font-size: 14px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  max-width: 360px;
  padding: 12px 40px 12px 14px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--m3-border);
  background: var(--m3-surface);
  color: var(--m3-text);
  transition: border-color .2s, box-shadow .2s, background .2s;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--m3-muted) 50%),
    linear-gradient(135deg, var(--m3-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:hover {
  border-color: var(--m3-primary);
}
select:focus {
  outline: none;
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--m3-primary) 40%, transparent);
}

/* Light overrides for consistency */
body.light select {
  background: var(--m3-surface);
  color: var(--m3-text);
}

/* Option styling */
select option {
  color: var(--m3-text);
  background: var(--m3-surface);
}
.select-field {
  display:inline-flex;
  flex-direction: column;
  gap:4px;
  margin: 6px 0 12px;
}
/* --- Custom Material Select --- */
.mselect{ position: relative; display: inline-block; }
.mselect select{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none; /* κρατάει τη φόρμα/submit, αλλά δεν φαίνεται */
}

.mselect__button{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; min-width: 320px; max-width: 420px;
  background: var(--m3-surface-select);
  color: var(--m3-text);
  border:1px solid var(--m3-border);
  border-radius:12px; padding:12px 14px;
  cursor:pointer; font-size:15px; line-height:1.4;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .2s, box-shadow .2s, background .2s;
  margin-bottom:15px;
  font-weight: bold;
}
.mselect__button:hover{ border-color: var(--m3-primary); }
.mselect__button:focus-visible{
  outline:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--m3-primary) 40%, transparent);
  border-color: var(--m3-primary);
}
.mselect__chev{ width: 20px; height:20px; transform: rotate(0deg); transition: transform .15s; }
.mselect[aria-expanded="true"] .mselect__chev{ transform: rotate(180deg); }

.mselect__menu{
  position:absolute; left:0; top: calc(100% + 6px);
  min-width: 100%; max-width: 520px; max-height: 350px;
  overflow:auto;
  background: var(--m3-surface);
  color: var(--m3-text);
  border:1px solid var(--m3-border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
  padding:6px;
  z-index:1000;
  display:none;
}
.mselect[aria-expanded="true"] .mselect__menu{ display:block; }

.mselect__item{
  display:flex; align-items:center;
  gap:8px; padding:10px 10px; border-radius:10px;
  cursor:pointer; user-select:none;
}
.mselect__item[aria-selected="true"]{
  background: color-mix(in srgb, var(--m3-primary) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--m3-primary) 35%, transparent);
}
.mselect__item:hover,
.mselect__item[data-active="true"]{
  background: color-mix(in srgb, var(--m3-primary) 10%, transparent);
}
.mselect__check{
  width:12px; height:12px; border-radius:2px;
  border:1px solid var(--m3-border);
  background: transparent; flex: 0 0 12px;
}
.mselect__item[aria-selected="true"] .mselect__check{
  background: var(--m3-primary); border-color: var(--m3-primary);
}

	
/* --- Responsive συμπεριφορά πίνακα --- */

/* Ομαλή συμπεριφορά scroll */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--m3-border);
  border-radius: 12px;
  position: relative;
  max-height: 80vh;
  -webkit-overflow-scrolling: touch;
}

/* Κανονικό μέγεθος σε desktop */
.table-wrap {
  transform: scale(1);
  transform-origin: top left;
  transition: transform 0.3s ease;
}

/* Σε κινητά ή μικρές οθόνες (<768px), μείωσε το zoom στο 50% */
@media (max-width: 768px) {
  .table-wrap {
    font-size: scale(0.5);
    transform-origin: top left;
  }

  /* Προσαρμογή πλάτους ώστε να μην κόβεται */
  .table {
    min-width: 1800px; /* εξαρτάται από τις στήλες σου */
  }
}
/* Σε tablets / κινητά */
@media (max-width: 768px) {
  html {
    font-size: 85%; /* 1rem ≈ 13.6px → -15% */
  }
}

/* Σε πολύ μικρές οθόνες */
@media (max-width: 480px) {
  html {
    font-size: 80%; /* 1rem ≈ 12px → -25% */
  }
}

/* --- Compact table για μικρές οθόνες --- */
@media (max-width: 768px) {
  /* μικρότερη γραμματοσειρά */
  body{font-size:13px;}
  /* πιο “σφιχτά” κελιά */
  .table th,
  .table td {
    padding: 6px 8px;        /* λιγότερο περιθώριο */
  }

  /* πιο μικρό κεφαλίδες */
  .table th { font-weight: 600; font-size: 0.9em; }


  /* Το container να επιτρέπει scroll αλλά με λίγο margin */
  .table-wrap {
    margin: 0 -8px;
  }
}

/* Σε πολύ στενές οθόνες */
@media (max-width: 480px) {
  body{font-size:13px;}
  .table th,
  .table td {
    padding: 6px 6px;
  }
}

@media (max-width: 768px) {

  .table th:nth-child(1),
  .table td:nth-child(1) { max-width: 20px; } /* Ονοματεπώνυμο */


  .table th:nth-child(2),
  .table td:nth-child(2) { max-width: 20px; }  /* Τμήμα */

  .table th:nth-child(3),
  .table td:nth-child(3) { max-width: 6px; }  /* Είδος Άδειας */

  .table th:nth-child(4),
  .table td:nth-child(4) { max-width: 6px; }  /* Είδος Άδειας */

  .table th:nth-child(5),
  .table td:nth-child(5) { max-width: 6px; } /* Παρατήρηση */
  .table th:nth-child(6),
  .table td:nth-child(6) { max-width: 6px; } /* Παρατήρηση */
  .table th:nth-child(7),
  .table td:nth-child(7) { max-width: 100px; } /* Παρατήρηση */

.table td {
  white-space: normal;
  word-break: break-word;
}

}

.sort-bubble {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  top: -36px;      /* εμφανίζεται λίγο πάνω από το header */
  left: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.sort-bubble.show {
  opacity: 1;
  transform: translateY(0);
}