:root{
  --glass: rgba(0,0,0,.42);
  --glass2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(0,123,255,.55);
  --text: #fff;
  --muted: rgba(255,255,255,.75);
}

* {box-sizing: border-box;}

html, body {
    height: 100dvh !important; /* Το !important αναγκάζει το Bootstrap να υποχωρήσει */
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Απαγορεύει το κούνημα όλης της σελίδας */
}

body{
  margin: 0;
  background: #000 url("/assets/img/background.jpg") no-repeat center center fixed;
  background-size: cover;
  color:#fff;
}

.navbar{
  background: rgba(0,0,0,.45);
}

header, footer{
  height: 56px;
  background: rgba(0,0,0,.45);
}

.hero {
    flex: 1 1 auto !important; /* Αναγκάζει το κεντρικό τμήμα να γεμίσει το κενό */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0; /* Κρίσιμο για Flexbox */
}




.btn-success{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  background:#28a745;
  color:#fff;
  font-weight:600;
  transition: transform .15s ease, background .15s ease;
}
.btn-success:hover{ background:#007bff; transform: translateY(-1px); }

.footer{
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: rgba(0,0,0,.45);
  color:#fff;
  padding: 0 1rem;
}
.footer ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:.75rem;
}
.footer a{ color:#fff; }







/* --- Layout wrapper για σελίδες με πολλά panels (dashboard) --- */
.hero--wrap{
  min-height: calc(100vh - 112px);
  display: flex;                 /* αντί για place-items:center */
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  color: #fff;
  flex-wrap: wrap;               /* να σπάει σε επόμενη γραμμή αν χρειαστεί */
}

/* Η κλασική card (πχ login) μένει στενή */
.card{
  width: min(520px, 92vw);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:28px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  text-align:center;
  margin: 0;
}

.hero .card {
  margin: 0; /* Μηδενίζουμε τα εξωτερικά περιθώρια στην αρχική */
  flex-shrink: 0; /* Εμποδίζει την κάρτα να "συρρικνωθεί" αν ο χώρος είναι μικρός */
}
.card h1{
  margin:0 0 14px;
  font-size:28px;
}

/* Dashboard panel card (φαρδιά) */
.card--panel{
  width: min(1100px, 92vw);      /* εδώ είναι η διαφορά */
  text-align: left;              /* dashboard = όχι κεντραρισμένα */
}

/* Μικρό panel (δεύτερη κάρτα τύπου Hosting Space) */
.card--mini{
  width: min(360px, 92vw);
  text-align: left;
}

/* Grid των tiles (κάρτες μέσα στο dashboard) */
.dash-grid{
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

/* Desktop */
@media (min-width: 992px){
  .dash-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991px){
  .dash-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 575px){
  .dash-grid{ grid-template-columns: 1fr; }
}









/* ===== Sidebar: desktop fixed / mobile collapsible ===== */
.dash-layout {
    flex: 1 1 auto !important;
    min-height: 0; 
    overflow-y: auto; /* Επιτρέπει το σκρολάρισμα μόνο αν το περιεχόμενο είναι μεγάλο */
}

/* Desktop: sidebar πάντα visible */
.sidebar{
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 14px;
  height: calc(100vh - 112px - 36px); /* περίπου: viewport - navbar - footer - padding */
  position: sticky;
  top: 18px;
  overflow: auto;
}

.panel {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  padding: 22px;
  height: 100%; /* Γεμίζει το ύψος του layout */
  overflow-y: auto; /* ΜΟΝΟ εδώ επιτρέπεται το scroll αν το κείμενο είναι πολύ */
}

.panel h2{ margin: 0 0 6px; }
.panel p{ margin: 0 0 14px; opacity: .85; }

.side-title{ font-size: 14px; opacity: .75; margin: 4px 8px 10px; }
.side-menu{ display:flex; flex-direction:column; gap:8px; }

.side-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  cursor:pointer;
  user-select:none;
}
.side-link:hover{color:#fff;border-color: rgba(40,167,69,.5);}
.side-link.active{background: rgba(40,167,69,.20);border-color: rgba(40,167,69,.75);}
.side-link.active:hover{background: rgba(40,167,69,.20);border-color: rgba(40,167,69,.75);}
.side-link .hint{ margin-left:auto; opacity:.65; font-size:12px; }

/* Mobile toggle button (φαίνεται μόνο σε μικρές οθόνες) */
.sidebar-toggle{
  display: none;
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.45);
  color:#fff;
  font-weight: 600;
  text-align: left;
}

/* Overlay για mobile όταν ανοίγει το sidebar */
.sidebar-backdrop{
  display:none;
}

/* ===== Mobile behavior ===== */
@media (max-width: 992px){
  .dash-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* Toggle κουμπί και μετά το περιεχόμενο */
    padding: 12px;
    flex: 1;
    overflow: hidden;
  }
  
  .panel {
    min-height: auto; /* Μην το αναγκάζεις να είναι 420px αν δεν χωράει */
    flex: 1; 
  }

  .sidebar-toggle{
    display: block;
    margin-bottom: 12px;
  }

  /* Sidebar γίνεται drawer */
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh; /* Το sidebar ως drawer θέλει όλο το ύψος */
    width: min(320px, 88vw);
    border-radius: 0;
    z-index: 1001;
    transform: translateX(-105%);
    transition: transform .18s ease;
  }

  .sidebar.is-open{
    transform: translateX(0);
  }

  .sidebar-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    display:none;
  }

  .sidebar-backdrop.is-open{
    display:block;
  }
}

