/* ===========================================================================
   Light, clean theme with subtle pixel / programmer accents — over Bootstrap 5.
   - Readable system sans for everything functional.
   - Monospace for technical data (IP / FQDN / SSH) → "programmer" feel.
   - Press Start 2P used ONLY for the brand logo & login title → a pixel wink.
   - Soft borders, gentle shadows, rounded corners, airy spacing.
   =========================================================================== */
@font-face{
  font-family:'Press Start 2P';
  src:url('/vendor/fonts/press-start-2p.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --pixel:'Press Start 2P',monospace;

  --ink:#222838;
  --muted:#7a839a;
  --bg:#f7f8fb;
  --paper:#ffffff;
  --line:#e8eaf1;
  --line-2:#eef0f6;
  --primary:#5566f6;
  --primary-d:#3f50e6;
  --primary-soft:#eef0ff;
  --green:#1faa6b;
  --green-soft:#e7f7ef;
  --amber:#b9770a;
  --amber-soft:#fff3da;
  --red:#d8473e;
  --red-soft:#fdeceb;
  --shadow:0 1px 2px rgba(26,32,52,.06), 0 6px 20px rgba(26,32,52,.06);
  --shadow-lg:0 10px 40px rgba(26,32,52,.16);
  --bs-body-font-family:var(--sans);
  --bs-body-color:var(--ink);
}

*{ --bs-border-radius:.6rem; }
html,body{height:100%}
body{
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--ink);
  background-color:var(--bg);
  background-image:radial-gradient(circle, rgba(34,40,56,.05) 1px, transparent 1.3px);
  background-size:22px 22px;
}
.hidden{display:none !important}
.muted{color:var(--muted) !important}
.mono{font-family:var(--mono)}
.error-text{color:var(--red);font-size:.85rem;min-height:1em}
a{color:var(--primary)}

/* pixel wink — brand + login title only */
.navbar-brand.pixel-title{font-family:var(--pixel);font-size:.8rem;color:var(--ink);letter-spacing:.5px}
.login-card .pixel-title{font-family:var(--pixel);font-size:1rem;letter-spacing:.5px;line-height:1.6}
.modal-title.pixel-title{font-family:var(--sans);font-weight:700}

/* cards / surfaces */
.pixel-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}

/* buttons */
.btn{font-family:var(--sans);font-weight:600;font-size:.88rem;border-radius:9px !important;
  border:1px solid transparent;box-shadow:none;padding:.5rem .9rem;letter-spacing:0;text-transform:none;transition:.15s}
.btn-sm{font-size:.8rem;padding:.36rem .62rem;border-radius:8px !important}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff}
.btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-light:hover{background:#f4f5f9;border-color:#dfe2ec}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{filter:brightness(.95);color:#fff}
.btn-danger{background:var(--red-soft);border-color:#f3c9c6;color:var(--red)}
.btn-danger:hover{background:#fbdcda;color:var(--red)}

.icon-btn{background:none;border:none;cursor:pointer;font-size:1rem;padding:3px 6px;border-radius:7px;color:var(--muted);transition:.12s}
.icon-btn:hover{background:var(--line-2);color:var(--ink)}

/* forms */
.form-control,.form-select{font-family:var(--sans);font-size:.92rem;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);box-shadow:none}
.form-control::placeholder{color:#aab2c5}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.form-label,label.form-label{font-family:var(--sans);font-size:.74rem;font-weight:600;text-transform:none;
  letter-spacing:.02em;color:var(--muted);margin-bottom:.25rem}

/* badges */
.badge{font-family:var(--sans);font-weight:600;font-size:.7rem;border:0;border-radius:999px;padding:.32em .7em;color:var(--muted);background:var(--line-2)}
.badge.open{background:var(--amber-soft);color:var(--amber)}
.badge.done{background:var(--green-soft);color:var(--green)}

/* navbar */
.pixel-navbar{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(26,32,52,.03);z-index:1030}
.dropdown-menu{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:.35rem;font-size:.88rem}
.dropdown-item{border-radius:8px;padding:.5rem .7rem}
.dropdown-item:active{background:var(--primary)}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{padding:38px 30px;width:100%;max-width:380px;text-align:center;border-radius:18px}
.login-logo{font-size:3rem;line-height:1}

/* content / groups / grid */
.group-title{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:26px 2px 14px;padding:0}
.group-title::before{content:"";width:9px;height:9px;background:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);border-radius:2px}    /* tiny pixel-square accent */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}

