:root{--bg:#0e141b;--pn:#151e28;--p2:#1b2733;--ln:#26364a;--tx:#e8eef4;--mu:#8ba0b4;--or:#e8780f;--ok:#3fb8a0;--ps:#7aa2ff;--bd:#e0645a;font:15px/1.5 "Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--tx);background:radial-gradient(1100px 500px at 90% -10%,#1e2e40 0,transparent 60%),var(--bg)}
.mu{color:var(--mu)}.sm{font-size:.85rem}.hide{display:none!important}h2{margin:0 0 .3rem;font-size:1.2rem}p{margin:.3rem 0}
header{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding:.7rem 1.2rem;border-bottom:1px solid var(--ln);position:sticky;top:0;background:#0e141bf2;z-index:5}
header h1{font-size:1.2rem;margin:0 auto 0 0;letter-spacing:.01em}nav{display:flex;gap:.4rem}
.hl{height:42px;width:auto;max-width:130px;border-radius:9px;object-fit:cover;border:1px solid var(--ln)}
button,.btn{font:inherit;color:var(--tx);background:var(--p2);border:1px solid var(--ln);border-radius:8px;padding:.45rem .9rem;cursor:pointer;transition:border-color .15s}
a.btn{text-decoration:none;display:inline-block}nav button.on{border-color:var(--or);color:var(--or)}button:hover,.btn:hover{border-color:var(--or)}button.dg:hover{border-color:var(--bd);color:var(--bd)}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
main{max-width:1280px;margin:auto;padding:1.2rem}
.panel{background:var(--pn);border:1px solid var(--ln);border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:1.2rem}
.bay{background:var(--pn);border:1px solid var(--ln);border-radius:16px;margin-bottom:1.6rem;overflow:hidden}
.bh{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;padding:1.2rem 1.4rem;background:linear-gradient(180deg,var(--p2),var(--pn))}.bt{min-width:220px}.bt h2{font-size:1.4rem;margin:0}
.sum{display:flex;gap:.5rem;flex-wrap:wrap;padding:.8rem 1.4rem 0}
.lamp{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:.6rem;background:var(--mu);color:var(--mu);box-shadow:0 0 8px currentColor}
.lamp.running{background:var(--ok);color:var(--ok)}.lamp.off{background:var(--bd);color:var(--bd)}
.gs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;flex:1;min-width:280px}.gl{display:flex;justify-content:space-between;font-size:.8rem;color:var(--mu)}
.gb{height:10px;margin-top:3px;background:repeating-linear-gradient(90deg,var(--ln) 0 6px,transparent 6px 8px)}
.gb i{display:block;height:100%;background:var(--ok);-webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px)}.gb i.warn{background:#e2a93b}.gb i.bad{background:var(--bd)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;padding:1rem 1.4rem 1.4rem}
.vmc{display:grid;gap:.55rem;background:var(--p2);border:1px solid var(--ln);border-left:4px solid var(--mu);border-radius:12px;padding:.9rem 1rem}
.vmc.running{border-left-color:var(--ok)}.vmc.paused{border-left-color:var(--ps)}.vmc.stopped{border-left-color:var(--bd);opacity:.85}
.vh{display:flex;gap:.7rem;align-items:center}.nm{flex:1;min-width:0}.nm strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}small{color:var(--mu);font-size:.78rem}
.tp{font-size:.72rem;font-weight:700;padding:.2rem .5rem;border-radius:6px;border:1px solid var(--ps);color:var(--ps)}.tp.lxc{border-color:var(--or);color:var(--or)}
.st{font-size:.76rem;padding:.15rem .6rem;border-radius:999px;border:1px solid var(--ln);white-space:nowrap}.st.running{color:var(--ok);border-color:var(--ok)}.st.paused{color:var(--ps);border-color:var(--ps)}.st.stopped{color:var(--bd);border-color:var(--bd)}
.os{margin:0;color:var(--mu);font-size:.85rem}.vf{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.2rem}.acts{display:flex;gap:.5rem;flex-wrap:wrap}.vf button{padding:.3rem .7rem;font-size:.85rem}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--ln);font-size:.88rem}th{color:var(--mu)}.scroll{overflow-x:auto}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem;margin-top:.6rem}
.lgo{display:grid;gap:.3rem;padding:.4rem;text-align:center}.lgo img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}.lgo.sel{border-color:var(--or);box-shadow:0 0 0 1px var(--or)}
dialog{background:var(--pn);color:var(--tx);border:1px solid var(--ln);border-radius:14px;width:min(92vw,420px)}dialog::backdrop{background:#000a}
input,select{font:inherit;background:var(--bg);color:var(--tx);border:1px solid var(--ln);border-radius:8px;padding:.5rem .7rem;width:100%}select{width:auto}
.pb{height:14px;border-radius:7px;background:var(--bg);overflow:hidden;margin:.8rem 0}.pb i{display:block;height:100%;width:0;background:var(--or);transition:width .6s}.pb i.ok{background:var(--ok)}.pb i.ko{background:var(--bd)}
.err{color:var(--bd);min-height:1.4em;margin:0;text-align:center}
.lg{display:grid;place-items:center;min-height:100vh;padding:1rem}
.lcard{width:min(94vw,360px);display:grid;gap:.7rem;justify-items:center;text-align:center;background:var(--pn);border:1px solid var(--ln);border-radius:22px;padding:1.4rem;box-shadow:0 20px 60px #0008}
.lcard h1{margin:0;font-size:1.5rem}.tt{margin:0;font-weight:600;font-size:1.05rem}
.brand{position:relative;width:100%;aspect-ratio:16/8;border-radius:14px;overflow:hidden;background:var(--bg)}
.brand img{position:absolute;inset:0;width:100%;height:100%}.brand .bg{object-fit:cover;filter:blur(16px) brightness(.55);transform:scale(1.25)}.brand .fg{object-fit:contain}
.steps{display:flex;gap:6px;width:100%}.steps b{flex:1;height:4px;background:var(--ln);border-radius:2px}.steps b.on{background:var(--or)}
.dots{display:flex;gap:10px;justify-content:center;min-height:16px}.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ln);transition:.12s}.dots i.on{background:var(--or);border-color:var(--or);box-shadow:0 0 10px #e8780f88}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.key{height:60px;padding:0;font-size:1.5rem;font-weight:600;border-radius:16px;background:linear-gradient(180deg,var(--p2),var(--pn));touch-action:manipulation;transition:transform .08s,background .1s}
.key:active{transform:scale(.93);background:var(--or);color:#fff;border-color:var(--or)}.key.fn{font-size:1.2rem;color:var(--mu)}
.lnk{background:none;border:0;color:var(--mu);font-size:.8rem;text-decoration:underline;padding:.2rem}
.shake{animation:sh .3s}@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media(max-width:700px){.gs{grid-template-columns:1fr}header h1{font-size:1.05rem}.cards{padding:.8rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

h3{margin:1rem 0 .4rem;font-size:1rem}
.kp{display:grid;gap:.7rem;justify-items:center;width:100%}.kpw{width:100%}
dialog.pd{width:min(92vw,340px);text-align:center}dialog.pd .pad{max-width:280px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;margin-bottom:.8rem}.form label{display:grid;gap:.25rem;font-size:.82rem;color:var(--mu)}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--p2);border:1px solid var(--or);border-radius:10px;padding:.6rem 1rem;z-index:20;max-width:90vw}
.hb{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--mu)}
.hb i{width:12px;height:12px;border-radius:50%;background:var(--bd);box-shadow:0 0 8px var(--bd)}
.hb.on i{background:var(--ok);box-shadow:0 0 8px var(--ok)}.hb.on b{color:var(--ok)}.hb.off b{color:var(--bd)}.hb b{font-weight:600}


/* Identité visuelle par hyperviseur */
.bay{--accent:#6f9cff;--accent-soft:#6f9cff22}
.bay[data-theme="nvisen"]{--accent:#f28a24;--accent-soft:#f28a2422}
.bay[data-theme="ocus"]{--accent:#4d9cff;--accent-soft:#4d9cff22}
.bay .bh{border-bottom:1px solid var(--accent-soft)}
.bay .bt h2{color:var(--accent)}
.bay .lamp{background:var(--mu);color:var(--mu)}
.bay .lamp.running{background:var(--ok);color:var(--ok)}
.bay .lamp.off{background:var(--bd);color:var(--bd)}
.bay .tp{border-color:var(--accent);color:var(--accent)}
.bay .vmc{cursor:pointer;transition:border-color .15s,transform .15s}
.bay .vmc:hover{border-color:var(--accent);transform:translateY(-1px)}
.bay .vmc .vf button:hover{border-color:var(--accent)}
#version{font-size:.72rem;font-weight:500;color:var(--mu);margin-left:.45rem;white-space:nowrap}
#fs{white-space:nowrap}
.checkline{display:flex;align-items:center;gap:.55rem;color:var(--mu);font-size:.85rem;margin:.4rem 0 .8rem}
.checkline input{width:auto}
dialog.detail{width:min(94vw,720px);max-height:85vh;overflow:auto}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem;margin:.8rem 0}
.detail-item{background:var(--p2);border:1px solid var(--ln);border-radius:9px;padding:.65rem}
.detail-item b{display:block;font-size:.75rem;color:var(--mu);font-weight:500}
.detail-item span{overflow-wrap:anywhere}
.app-state{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem}
.app-state i{width:9px;height:9px;border-radius:50%;background:var(--mu);display:inline-block}
.app-state.running i{background:var(--ok);box-shadow:0 0 7px var(--ok)}
.app-state.stopped i{background:var(--bd);box-shadow:0 0 7px var(--bd)}
.app-state.running{color:var(--ok)}.app-state.stopped{color:var(--bd)}
.app-list{display:grid;gap:.5rem;margin:.6rem 0 1rem}
.app-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.65rem .75rem;background:var(--p2);border:1px solid var(--ln);border-radius:9px}
.app-row>div{min-width:0}.app-row small{display:block;overflow-wrap:anywhere}
@media(min-width:701px) and (max-width:1100px){
 main{max-width:none;width:100%;padding:.45rem}
 .bay{margin-bottom:.8rem;border-radius:12px}
 .bh{padding:.8rem;gap:.7rem}
 .sum{padding:.55rem .8rem 0}
 .cards{padding:.65rem;gap:.65rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
 .panel{padding:.85rem;margin-bottom:.8rem}
 header{padding:.55rem .7rem;gap:.55rem}
}
@media(max-width:700px){
 main{padding:.35rem}
 .bh{padding:.7rem}
 .cards{grid-template-columns:1fr;padding:.55rem}
 header{padding:.5rem;gap:.45rem}
 header h1{flex-basis:100%;margin:0}
 header nav{flex:1;flex-wrap:wrap}
 #version{display:block;margin:.1rem 0 0}
}

.app-badges,.server-apps{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.server-apps{padding:.4rem 1.4rem 0}
.app-mini{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--ln);border-radius:999px;padding:.12rem .5rem;font-size:.72rem;color:var(--mu);max-width:100%}
.app-mini i{width:7px;height:7px;border-radius:50%;background:var(--mu);display:inline-block;flex:0 0 auto}
.app-mini.running{color:var(--ok);border-color:#3fb8a055}.app-mini.running i{background:var(--ok);box-shadow:0 0 5px var(--ok)}
.app-mini.stopped{color:var(--bd);border-color:#e0645a55}.app-mini.stopped i{background:var(--bd);box-shadow:0 0 5px var(--bd)}
@media(max-width:1100px){.server-apps{padding:.35rem .8rem 0}}

@media(min-width:1101px) and (max-width:1500px){main{max-width:none;width:100%;padding:.7rem}.bay{margin-bottom:1rem}.cards{padding:.8rem 1rem 1rem}}

/* ==================================================
   Adaptation écrans tactiles et tablettes Samsung
   ================================================== */

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Utilisation de toute la largeur disponible */
@media (min-width: 701px) {
  main {
    width: 100%;
    max-width: none;
    padding: clamp(8px, 1vw, 16px);
  }

  .bay {
    margin-bottom: .9rem;
  }

  .bh {
    padding: clamp(.8rem, 1.2vw, 1.2rem);
  }

  .cards {
    padding: .8rem clamp(.8rem, 1.2vw, 1.2rem) 1rem;
    gap: .8rem;
  }

  .panel {
    padding: 1rem;
    margin-bottom: .9rem;
  }
}

/* Téléphones et petits écrans */
@media (max-width: 700px) {
  main {
    width: 100%;
    padding: 6px;
  }

  .bay {
    margin-bottom: .7rem;
  }

  .bh {
    padding: .7rem;
  }

  .cards {
    padding: .5rem;
    gap: .6rem;
  }
}

/* Conserver des boutons adaptés au tactile */
button, .btn {
  min-height: 42px;
  touch-action: manipulation;
}

#fs {
  white-space: nowrap;
}

:fullscreen {
  overflow: auto;
  background: var(--bg);
}

/* ==================================================
   Administration : formulaire compact et listes avec défilement
   ================================================== */

/* Formulaire Applications surveillées */
@media (min-width: 1400px) {
  .app-form {
    display: grid;
    grid-template-columns:
      1.05fr 1.05fr 1.75fr .5fr
      1fr .8fr .65fr .5fr 1fr;
    gap: .45rem;
    align-items: end;
  }

  .app-form label {
    min-width: 0;
    font-size: .75rem;
  }

  .app-form input,
  .app-form select {
    min-width: 0;
    width: 100%;
    padding: .4rem .45rem;
    font-size: .82rem;
  }
}

@media (min-width: 701px) and (max-width: 1399px) {
  .app-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
  }
}

/* Listes indépendantes avec défilement vertical */
.app-table-scroll,
.save-table-scroll {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--ln);
  border-radius: 9px;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--mu) var(--p2);
}

/* Actions alignées à droite dans les tableaux */
.app-table-scroll td:last-child,
.save-table-scroll td:last-child {
  text-align: right;
  white-space: nowrap;
}

.app-table-scroll td:last-child .acts,
.save-table-scroll td:last-child .acts {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Défilement vertical visible des sauvegardes */
.save-table-scroll {
  height: 190px;
  max-height: 190px;
  overflow-y: scroll;
  overflow-x: auto;
}

.app-table-scroll table {
  min-width: 850px;
}

.save-table-scroll table {
  min-width: 560px;
}

/* En-têtes visibles pendant le défilement */
.app-table-scroll thead,
.save-table-scroll thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--p2);
}

.app-table-scroll th,
.save-table-scroll th {
  background: var(--p2);
}

/* Barre de défilement visible sur Chromium et Samsung Internet */
.app-table-scroll::-webkit-scrollbar,
.save-table-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.app-table-scroll::-webkit-scrollbar-thumb,
.save-table-scroll::-webkit-scrollbar-thumb {
  background: var(--mu);
  border: 2px solid var(--bg);
  border-radius: 10px;
}

.app-table-scroll::-webkit-scrollbar-track,
.save-table-scroll::-webkit-scrollbar-track {
  background: var(--p2);
}

@media (max-width: 700px) {
  .app-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .app-form label {
    min-width: 0;
  }

  .app-form input,
  .app-form select {
    min-width: 0;
    width: 100%;
  }

  .app-form label:first-child,
  .app-form label:nth-child(2),
  .app-form label:nth-child(5),
  .app-form label:last-child {
    grid-column: span 2;
  }

  .app-table-scroll,
  .save-table-scroll {
    max-height: 250px;
  }
}


/* Adresse IPv4 : préfixe fixe et dernier octet */
.app-ip-field {
  display: flex;
  align-items: center;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--ln);
  border-radius: 8px;
  overflow: hidden;
}
.app-ip-field span {
  padding: .5rem 0 .5rem .55rem;
  white-space: nowrap;
  color: var(--mu);
  font-size: .85rem;
}
.app-ip-field input {
  min-width: 0;
  width: 4.2rem;
  flex: 1;
  border: 0;
  border-radius: 0;
  padding-left: .2rem;
}
.app-ip-field input:focus {
  outline: none;
}