/* Tabs */
.tab{ display:none; }
.tab.active{ display:block; }





/* Dashboard: μην κληρονομεί το 520px/center από την .card */
.dash-layout .card{
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}



/* Το grid των tab cards */
.tab-grid{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 1200px){
  .tab-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 576px) and (max-width: 991px){
  .tab-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px){
  .tab-grid{ grid-template-columns: 1fr; }
}

/* ===== Avatar ===== */
.avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d6efd, #6610f2); /* default bg */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent; /* PNG stays clean */
}

/* μεγαλύτερο avatar (π.χ. sidebar / profile page) */
.avatar-lg{
  width: 72px;
  height: 72px;
}

/* =========================
   Premium Cards / Tiles
   (override στο τέλος)
========================= */

/* TAB STAT CARDS */
.tab-card{
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.24));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}


.tab-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,123,255,.55);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.tab-card strong{
  display:block;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .75;
}

.tab-card .value{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}

.tab-card .sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

/* DASH ACTION TILES */
.dash-box{
  position: relative;
  display:block;
  padding: 18px;
  border-radius: 18px;
  text-decoration:none;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.20));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.42);
  overflow:hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dash-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(40,167,69,.20), transparent 60%),
    radial-gradient(700px 240px at 100% 0%, rgba(0,123,255,.22), transparent 60%);
  opacity:.95;
  pointer-events:none;
}

.dash-box:hover{
  transform: translateY(-3px);
  border-color: rgba(0,123,255,.55);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.dash-box h3{
  margin:0 0 6px;
  font-size: 16px;
  font-weight: 900;
}

.dash-box p{
  margin:0;
  font-size: 13px;
  color: rgba(255,255,255,.75);
}



/* μικρό “chevron” hint ότι είναι link */
.dash-box::after{
  content:"›";
  position:absolute;
  right: 14px;
  top: 12px;
  opacity:.55;
  font-size: 22px;
  transform: translateX(0);
  transition: transform .16s ease, opacity .16s ease;
  pointer-events:none;
}
.dash-box:hover::after{
  transform: translateX(2px);
  opacity:.85;
}
/* ===== Admin monitoring UI helpers ===== */
.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

.badge-soft.ok{ border-color: rgba(40,167,69,.45); background: rgba(40,167,69,.12); }
.badge-soft.warn{ border-color: rgba(255,193,7,.45); background: rgba(255,193,7,.12); }
.badge-soft.bad{ border-color: rgba(220,53,69,.45); background: rgba(220,53,69,.12); }

.meter{
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.meter > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: rgba(0,123,255,.75);
}

.table-lite{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.row-lite{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.row-lite .r-type{ min-width: 92px; }
.row-lite .r-ts{ opacity:.8; }
.row-lite .r-ip{ margin-left:auto; opacity:.7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }