@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
html, body { height:100%; }

body{
  min-height:100vh;
  background: url('/assets/bg.jpg') center / cover no-repeat fixed,
              linear-gradient(135deg, #0a0a0a, #0a0a0a);
  display:flex; justify-content:center; align-items:center; color:#fff;
}

/* After login, top-align so long tables don't get pushed up */
body.app-open { align-items: flex-start; }

/* Brand */
.brand{
  position:fixed; top:16px; left:16px; color:#fff; font-weight:700;
  padding:6px 10px; border-radius:8px; background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.15); z-index:100;
  box-shadow: 0 12px 36px rgba(0,0,0,.50);
}

/* Login card */
.wrapper{
  width:440px; background:transparent; border:0; backdrop-filter:none;
  color:#fff; border-radius:12px; padding:30px 40px;
  box-shadow: 0 14px 40px rgba(0,0,0,.50);
}
.wrapper h1{ font-size:36px; text-align:center; }
.input-box{ position:relative; width:100%; height:50px; margin:30px 0; }
/* Login inputs with subtle glass blur */
.input-box input{
  width:100%; height:100%;
  background: rgba(0,0,0,.20);              /* 20% dark tint */
  backdrop-filter: blur(4px);                /* ~20% blur feel */
  -webkit-backdrop-filter: blur(4px);
  outline:none;
  border:2px solid rgba(255,255,255,.8);
  border-radius:40px; color:#fff; font-size:16px;
  padding:20px 45px 20px 20px;
}
.input-box input::placeholder{ color:#fff; opacity:.85; }
.input-box i{ position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; }
.btn{
  width:100%; height:45px; border-radius:40px; border:none; background:#fff; color:#333;
  font-weight:600; cursor:pointer; font-size:16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.50);
}

/* App shell — wide so icons don't wrap */
.app{
  width:min(1500px, 98vw);
  margin-top:72px; margin-bottom:24px;
}

/* Top bar */
.appbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.app-title{ font-weight:700; opacity:.95; }

/* Tabs */
.tabs{ display:flex; gap:8px; margin: 8px 0 16px; flex-wrap:wrap; }
.tabs button{
  padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.35);
  background:transparent; color:#fff; cursor:pointer; white-space:nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,.50);
}
.tabs button.active{ border-color:#fff; }

/* Panels */
.panel{
  background: rgba(0,0,0,.25);
  border-radius:12px; padding:12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.50);
}

/* Controls */
.controls .row{
  display:grid; grid-template-columns: 2.0fr 1.6fr 1.6fr 1.8fr auto;
  gap:8px; margin-bottom:10px;
}
/* Add-new controls with glass blur */
.controls input{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.20);       /* 20% dark tint */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:#fff;
}
.inline{ display:inline-flex; align-items:center; gap:6px; opacity:.85; }

/* -------- New generic layout helpers used by admin.js -------- */
.grid{ display:grid; gap:10px; }
.grid.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.stack{ display:flex; flex-direction:column; gap:6px; }
.stack label{ font-size:.9rem; opacity:.9; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.muted{ opacity:.75; }
.center{ text-align:center; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Table wrapper: hide scrollbars but allow scrolling */
.table-wrap{
  overflow:auto;
  max-height: calc(100vh - 260px);
  -ms-overflow-style: none;      /* IE/Edge */
  scrollbar-width: none;         /* Firefox */
}
.table-wrap::-webkit-scrollbar{  /* Chrome/Safari */
  width:0; height:0;
}

/* Table */
table.list{ width:100%; border-collapse:collapse; table-layout: fixed; }
table.list th, table.list td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.2); }

/* Column widths – Value reduced so actions fit */
table.list th:nth-child(1){ width:17%; }  /* Value */
table.list th:nth-child(2){ width:18%; }  /* Comment */
table.list th:nth-child(3){ width:18%; }  /* Note */
table.list th:nth-child(4){ width:23%; }  /* Expires At */
table.list th:nth-child(5){ width:8%;  }  /* Status */
table.list th:nth-child(6){ width:16%; }  /* Actions */

/* Table inputs with glass blur */
table.list input{
  width:100%; padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.20);     /* 20% dark tint */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:#fff;
}

/* Keep actions on one line */
td.right{
  text-align:right;
  white-space:nowrap;
}
.actions{
  display:inline-flex;
  gap:8px;
  flex-wrap:nowrap;
}

/* Chips */
.chip{ padding:3px 8px; border-radius:999px; font-size:.85rem; }
.chip.ok{ background: rgba(46,204,113,.25); border:1px solid rgba(46,204,113,.5); }
.chip.expired{ background: rgba(231,76,60,.25); border:1px solid rgba(231,76,60,.5); }

.btn.small{ padding:6px 10px; font-size:.9rem; }
.btn.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn.danger{ background:#e74c3c; color:#fff; border:none; }
.btn.pill{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; }

.hidden{ display:none !important; }

@media (max-width: 520px) {
  .app { margin-top: 88px; }
}

/* ========================= */
/* Toaster (bottom-right)    */
/* ========================= */
#toast-root{
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column-reverse; /* newest at bottom */
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
}
.toast{
  min-width: 280px;
  max-width: 420px;
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 14px 40px rgba(0,0,0,.50);
  display:flex; align-items:flex-start; gap:10px;
  pointer-events: auto;
  animation: toast-in .25s ease-out forwards, toast-life linear forwards;
}
.toast .icon{ font-size: 20px; line-height: 1; margin-top:2px; }
.toast .body{ flex:1; }
.toast .title{ font-weight:700; margin-bottom:2px; }
.toast .msg{ opacity:.9; font-size:.95rem; }
.toast .close{ border:none; background:transparent; color:#fff; opacity:.75; cursor:pointer; font-size:18px; }
.toast.success{ border-color: rgba(46,204,113,.55); color:#2ecc71; }
.toast.info{    border-color: rgba(52,152,219,.55); color:#3498db; }
.toast.error{   border-color: rgba(231,76,60,.55); color:#e74c3c; }

@keyframes toast-in{
  from{ transform: translateY(10px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
@keyframes toast-out{
  from{ transform: translateY(0); opacity:1; }
  to{ transform: translateY(10px); opacity:0; }
}
/* life bar at bottom */
.toast::after{
  content:"";
  display:block;
  height:3px;
  margin-top:8px;
  border-radius:3px;
  background: currentColor;
  opacity:.55;
  width:100%;
  transform-origin:left;
  animation: life-shrink var(--life, 3800ms) linear forwards;
}
@keyframes life-shrink { from{ transform: scaleX(1); } to{ transform: scaleX(0); } }
@keyframes toast-life { from{} to{} } /* just to attach --life var */

/* ========================= */
/* Modal confirm (center)    */
/* ========================= */
.modal-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index: 1001; animation: fade-in .15s ease-out forwards;
}
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.modal{
  width: min(520px, 92vw);
  background: rgba(10,10,10,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.50);
  padding: 18px;
}
.modal h3{ margin-bottom: 6px; }
.modal p{ opacity:.9; margin-bottom: 14px; }
.modal .actions{ display:flex; justify-content:flex-end; gap:8px; }
.modal .btn{ width:auto; border-radius:10px; height:auto; padding:10px 14px; }
.modal .btn.ghost{ border-color: rgba(255,255,255,.35); }
.modal .btn.danger{ background:#e74c3c; }

/* ===================== Better Shape for +30d / Reset / Save / Delete ===================== */
.actions{
  display:inline-flex;
  gap:10px;
  flex-wrap:nowrap;
}

.actions .action{
  --h: 36px;
  --pad-x: 12px;
  height: var(--h);
  padding: 0 var(--pad-x);
  border-radius: 12px;                 /* soft-square instead of pill */
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  color:#fff;
  display:inline-flex; align-items:center; gap:10px;
  font-size:.95rem; line-height:1;
  cursor:pointer; white-space:nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.50);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.actions .action:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.38);
}
.actions .action:active{
  transform: translateY(0);
  background: rgba(255,255,255,.16);
}
.actions .action:disabled{
  opacity:.5; cursor:not-allowed; transform:none;
}

/* tiny circular icon badge on the left */
.actions .badge{
  width:22px; height:22px; border-radius:50%;
  display:inline-grid; place-items:center;
  font-size:.9rem; line-height:1;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
}

/* Variants */
.actions .action--primary{           /* +30d */
  border-color: rgba(46,204,113,.55);
  background: rgba(46,204,113,.16);
}
.actions .action--primary .badge{ background: rgba(46,204,113,.25); border-color: rgba(46,204,113,.55); }

.actions .action--muted{             /* Reset */
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}
.actions .action--muted .badge{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }

.actions .action--safe{              /* Save */
  border-color: rgba(52,152,219,.55);
  background: rgba(52,152,219,.18);
}
.actions .action--safe .badge{ background: rgba(52,152,219,.25); border-color: rgba(52,152,219,.55); }

.actions .action--danger{            /* Delete */
  border-color: rgba(231,76,60,.6);
  background: rgba(231,76,60,.18);
}
.actions .action--danger .badge{ background: rgba(231,76,60,.26); border-color: rgba(231,76,60,.6); }

/* optional compact mode on very narrow widths */
@media (max-width: 920px){
  .actions .label{ display:none; }
  .actions .action{ padding:0 10px; }
}

/* ===================== Clients-specific polish ===================== */
.uuid-cell .uuid-wrap{
  display:flex; align-items:center; gap:8px; min-width:0;
}
.uuid-cell .uuid-text{
  display:inline-block; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-variant-ligatures: none;
}
table.list input[type="checkbox"]{
  width:auto; height:auto; transform: translateY(1px);
}
table.list td input[placeholder="label"],
table.list td input[placeholder="note"]{
  font-size:12px;
}


/* Online/Offline chips */
.chip.online{ background: rgba(46,204,113,.25); border:1px solid rgba(46,204,113,.6); }
.chip.offline{ background: rgba(231,76,60,.25); border:1px solid rgba(231,76,60,.65); }