/* Minimal dark theme helpers */
body { background:#0f1115; color:#e6e6e6; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.login-wrap { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.login-box { background:#16181f; padding:28px; border-radius:14px; width:380px; box-shadow:0 0 18px rgba(0,0,0,0.45); }
.login-box h2 { margin-top:0; }
label { display:block; margin-top:10px; font-weight:600; }
input, textarea, select { width:100%; padding:10px; border-radius:10px; border:1px solid #333; background:#1c1f27; color:#fff; }
.btn-primary { background:#0078ff; border:none; padding:10px 14px; border-radius:10px; color:#fff; cursor:pointer; }
.btn-danger { background:#e74c3c; border:none; padding:10px 14px; border-radius:10px; color:#fff; cursor:pointer; }
.btn { background:#2a2f3a; border:none; padding:10px 14px; border-radius:10px; color:#fff; cursor:pointer; text-decoration:none; }
.form-actions { margin-top:12px; }
.note { color:#b3b7c0; font-size:12px; margin-top:6px; }
.error { background:#922b21; color:#fff; padding:10px; border-radius:8px; margin:10px 0; }
.success { background:#1e8449; color:#fff; padding:10px; border-radius:8px; margin:10px 0; }



/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
h1 { font-size: 28px; font-weight: 700; margin: 12px 0 18px; }

/* Cards grid (home quick menu) */
.card-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.card {
  background: #16181f;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
}
.card-title { font-weight: 600; font-size: 16px; color: #e6e6e6; }
.card-actions { display: flex; gap: 8px; }
.btn.ghost { background: transparent; border: 1px solid #394050; color: #d3d7e3; }
.btn.ghost:hover { border-color: #5a6a86; }
/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; }
.btn:focus { outline: none; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); transition: all .15s ease; }


/* ===== Passwords table (classic compact look) ===== */
.table-wrap { width:100%; overflow-x:auto; border:1px solid #2a2f3a; border-radius:12px; }
.table-header, .table-row { 
  display: grid; 
  grid-template-columns: 36px 48px 160px 220px 200px 180px 1fr 60px 92px;
  gap: 10px; 
  align-items: center;
  padding: 10px 12px;
}
.table-header { 
  position: sticky; top: 60px; z-index: 2; 
  background:#12141a; 
  border-bottom:1px solid #2a2f3a;
  font-weight: 700; color:#dfe3ec;
}
.table-row { border-top:1px solid #222631; }
.table-row:hover { background:#12141a; }

.th, .td { white-space: nowrap; }
.idx-col { width: 48px; text-align:left; }
.fk-col input, .fa-col input, .ka-col input, .pw-col input { width: 100%; }
.notes-col textarea { width: 100%; height: 48px; resize: vertical; }
.ga-col { text-align: center; }
.edit-col { display:flex; gap:8px; }

input.readonly, textarea.note-readonly {
  background:#141821; border:1px solid #2b3140; color:#e6e6e6; border-radius:8px; padding:8px 10px;
}
.icon-btn { border:1px solid #394050; background:#1a1f29; padding:6px 8px; border-radius:8px; cursor:pointer; }
.icon-btn:hover { filter: brightness(1.15); }
.search-row { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.search-row #liveSearch { flex:1; background:#141821; border:1px solid #2b3140; color:#e6e6e6; border-radius:10px; padding:10px 12px; }
.search-row .right-actions { display:flex; gap:8px; }
.btn.danger { background:#8b2b2b; }
.muted { color:#a9afbf; font-weight:400; }

/* Make header non-sticky on very small screens and stack columns */
@media (max-width: 900px) {
  .table-header { position: static; }
  .table-header, .table-row { grid-template-columns: 28px 40px 140px 180px 160px 120px 1fr 50px 80px; gap:6px; }
}