.vm-card{overflow:hidden;transition:box-shadow .15s, transform .15s}
.vm-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.vm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:15px 16px;cursor:pointer}
.vm-head-main{min-width:0}
.vm-name{font-family:var(--sans);font-weight:650;font-size:1rem;color:var(--ink);word-break:break-all}
.vm-sub{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:3px;word-break:break-all}
.vm-badges{display:flex;gap:6px;align-items:center;flex-shrink:0}
.chev{transition:.15s;color:#c4cad8;font-size:.7rem}
.vm-card.expanded .chev{transform:rotate(90deg);color:var(--primary)}

/* open todos visible while collapsed */
.mini-todos{list-style:none;margin:0;padding:0 15px 13px;display:flex;flex-direction:column;gap:5px}
.mini-todos li{font-size:.82rem;color:var(--amber);background:var(--amber-soft);border:1px solid #f4dca0;
  border-radius:8px;padding:.3em .6em;word-break:break-word}
.vm-card.expanded .mini-todos{display:none}

.vm-body{display:none;border-top:1px solid var(--line);padding:15px 16px;background:#fcfdff}
.vm-card.expanded .vm-body{display:block}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.86rem;margin-bottom:14px}
.kv b{font-family:var(--sans);font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;align-self:center}
.kv span{font-family:var(--mono);color:var(--ink);word-break:break-all}
.vm-actions{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.section-label{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 7px}
.section-label::before{content:"";width:7px;height:7px;background:var(--line);border-radius:2px}
.notes-area{width:100%;min-height:64px;resize:vertical;font-size:.9rem}

/* todos */
.todos{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.todo{display:flex;align-items:center;gap:10px;padding:.5em .65em;border:1px solid var(--line);border-radius:9px;background:#fff}
.todo input[type=checkbox]{width:18px;height:18px;flex-shrink:0;cursor:pointer;accent-color:var(--green)}
.todo .t-text{flex:1;word-break:break-word;font-size:.9rem}
.todo.done{background:var(--green-soft);border-color:#d2ecdd}
.todo.done .t-text{text-decoration:line-through;color:var(--muted)}
.todo-add{display:flex;gap:8px;margin-top:9px}
.todo-add .form-control{flex:1}

/* modal */
.modal-content{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg)}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-backdrop.show{opacity:.3}

/* groups & backups lists */
.pixel-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto}
.pixel-list .row-item{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:.55em .65em}
.pixel-list .row-item .grow{flex:1;min-width:0}
.pixel-list .g-name{width:100%}

/* toast */
.pixel-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;border-radius:11px;box-shadow:var(--shadow-lg);
  padding:.7em 1.1em;z-index:1090;font-family:var(--sans);font-size:.88rem;max-width:92vw;text-align:center}
.pixel-toast.err{background:var(--red)}

/* audit log */
.audit-wrap{max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.audit-table{font-size:.84rem;margin:0}
.audit-table thead th{position:sticky;top:0;background:#f3f4f8;border-bottom:1px solid var(--line);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.audit-table td{vertical-align:middle;border-color:var(--line-2)}
.audit-table .mono{font-family:var(--mono);font-size:.8rem}
.audit-table .nowrap{white-space:nowrap}
.audit-table .evt{font-family:var(--mono);font-size:.78rem;background:var(--line-2);padding:.15em .5em;border-radius:6px}
.audit-table tr.audit-bad td{background:var(--red-soft)}
.audit-table tr.audit-bad .evt{background:#f6cfcc;color:var(--red)}

.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:1rem}
.foot{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}

@media (max-width:576px){
  .cards{grid-template-columns:1fr}
  .navbar-brand.pixel-title{font-size:.68rem}
}